astro

Name: astro
Author: mindrally

Expert in Astro framework with static generation and partial hydration patterns

INSTALLATION

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

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

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