skill CX Codex

astro · mindrally — Claude Code skill: Astro framework conventions

Q: How do I install the astro skill in Claude?

Run `npx skills add Mindrally/skills --skill astro -a claude-code`. The file lands at `~/.claude/skills/astro/SKILL.md`.

Q: What does the astro skill do?

It gives the agent Astro conventions: project structure, `.astro` components, file-based routing, `client:*` directives, Markdown and MDX handling, styling and accessibility.

A skill that tells the agent how to build Astro sites: static generation, partial hydration, file-based routing and as little client-side JavaScript as possible.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add Mindrally/skills --skill astro -a claude-code

Open on GitHub

What astro does

This skill turns the assistant into an Astro specialist. It lays out the project structure with src/components, src/layouts, src/pages, src/styles and astro.config.mjs, and asks for components in .astro files, with React, Vue or Svelte pulled in only when a framework is actually needed.

Routing rules are covered too: file-based routing under src/pages/, dynamic routes as [...slug].astro, static page generation with getStaticPaths(), and a 404.astro for errors. Separate sections handle the client:load, client:idle and client:visible directives, Markdown and MDX content, content collections, scoped <style> tags, and Tailwind through @astrojs/tailwind.

There is a section on SEO and accessibility: metadata in <head>, canonical URLs, semantic HTML, ARIA attributes and keyboard navigation. Performance advice ties back to Core Web Vitals (LCP, FID, CLS), with Lighthouse and WebPageTest as the check. Nothing beyond the instruction file gets installed, and the skill assumes a project that already runs Astro with TypeScript — drop it into an empty folder and the getStaticPaths() and content collection examples have nothing to attach to.

What it helps with

Lay out pages and components along Astro's file-based routing
Pick the right hydration directive for an interactive block
Generate static routes with getStaticPaths()
Wire up Markdown and MDX through content collections
Trim client-side JavaScript without losing interactivity

Example prompts for the agent

Create an Astro blog page with a dynamic [...slug].astro route and getStaticPaths()
Rewrite this React widget as an Astro component and hydrate it with client:visible
Set up a content collection for MDX posts and list them on the home page

How to install astro

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill astro -a claude-code

2Manually: put the files in place

~/.claude/skills/astro/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/astro/

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill astro -a codex

2Manually: put the files in place

.agents/skills/astro/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill astro -a cursor

2Manually: put the files in place

.cursor/skills/astro/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install Mindrally/skills astro

2Manually: put the files in place

.github/skills/astro/SKILL.md

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill astro -a gemini-cli

2Platform CLI

gemini skills install https://github.com/Mindrally/skills --path astro

Manually: put the files in place

.devin/skills/astro/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add Mindrally/skills --skill astro -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about astro

How do I install the astro skill in Claude?

Run npx skills add Mindrally/skills --skill astro -a claude-code. The file lands at ~/.claude/skills/astro/SKILL.md.

What does the astro skill do?

It gives the agent Astro conventions: project structure, .astro components, file-based routing, client:* directives, Markdown and MDX handling, styling and accessibility.

Does the astro skill need anything else?

The skill is just an instruction file. It leans on a project that already uses Astro and TypeScript, so the getStaticPaths() and content collection examples only make sense in an existing setup.

Source text

SKILL.md · Apache-2.0

---
name: astro
description: Expert in Astro framework with static generation and partial hydration patterns
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# 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

Similar skills

Everything for Frontend and UI →

astro by other authors comes first.

astro astrolicious A skill that teaches your agent the Astro web framework: pages, components, SSR adapters, content collections and deployment. Useful once a project is on Astro. CX Codex +1 18,200installs rspress-best-practices rstackjs A skill that gives the agent rules for Rspress v2 sites: config, navigation, MDX, assets, search and deployment. Useful once the docs exist and the agent edits them. CX Codex +1 538installs clerk-astro-patterns clerk Walks your agent through Clerk inside Astro: middleware, protected SSR pages, API route auth and island components. CX Codex +1 14,300installs astro-framework delineas A skill that turns your coding agent into a senior Astro engineer. Useful once a content site needs islands, server rendering or the Content Layer API. CX Codex +1 2,200installs angular-best-practices Boise-State-Development Keeps your agent inside Angular 21 conventions: signals, standalone components, reactive forms. Useful when it keeps reaching for outdated syntax. CX Codex +1 756installs setting-up-astro-project astronomer A skill that walks the agent through creating an Airflow project with the Astro CLI: folder layout, dependencies, connections and variables. CX Codex +1 1,100installs managing-astro-deployments astronomer A skill that walks your agent through Astro CLI: log in, switch workspaces, create deployments and ship code to production. CX Codex +1 567installs

From the same set214

wordpress The wordpress skill gives an agent a rulebook for WordPress and WooCommerce work in PHP. It keeps code inside WordPress standards and reminds the agent about hooks, nonces and prepared queries. CX Codex +1 894installs mongodb-development MongoDB development rules: schemas, indexes, aggregation pipelines, Mongoose and Payload CMS. Useful when the agent writes a TypeScript backend. CX Codex +1 891installs pandas-best-practices Guides the AI assistant to write idiomatic Pandas code using vectorization, method chaining, and proper data types. Useful for data analysis and refactoring slow DataFrame transformations. CX Codex +1 886installs scikit-learn-best-practices A skill that hands your agent scikit-learn conventions: pipelines, cross-validation, metrics, model persistence. Useful when you write ML code in Python. CX Codex +1 888installs beautifulsoup-parsing Teaches AI agents to parse HTML and XML with BeautifulSoup in Python. Helps write cleaner scrapers with safe data extraction and DOM navigation. CX Codex +1 877installs bash-scripting This skill gives the agent rules for writing Bash scripts: input validation, error handling, portability. Useful when the agent writes deploy, backup or cron tasks. CX Codex +1 875installs swr SWR data-fetching guidelines for React and TypeScript apps. It guides agents on caching, request deduplication, and optimistic mutations. CX Codex +1 870installs game-development Provides guidelines and architecture patterns for C# game development in Unity and Lua scripting. Helps agents optimize memory, physics, and component code. CX Codex +1 867installs