Astro
Scaffold and extend Astro sites—components, content collections, SSR adapters, CLI workflows, and deploy-ready static builds.
Overview
astro is an agent skill for the Build phase that guides Astro components, content collections, SSR adapters, CLI usage, and static site delivery.
Install
npx skills add https://github.com/astrolicious/agent-skills --skill astroWhat is this skill?
- Official-docs-first workflow pointing to docs.astro.build for APIs and examples
- CLI command map: dev, build, check, add, sync with re-run guidance after plugin changes
- Project structure conventions for src/pages, components, and config file discovery
- Content collections, islands architecture, and static site generation (SSG) guidance
- SSR adapter setup and deployment-oriented project configuration
- Documents 5 core CLI commands: dev, build, check, add, sync
- Config discovery for astro.config.js, .mjs, .cjs, and .ts at project root
Adoption & trust: 7.4k installs on skills.sh; 7 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are starting or extending an Astro project and need correct file layout, CLI steps, and integration patterns without guessing outdated APIs.
Who is it for?
Solo builders shipping blogs, docs, and marketing sites who want agent help grounded in Astro’s content-first model.
Skip if: Pure native mobile apps, teams committed to Next-only React SPAs with no Astro footprint, or work that ignores official Astro docs.
When should I use this skill?
User needs Astro work, mentions .astro files, SSG, islands architecture, content collections, SSR adapters, or deploying an Astro project.
What do I get? / Deliverables
You get Astro-aligned structure, commands, and implementation steps so the project builds, type-checks, and is ready to deploy as SSG or configured SSR.
- Astro components, pages, and config changes per official patterns
- Integration and content-collection setup steps runnable via CLI
Recommended Skills
Journey fit
Astro work centers on implementing the site or app surface and its content architecture during product build. Frontend subphase covers .astro pages, islands, SSG configuration, and integrations even when SSR adapters touch deployment prep.
How it compares
Framework-focused agent skill, not a hosted Astro Cloud substitute or generic React tutoring.
Common Questions / FAQ
Who is astro for?
Indie developers using Claude Code, Cursor, or similar agents to build or maintain Astro websites with components, collections, and standard CLI workflows.
When should I use astro?
Use it in Build when creating .astro pages, configuring content collections, adding integrations via astro add, running astro check, or preparing static or adapter-based deploys.
Is astro safe to install?
It references MIT-licensed Astro guidance; review the Security Audits panel on this Prism page and prefer official docs for security-sensitive adapter and env configuration.
SKILL.md
READMESKILL.md - Astro
# Astro Usage Guide **Always consult [docs.astro.build](https://docs.astro.build) for code examples and latest API.** Astro is the web framework for content-driven websites. --- ## Quick Reference ### File Location CLI looks for `astro.config.js`, `astro.config.mjs`, `astro.config.cjs`, and `astro.config.ts` in: `./`. Use `--config` for custom path. ### CLI Commands - `npx astro dev` - Start the development server. - `npx astro build` - Build your project and write it to disk. - `npx astro check` - Check your project for errors. - `npx astro add` - Add an integration. - `npx astro sync` - Generate TypeScript types for all Astro modules. **Re-run after adding/changing plugins.** ### Project Structure Reference [project structure docs](https://docs.astro.build/en/basics/project-structure). - `src/*` - Project source code (components, pages, styles, images, etc.) - `src/pages` - **Required.** Defines all pages and routes. - `src/components` - Components (convention, not required). - `src/layouts` - Layout components (convention, not required). - `src/styles` - CSS/Sass files (convention, not required). - `public/*` - Non-code, unprocessed assets (fonts, icons, etc.); copied as-is to build output. - `package.json` - Project manifest. - `astro.config.{js,mjs,cjs,ts}` - Astro configuration file. (recommended) - `tsconfig.json` - TypeScript configuration file. (recommended) --- ## Core Config Options | Option | Notes | |--------|-------| | `site` | Your final, deployed URL. Used to generate sitemaps and canonical URLs. | ### Example `astro.config.ts` ```ts import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://example.com', }); ``` --- ## Common Workflows ### Creating a Basic Page Add a file to `src/pages/` — the filename becomes the route: ```astro --- // src/pages/index.astro const title = 'Hello, Astro!'; --- <html> <head><title>{title}</title></head> <body> <h1>{title}</h1> </body> </html> ``` ### Creating a Component ```astro --- // src/components/Card.astro const { title, body } = Astro.props; --- <div class="card"> <h2>{title}</h2> <p>{body}</p> </div> ``` ### Deploying with an Adapter 1. Add the adapter: `npx astro add vercel --yes` (or `node`, `cloudflare`, `netlify`) 2. Run `npx astro check` to catch type and configuration errors before building. 3. Run `npx astro build` to produce the deployment artifact. 4. Verify the build output directory (e.g. `dist/`) exists and is non-empty before proceeding. 5. Deploy the output per the adapter's documentation. --- ## Adapters 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](https://docs.astro.build/en/guides/integrations-guide/node) adapter using astro add:** ``` npx astro add node --yes ``` **Add [Cloudflare](https://docs.astro.build/en/guides/integrations-guide/cloudflare) adapter using astro add:** ``` npx astro add cloudflare --yes ``` **Add [Netlify](https://docs.astro.build/en/guides/integrations-guide/netlify) adapter using astro add:** ``` npx astro add netlify --yes ``` **Add [Vercel](https://docs.astro.build/en/guides/integrations-guide/vercel) adapter using astro add:** ``` npx astro add vercel --yes ``` [Other Community adapters](https://astro.build/integrations/2/?search=&categories%5B%5D=adapters) ## Resources - [Docs](https://docs.astro.build) - [Config Reference](https://docs.astro.buil