astro

Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site

By astrolicious · 14,974 installs

npx skills add astrolicious/agent-skills --skill astro

Source repository · Upstream listing

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 Common Workflows Creating a Basic Page Add a file to src/pages/ — the filename becomes the route: Creating a Component 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: Add [Cloudflare](https://docs.astro.build/en/guides/integrations guide/cloudflare) adapter using astro add: Add [Netlify](https://docs.astro.build/en/guides/integrations guide/netlify) adapter using astro add: Add [Vercel](https://docs.astro.build/en/guides/integrations guide/vercel) adapter using astro add: [Other Community adapters](https://astro.build/integrations/2/?search=&categories%5B%5D=adapters) Resources [Docs](https://docs.astro.build) [Config Reference](https://docs.astro.build/en/reference/configuration reference/) [llms.txt](https://docs.astro.build/llms.txt) [GitHub](https://github.com/withastro/astro)