Stats
Actions
Tags
From frontend-design
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 this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-design:astroThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Always consult [docs.astro.build](https://docs.astro.build) for code examples and latest API.**
Always consult docs.astro.build for code examples and latest API.
Astro is the web framework for content-driven websites.
CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.
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.
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)| Option | Notes |
|---|---|
site | Your final, deployed URL. Used to generate sitemaps and canonical URLs. |
astro.config.tsimport { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
});
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>
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
npx astro add vercel --yes (or node, cloudflare, netlify)npx astro check to catch type and configuration errors before building.npx astro build to produce the deployment artifact.dist/) exists and is non-empty before proceeding.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
npx claudepluginhub devantler-tech/agent-pluginsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.