Skill

Pass

Audit score 90

astro

astrolicious/agent-skills

Build fast, content-driven websites with Astro's islands architecture and static site generation.

What is astro?

Astro is a web framework for creating content-driven websites with static site generation (SSG), partial hydration via islands architecture, and optional server-side rendering. Use this skill when working with .astro files, setting up content collections, configuring deployment adapters, or managing Astro project structure and CLI commands.

Create and manage .astro components and pages with file-based routing
Configure SSR adapters (Node.js, Vercel, Netlify, Cloudflare) for on-demand rendering
Set up and manage project structure including layouts, components, and content collections
Run development server, build static output, and check for errors with CLI commands
Generate TypeScript types and manage Astro configuration files

How to install astro

npx skills add https://github.com/astrolicious/agent-skills --skill astro

Prerequisites

Node.js installed
Basic understanding of component-based web development

Claude Code

Cursor

Windsurf

Cline

How to use astro

1.Create or navigate to your Astro project directory
2.Add pages to `src/pages/` — filenames automatically become routes
3.Create reusable components in `src/components/` and layouts in `src/layouts/`
4.Run `npx astro dev` to start the development server
5.Run `npx astro check` to validate your project for errors
6.If deploying with SSR, run `npx astro add [adapter]` (e.g., vercel, netlify, cloudflare, node)
7.Run `npx astro build` to generate the production build in `dist/`
8.Deploy the build output according to your adapter's documentation

Use cases

Good for

Building a static blog or documentation site with content collections
Converting a static site to support server-side rendering with an adapter
Creating reusable Astro components and layouts for multi-page sites
Deploying an Astro project to serverless or edge platforms
Setting up islands architecture to selectively hydrate interactive components

Who it's for

Frontend developers building content-driven websites
Teams migrating from static site generators to modern frameworks
Developers needing fast static sites with optional dynamic rendering
Content creators using file-based routing and collections

astro FAQ

When should I use an adapter vs. static site generation?

Use static site generation (default) for content-driven sites that don't need server-side rendering. Add an adapter when you need on-demand rendering, dynamic routes, or server-side functionality.

How do I configure my site URL for sitemaps and canonical URLs?

Set the `site` option in `astro.config.ts` to your final deployed URL, e.g., `site: 'https://example.com'`.

What's the difference between `src/components` and `src/layouts`?

Both are conventions (not required). Use `src/layouts` for page wrapper components and `src/components` for reusable UI components.

Do I need to manually create `astro.config.ts`?

No, but it's recommended. Astro looks for `astro.config.js`, `.mjs`, `.cjs`, or `.ts` in the project root. Use `--config` flag to specify a custom path.

What should I do after adding an integration or adapter?

Run `npx astro sync` to generate TypeScript types, then `npx astro check` to catch errors before building.

Full instructions (SKILL.md)

Source of truth, from astrolicious/agent-skills.

name: astro description: 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: MIT metadata: authors: "Astro Team" version: "0.0.1"

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 (or node, cloudflare, netlify)
Run npx astro check to catch type and configuration errors before building.
Run npx astro build to 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.