Astro

Name: Astro
Author: astrolicious

astrolicious/agent-skills

12k installs
12 repo stars
Updated March 20, 2026
astrolicious/agent-skills

Astro is a web framework for building content-driven websites with file-based routing, server-side rendering, and static site generation.

About

Astro is a web framework for content-driven websites that generates static HTML or server-rendered output. Developers use it to create `.astro` components and pages in `src/pages/`, configure adapters for deployment (Node, Vercel, Netlify, Cloudflare), and manage project structure. Key workflows include building pages via file-based routing, creating reusable components, running `npx astro dev` for local development, and deploying via adapters. Content collections, islands architecture, and SSG support enable efficient site generation with minimal JavaScript.

File-based routing: pages in `src/pages/` automatically become routes
CLI commands: dev, build, check, add (integrations), sync (TypeScript generation)
Adapters for deployment: Node, Vercel, Netlify, Cloudflare, and community options
Component-based architecture with `.astro` files supporting HTML, CSS, and JavaScript
Project structure conventions: `src/components`, `src/layouts`, `src/styles`, `public/` assets

Astro by the numbers

12,011 all-time installs (skills.sh)
+396 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #46 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Aug 5, 2026 (Skillselion catalog sync)

At a glance

astro capabilities & compatibility

Capabilities: create and manage astro pages and components · configure ssr adapters for various platforms · run development server with hot reload · build static or server rendered output · generate typescript types for astro modules · manage project structure and conventions
Works with: vercel · cloudflare
Use cases: web design · frontend · api development
Platforms: macOS · Windows · Linux · WSL
Pricing: Free

From the docs

What astro says it does

Astro is the web framework for content-driven websites.

skill:astrolicious/agent-skills#astro SKILL.md

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.

skill:astrolicious/agent-skills#astro SKILL.md description

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/astrolicious/agent-skills/astro.svg)](https://skillselion.com/skills/astrolicious/agent-skills/astro)

Installs	12k
repo stars	★ 12
Security audit	3 / 3 scanners passed
Last updated	March 20, 2026
Repository	astrolicious/agent-skills ↗

What it does

Build and deploy static or server-rendered websites using Astro components, content collections, and adapters.

Who is it for?

Static sites, content-heavy websites, blogs, documentation, e-commerce, multi-page applications with server-rendering needs.

Skip if: Real-time applications, WebSocket-heavy systems, applications requiring constant server polling.

When should I use this skill?

User mentions Astro, `.astro` files, static site generation (SSG), islands architecture, content collections, or needs to deploy a web project.

What you get

Developers create and deploy Astro projects with pages, components, adapters, and TypeScript type safety.

Astro project with pages and components
configured adapter for deployment
built `dist/` directory ready for hosting

By the numbers

5 core CLI commands documented: dev, build, check, add, sync
4 official adapters provided: Node, Vercel, Netlify, Cloudflare
Recommended project structure includes src/pages (required), src/components, src/layouts, src/styles, public/

Files

SKILL.mdMarkdownGitHub ↗

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 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

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.

---