PaperclipOrg
Claude Agent Skill · by Astrolicious

Astro

Covers the essentials for building with Astro's islands architecture and static site generation. Handles component creation, page routing, content collections s

Install
Terminal · npx
$npx skills add https://github.com/astrolicious/agent-skills --skill astro
Works with Paperclip

How Astro fits into a Paperclip company.

Astro drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md140 lines
Expand
---name: astrodescription: 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.license: MITmetadata:   authors: "Astro Team"  version: "0.0.1"--- # 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 LocationCLI 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` ```tsimport { 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.astroconst title = 'Hello, Astro!';---<html>  <head><title>{title}</title></head>  <body>    <h1>{title}</h1>  </body></html>``` ### Creating a Component ```astro---// src/components/Card.astroconst { 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.build/en/reference/configuration-reference/)- [llms.txt](https://docs.astro.build/llms.txt)- [GitHub](https://github.com/withastro/astro)