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 generation (SSG), islands architecture, content collections, or deploying an Astro project.
- Installs
- 18.3K
- Last 24h
- +97
- Trending rank
- #2031
- Security
- Pass
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/astrolicious/agent-skills --skill astro- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads astro automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
Astro Usage Guide
Always consult 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.
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!';
---
<html>
<head><title>{title}</title></head>
<body>
<h1>{title}</h1>
</body>
</html>
Creating a Component
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
Deploying with an Adapter
- Add the adapter:
npx astro add vercel --yes(ornode,cloudflare,netlify) - Run
npx astro checkto catch type and configuration errors before building. - Run
npx astro buildto produce the deployment artifact. - Verify the build output directory (e.g.
dist/) exists and is non-empty before proceeding. - 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 adapter using astro add:
npx astro add node --yes
Add Cloudflare adapter using astro add:
npx astro add cloudflare --yes
Add Netlify adapter using astro add:
npx astro add netlify --yes
Add Vercel adapter using astro add:
npx astro add vercel --yes
Resources
FAQ
What does the astro skill do?
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.
How do I install astro?
Run npx skills add https://github.com/astrolicious/agent-skills --skill astro in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/astro/ (personal) or .claude/skills/astro/ (project).
Which AI agents can use astro?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is astro safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains astro?
It is published by astrolicious in astrolicious/agent-skills. It has 18,290 recorded installs.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available