Official guidance for working with the Astro framework, including configuration and deployment commands.
Install
mkdir -p .claude/skills/astro-lejito && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12326" && unzip -o skill.zip -d .claude/skills/astro-lejito && rm skill.zipInstalls to .claude/skills/astro-lejito
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Create basic Astro pages and components
- →Configure Astro projects using astro.config.ts
- →Deploy Astro sites with various adapters
- →Manage content collections and project structure
- →Run Astro CLI commands like dev, build, check, add, sync
- →Generate TypeScript types for Astro modules
How it works
The skill assists in Astro development by providing guidance on CLI commands, project structure, configuration options, and deployment workflows, enabling the creation and management of Astro projects.
Inputs & outputs
When to use astro
- →Building static sites
- →Creating Astro components
- →Configuring SSR
- →Setting up content collections
About this skill
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
When not to use it
- →When working with frameworks other than Astro
- →When the user is not building content-driven websites
- →When the user needs to work with older Astro versions
Limitations
- →Always consults docs.astro.build for code examples and latest API
- →Requires Astro CLI to be installed
- →Focuses on content-driven websites
How it compares
This skill centralizes Astro-specific commands and configurations, making it more efficient to develop and deploy Astro projects than manually consulting documentation for each step.
Compared to similar skills
astro side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| astro (this skill) | 0 | 2mo | No flags | Beginner |
| pwa-development | 9 | 4mo | Caution | Intermediate |
| web-development | 5 | 2mo | No flags | Intermediate |
| stac-quickstart | 1 | 6mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
pwa-development
alinaqi
Progressive Web Apps - service workers, caching strategies, offline, Workbox
web-development
TencentCloudBase
Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
stac-quickstart
StacDev
Help initialize and validate a Stac-enabled Flutter project and ship a first server-driven screen. Use when users ask to set up Stac CLI, run stac init/build/deploy, verify project prerequisites, or troubleshoot first-run setup and missing configuration files.
hula-skill
HuLaSpark
HuLa project skill for frontend (Vue 3 + Vite + UnoCSS + Naive UI/Vant), backend (Tauri v2 + Rust + SeaORM/SQLite), full-stack flows, and build/release work. Use when the user mentions hula or HuLa or requests changes in this repository; after triggering, ask which scope (frontend/backend/fullstack/build-release) to enable.
add-cdn-bundle
getsentry
Create a new CDN bundle for the browser package with specified features
full-stack-orchestration-full-stack-feature
sickn33
Use when working with full stack orchestration full stack feature