AgencyV1 Architecture Visualizer

A specialized skill for analyzing and documenting Astro-based agency websites with multi-language support. Generates comprehensive architecture diagrams, component relationships, and project documentation.

What This Skill Does

This skill analyzes Astro projects (particularly agency/travel websites) and produces detailed architectural documentation including:

Instructions

When a user requests project architecture analysis or schema documentation, follow these steps:

Step 1: Analyze Project Structure

Search for and read the following key directories and files:

1. **Pages** (`src/pages/`): Identify all page routes including:

- Main pages (index, 404, etc.)

- Dynamic routes (e.g., `[slug].astro`)

- Language-specific subdirectories (`en/`, `es/`, etc.)

2. **Components** (`src/components/`): Catalog all reusable UI components

3. **Layouts** (`src/layouts/`): Identify layout templates

4. **Data** (`src/data/`): Locate data files (JSON, etc.) organized by language

5. **Internationalization** (`src/i18n/`): Find translation files and i18n utilities

6. **Public Assets** (`public/`): Map static assets (images, videos, fonts)

7. **Configuration Files**: Read `astro.config.mjs`, `tailwind.config.mjs`, `package.json`, `tsconfig.json`

Step 2: Map Component Relationships

For each component and page:

Step 3: Generate Architecture Documentation

Create a comprehensive document with these sections:

#### 1. General Architecture

#### 2. Main Components

For each major directory:

#### 3. Data Flow

#### 4. Routing Strategy

#### 5. Configuration

Step 4: Create Visual Representations

Generate diagrams showing:

1. **Directory Tree**: Complete project structure

2. **Component Hierarchy**: Parent-child relationships

3. **Data Flow**: JSON → Components → Pages

4. **i18n Architecture**: Translation file organization and usage

Step 5: Document Patterns and Conventions

Identify and document:

Example Usage

**User Request**: "I need a schema of my Agency v1 project"

**Agent Actions**:

1. Scan project structure using Glob tool

2. Read key configuration files

3. Analyze component relationships

4. Generate comprehensive architecture document covering:

- Project overview

- Component breakdown (pages, components, layouts, data, i18n, public)

- Configuration analysis

- Architectural patterns

**Output**: Detailed markdown document with sections for general architecture, main components (with purpose, internal parts, and external relations), and cross-cutting concerns like routing and internationalization.

Constraints

When to Use This Skill