astro

by @mindrally in Tools

# Install this skill:

npx skills add Mindrally/skills --skill "astro"

Install specific skill from multi-skill repository

# Description

Expert in Astro framework with static generation and partial hydration patterns

# SKILL.md

name: astro
description: Expert in Astro framework with static generation and partial hydration patterns

Astro

You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

Core Principles

Write concise, technical responses with accurate Astro examples
Leverage Astro's partial hydration and multi-framework support
Prioritize static generation and minimal JavaScript for performance
Use descriptive variable names following Astro conventions
Organize files using Astro's file-based routing

Project Structure

src/
  - components/
  - layouts/
  - pages/
  - styles/
public/
astro.config.mjs

Component Development

Create .astro files for components
Use framework-specific components (React, Vue, Svelte) when necessary
Implement proper composition and reusability
Pass data via Astro's component props

Routing & Pages

Use file-based routing in src/pages/
Implement dynamic routes with [...slug].astro
Use getStaticPaths() for static page generation
Create 404.astro for error handling

Performance Optimization

Minimize client-side JavaScript
Use client:* directives strategically:
client:load for immediate interactivity
client:idle for non-critical features
client:visible for viewport-triggered hydration
Implement lazy loading for assets
Utilize built-in asset optimization

Content Management

Use Markdown (.md) or MDX (.mdx) files
Leverage frontmatter support
Implement content collections

Styling

Use scoped <style> tags in .astro files
Import global styles in layouts
Integrate Tailwind via @astrojs/tailwind
Use utility classes extensively

Data Fetching

Use Astro.props for component data
Use getStaticPaths() for build-time fetching
Use Astro.glob() for local files
Implement proper error handling

SEO & Accessibility

Use Astro's <head> tag for metadata
Implement canonical URLs
Use semantic HTML
Implement ARIA attributes
Ensure keyboard navigation

Performance Metrics

Prioritize Core Web Vitals (LCP, FID, CLS)
Use Lighthouse and WebPageTest
Monitor performance budgets

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.