Agent skill

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.

View SKILL.md on GitHub Repository
Stars 138
Forks 9

Install this agent skill to your Project

npx add-skill https://github.com/devantler-tech/ksail/tree/main/.agents/skills/astro

Metadata

Additional technical details for this skill

authors
Astro Team
version
0.0.1

SKILL.md

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

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:

astro
---
// src/pages/index.astro
const title = 'Hello, Astro!';
---
<html>
  <head><title>{title}</title></head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

Creating a Component

astro
---
// 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.

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

Other Community adapters

Resources

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

devantler-tech/ksail

gh-cli

GitHub CLI (gh) comprehensive reference for repositories, issues, pull requests, Actions, projects, releases, gists, codespaces, organizations, extensions, and all GitHub operations from the command line.

138 9
Explore
devantler-tech/ksail

git-commit

Execute git commit with conventional commit message analysis, intelligent staging, and message generation. Use when user asks to commit changes, create a git commit, or mentions "/commit". Supports: (1) Auto-detecting type and scope from changes, (2) Generating conventional commit messages from diff, (3) Interactive commit with optional type/scope/description overrides, (4) Intelligent file staging for logical grouping

138 9
Explore
devantler-tech/ksail

copilot-sdk

Build agentic applications with GitHub Copilot SDK. Use when embedding AI agents in apps, creating custom tools, implementing streaming responses, managing sessions, connecting to MCP servers, or creating custom agents. Triggers on Copilot SDK, GitHub SDK, agentic app, embed Copilot, programmable agent, MCP server, custom agent.

138 9
Explore
devantler-tech/ksail

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

138 9
Explore
devantler-tech/ksail

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

138 9
Explore
devantler-tech/ksail

refactor

Surgical code refactoring to improve maintainability without changing behavior. Covers extracting functions, renaming variables, breaking down god functions, improving type safety, eliminating code smells, and applying design patterns. Less drastic than repo-rebuilder; use for gradual improvements.

138 9
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results