Skip to main content
affpapa.org
RU EN
skill

astro · davila7 — Claude Code skill: features and installation

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

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill web-development/astro
Open on GitHub

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

What it helps with

  • 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 for the agent

  • 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.

How to install astro

1claude-code-templates

npx claude-code-templates@latest --skill web-development/astro

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill astro -a claude-code

3Manually: put the files in place

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

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

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

Questions about astro

How do I install astro in Claude Code?

Run npx claude-code-templates@latest --skill web-development/astro.

What does the astro skill do?

It guides Astro site work, including pages, routes, Markdown and MDX content, and interactive components with selective hydration.

How does Astro handle JavaScript for interactive components?

UI components produce static HTML by default. A client: directive specifies when a component should hydrate, such as on page load or when it becomes visible.

Similar skills

All skills 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 astro Mindrally 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. CX Codex +1 886installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
aws-serverless This skill provides patterns for AWS Lambda apps, including API Gateway, DynamoDB, and SQS event processing. Use it when shaping serverless handlers and SAM deployment templates. 163installs change-logger This hook writes each file mutation to a CSV: timestamp, tool, path, action and details. Handy when you are prepping a demo and need to show what the agent touched. 163installs git-bisect-helper Runs a git bisect session and marks commits good or bad from your test's exit code. Useful when you know something broke but not where. 163installs pac-update-status Moves a Product as Code ticket to a new status, reassigns it, or logs a progress note. Handy when your tickets live in .pac/ and you want to manage them without leaving the terminal. 160installs cloud-architect A Claude skill for designing infrastructure across AWS, Azure and GCP, with Terraform, CDK, cost work and security controls. 157installs behavioral-modes Gives the agent a set of operating modes, from brainstorming to shipping. Useful when replies should match the kind of task at hand. 157installs peer-review Review scientific manuscripts and grant proposals with checks for methods, statistics, reproducibility, ethics, and reporting. Use it to structure a critical review across research fields. 154installs data-engineer This skill helps plan data pipelines, warehouses, and streaming systems. Use it when a project needs ingestion, orchestration, or data quality checks. 152installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor