structure-astro

Generates Astro project directory layouts for component types.

2|Updated Aug 8, 2024
One-click install
npx skills add https://github.com/walid-mos/mac-config --skill structure-astro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: structure-astro
Source: https://github.com/walid-mos/mac-config/tree/main/claude/.claude/skills/structure-astro
Command: npx skills add https://github.com/walid-mos/mac-config --skill structure-astro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces a consistent and scalable directory structure for Astro projects, ensuring maintainability and developer efficiency across NextNode projects.

Core Features & Use Cases

  • Domain-Driven Organization: Organizes components by page and shared functionality.
  • Clear Separation: Distinguishes between page-specific components, reusable UI elements, interactive islands, and pure logic.
  • Use Case: When starting a new Astro project or onboarding a new developer, this Skill provides the blueprint for setting up the src/ directory according to established conventions.

Quick Start

Apply the structure-astro skill to organize the source directory of your Astro project.

Frequently Asked Questions about structure-astro

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure an Astro project for domain-driven component organization?▼

To structure an Astro project with domain-driven organization, separate page-specific components, shared UI elements, interactive islands, and pure TypeScript logic within the `src/` directory to enforce separation of concerns.

What is the best way to organize shared UI elements and interactive islands in Astro?▼

Organizing shared UI elements and interactive islands in Astro requires standardizing the `src/` directory structure, distinguishing reusable components from page-specific logic to ensure maintainability and developer efficiency.

How do I separate pure TypeScript logic from Astro components?▼

Separate pure TypeScript logic from Astro components by enforcing a standardized project structure that isolates domain logic, ensuring clear boundaries between interactive islands, UI elements, and business logic within `src/`.

Does this Astro project structure convention support scalable frontend development?▼

This Astro project structure supports scalable frontend development by enforcing consistent directory conventions, organizing components by page and shared functionality, and promoting separation of concerns across the `src/` directory.

When do I need to standardize my Astro project directory structure?▼

You need to standardize your Astro project directory structure when starting a new project or onboarding developers, providing a blueprint for the `src/` directory to maintain consistency and scalability.