| name | astro-codegen |
| description | Generate Astro.js code (layouts, components, pages) from design briefs using Shadcn UI components. Use this skill when you need to create .astro files from a design-brief.json specification. Works with Shadcn Skill for component APIs, Frontend Design Skill for visual polish, and Astro AI Docs for best practices. Always use this skill when generating Astro code, creating .astro files, or implementing page layouts. The skill includes reference files for layout-specific, component-specific, and page-specific generation rules. |
Astro Code Generation
Generate Astro.js layouts, components, and pages from design briefs. This skill handles code generation with proper Shadcn UI integration.
When to use this skill
Use this skill when you need to:
- Generate Astro .astro files from a design brief
- Create layouts, components, or pages
- Integrate Shadcn UI components
- Ensure proper Astro conventions
Quick reference
| What you're generating | Reference file |
|---|
| Layout component | references/layout.md |
| Reusable components | references/components.md |
| Page files | references/pages.md |
| Astro + Shadcn rules | references/astro-conventions.md |
Your task
Generate .astro files based on the design-brief.json specification. Always:
- Read the appropriate reference file for the file type you're generating
- Use Shadcn Skill for correct component APIs
- Use Frontend Design Skill for visual quality
- Follow Astro conventions from the reference files
- Write files to the correct location using Write tool
File locations
| File type | Location |
|---|
| Layouts | src/layouts/Layout.astro |
| Components | src/components/ComponentName.astro |
| Pages | src/pages/page-name.astro |
| UI components | src/components/ui/ (via bunx shadcn add) |
Important notes
- ALWAYS read the reference file before generating
- Use
@/ import paths for ui and lib
- Interactive Shadcn components need
client:load or client:visible
- Static Shadcn components (Badge, Card) don't need client directive
- Install Shadcn components:
bunx shadcn add [component]
- Import Layout in pages:
import Layout from '@/layouts/Layout.astro'
- Wrap page content:
<Layout>...</Layout>
Design brief input
The skill expects design-brief.json with:
{
"pages": [{ "page": "index", "sections": [...] }],
"sharedComponents": [{ "name": "Header", ... }],
"designDirection": "..."
}
Generation workflow
- Read design-brief.json to understand what to generate
- Read the appropriate reference file for generation rules
- Check if Shadcn components need installation - run
bunx shadcn add
- Generate the .astro file following reference patterns
- Verify the file uses correct imports and directives
See references
references/layout.md - Layout generation rulesreferences/components.md - Component generation rulesreferences/pages.md - Page generation rulesreferences/astro-conventions.md - Astro + Shadcn integration
