Skill for using Astro projects. Includes CLI commands, project structure, core config options, and adapters. Use this skill when the user needs to work with Astro or when the user mentions Astro.
Always consult docs.astro.build for code examples and latest API.
Astro is the web framework for content-driven websites.
CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.
bun astro dev - Start the development server.bun astro build - Build your project and write it to disk.bun astro check - Check your project for errors.bun astro add - Add an integration.bun astro sync - Generate TypeScript types for all Astro modules.Re-run after adding/changing plugins.
Astro leverages an feature-based folder layout. Reference .agents/Agent.md for full details.
src/pages - Required. Routing only, must remain thin.src/sections - Main architectural unit (Features). Owns UI, local data, and types.src/layouts - Structural wrappers.src/components - Reusable, feature-agnostic UI. Use clsx and style variants.src/styles - Global styles. Use global.css utilities (.service-card, .nav-link).src/assets - Media. Use <picture> and webp for LCP optimization.src/islands - .tsx components for client-side interactivity only.Props interface in a .types.ts file.@/ (src) and @sections/ (src/sections)./pages.| Option | Notes |
|---|---|
site | Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. |
Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.
Add Node.js adapter using astro add:
bun astro add node --yes
Add Cloudflare adapter using astro add:
bun astro add cloudflare --yes
Add Netlify adapter using astro add:
bun astro add netlify --yes
Add Vercel adapter using astro add:
bun astro add vercel --yes