--- title: "astro by astrolicious · skilld" canonical_url: "https://skilld.dev/gh/astrolicious/agent-skills" meta: description: "Provides instructions for building with Astro, including creating components and pages, configuring SSR adapters, setting up content collections, and managing project… From astrolicious/agent-skills." "og:description": "Provides instructions for building with Astro, including creating components and pages, configuring SSR adapters, setting up content collections, and managing project… From astrolicious/agent-skills." "og:title": "astro by astrolicious" "twitter:description": "Provides instructions for building with Astro, including creating components and pages, configuring SSR adapters, setting up content collections, and managing project… From astrolicious/agent-skills." "twitter:title": "astro by astrolicious" --- ` [All skills](https://skilld.dev/skills) [![astrolicious avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fastrolicious.png%3Fsize%3D96)](https://skilld.dev/gh/astrolicious) # **/astro** [@cb4839f](https://github.com/astrolicious/agent-skills/commit/cb4839f3794189ebf35c55d3ba5d3876dff7acf0 "Your agent reads SKILL.md at commit cb4839f") by [astrolicious](https://skilld.dev/gh/astrolicious)· [astrolicious](https://skilld.dev/gh/astrolicious)/ [agent-skills](https://skilld.dev/gh/astrolicious/agent-skills)·14 stars 2 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 generation (SSG), islands architecture, content collections, or deploying an Astro project. - 1 file - 4 KB - MIT - Updated 7 months ago - [GitHub](https://github.com/astrolicious/agent-skills/blob/cb4839f3794189ebf35c55d3ba5d3876dff7acf0/skills/astro/SKILL.md "View SKILL.md on GitHub") - [No alerts](#third-party-checks "Third-party checks: No alerts · 5 checks · Risk SAFE") ## SKILL.md 4 KB **≈100** tokens always: the name and description. **≈911** when used: this file. ## 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` ``` 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: ``` --- // src/pages/index.astro const title = 'Hello, Astro!'; --- {title}

{title}

``` #### Creating a Component ``` --- // src/components/Card.astro const { title, body } = Astro.props; ---

{title}

{body}

``` #### 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.build/en/reference/configuration-reference/) - [llms.txt](https://docs.astro.build/llms.txt) - [GitHub](https://github.com/withastro/astro) Source: [SKILL.md on GitHub](https://github.com/astrolicious/agent-skills/blob/cb4839f3794189ebf35c55d3ba5d3876dff7acf0/skills/astro/SKILL.md) ## Third-party checks
No alerts16d5 checks · Risk SAFE - Gen Agent Trust Hub16d The skill provides standard documentation and instructions for working with the Astro web framework. All links and commands point to official Astro resources and well-known deployment platforms. - Socket16d No alerts - Snyk16d Risk: LOW · No issues - Runlayer7mo 1 file scanned · No issues - ZeroLeaks5mo Score: 93/100 · 2 sections analyzed
## Provenance [Signed by skilld at cb4839f.](https://github.com/astrolicious/agent-skills/commit/cb4839f3794189ebf35c55d3ba5d3876dff7acf0 "cb4839f3794189ebf35c55d3ba5d3876dff7acf0") This ties the file your Agent reads to that commit on GitHub. It does not review the instructions. Last checked against GitHub 2 months ago. Dormantupdated 7 months ago ## Capability
metadata
``` { "authors": "Astro Team", "version": "0.0.1" } ```
## Topics - [TypeScript](https://skilld.dev/skills/tag/typescript "Type-heavy workflows, generics, type audits") - astro - static-site-generation - ssg - web-framework - components - content-collections - islands-architecture - ssr - adapters ## README badge ![README badge for astrolicious/agent-skills](https://skilld.dev/b/astrolicious/agent-skills?theme=light&label=0) ## What it does Provides instructions for building with Astro, including creating components and pages, configuring SSR adapters, setting up content collections, and managing project structure. Covers the Astro CLI, file organization conventions, deployment to Node.js, Cloudflare, Netlify, and Vercel, and core configuration options like the \`site\` URL. Generated from the current SKILL.md. ## Frequently asked
Does this skill support SSR (server-side rendering)? Yes. You can enable on-demand rendering by adding an adapter (Node.js, Cloudflare, Netlify, or Vercel) using \`npx astro add\`.
What adapters are supported? The skill covers Node.js, Cloudflare, Netlify, and Vercel adapters. Community adapters are also available via the Astro integrations registry.
Do I need to run any commands after adding integrations? Yes. Run \`npx astro sync\` after adding or changing plugins to generate TypeScript types for all Astro modules.
What is the required project structure? The \`src/pages/\` directory is required and defines all routes. \`src/components/\` and \`src/layouts/\` are conventions but not mandatory. Assets go in \`public/\`.
Does this skill include content collections setup? The skill mentions content collections as a capability but does not provide detailed configuration examples; refer to docs.astro.build for implementation.
Generated from the current SKILL.md. These answers refresh after source changes. ## Related skills - - - - - -