# astro

This skill guides Astro projects with Markdown or MDX content and selectively hydrated interactive components. Use it for blogs, documentation, and portfolio sites.

- skill · `type=skill` · Claude Code · 157 installs
- Author: suhaibjanjua
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/astro
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/astro

## What it does

The skill covers Astro pages and file-based routes, `.astro` components, content collections, and reusable layouts. It also explains static output and SSR for dynamic routes. UI framework components render as static HTML by default, so the browser receives no JavaScript for them unless you opt into hydration.

Use `client:` directives to choose when an interactive component hydrates, such as on page load or when it enters the viewport. The examples combine React and Svelte components in one project. The SSR setup shown uses a Vercel adapter; that adapter is part of the described configuration, so account for it when following that route.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill web-development/astro
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill astro -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/astro/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/astro/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/astro/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/astro/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates astro
```

2. **Manually: put the files in place**
- File: `.github/skills/astro/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/astro
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/astro/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/astro

## When to use it
- build pages with Astro file-based routing
- organize Markdown or MDX content into collections
- define a typed schema for blog entries
- choose when an interactive component hydrates
- configure dynamic routes for SSR

## Example prompts
- Create an Astro blog with file-based routes and Markdown posts.
- Set up a content collection for posts in `src/content/config.ts`.
- Add a React component and hydrate it when it enters the viewport.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [astro · astrolicious](https://affpapa.org/en/nevibecode/skills/astrolicious-astro.md) — 18200 installs
- [astro · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-astro.md) — 886 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md