Menu
Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when creating or modifying any UI element visible to the user, reviewing HTML markup, adding interactive elements, or when Lighthouse Accessibility drops below 90.
Use when creating or modifying .astro/.tsx files, configuring astro.config.mjs, working with Content Collections, or when TypeScript or build errors occur.
Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90.
Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.
Use when writing or reviewing any CSS class, changing colors, modifying globals.css, or when hardcoded colors or inline styles are detected.
Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90.
| name | readme |
| description | Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts. |
This skill provides access to the complete AstroDeck project documentation.
npm install # Install dependencies
npm run dev # Start development server (localhost:4321)
npm run build # Build for production
npm run preview # Preview production build
AstroDeck uses a three-tier hierarchy of building blocks:
| Tier | What | Count | Location |
|---|---|---|---|
| Components | Small UI primitives (Button, Dialog, Tabs...) | 11 | src/components/ui/ |
| Sections | Full page sections (Hero, Pricing, FAQ...) | 16 | src/components/sections/ |
| Pages | Complete page templates (SaaS, Portfolio...) | 11 | src/pages/ |
Components are the smallest pieces. Sections combine components into full-width blocks. Pages assemble sections into complete websites.
src/
├── components/sections/ # TIER 2: Hero, CTA, Features, Pricing, FAQ, etc.
├── components/ui/ # TIER 1: shadcn/ui components (Button, Card, Dialog...)
├── layouts/ # BaseLayout, FullWidthLayout, AuthLayout, ArticleLayout
├── pages/ # TIER 3: Complete pages with file-based routing
├── content/ # Content Collections (blog)
├── styles/globals.css # Design tokens
└── lib/utils.ts # Utility functions
Always use path aliases:
import Component from "@/components/Component.astro";
import { Button } from "@/components/ui/button";
import Layout from "@/layouts/BaseLayout.astro";
When this skill is invoked, read the full README.md file from the project root to get complete, up-to-date documentation.