Astro Website — Design skill for Claude Code
Create static website with Astro v5+, React, Tailwind CSS, TypeScript, with accessibility and SEO best practices.
How to install Astro Website
Installs to ~/.claude/commands/ondata-ckan-mcp-server-astro_website.md
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/ondata/ckan-mcp-server/HEAD/.claude/commands/astro_website.md -o ~/.claude/commands/ondata-ckan-mcp-server-astro_website.md Restart Claude Code, or start a new session, for it to be picked up.
What Astro Website does
name: create-astro-website description: Create static website with Astro v5+, React, Tailwind CSS, TypeScript, with accessibility and SEO best practices
Create Astro Website
Create production-ready static website with modern stack and best practices.
Stack
- Astro v5+ (
output: 'static') - React for interactive components
- Tailwind CSS + typography plugin
- TypeScript strict mode
- SEO: RSS feed, sitemap, Open Graph, favicon set
- Accessibility: ARIA la
Alternatives in Design
- Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
- Tokenicode — A Claude Code GUI — Tauri 2 + React 19 + TypeScript + Tailwind CSS 4 436 ★
- Module CSS — Compile module CSS assets or fix Tailwind prefix issues 407 ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Design Framework
Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCS
3D Collectible Hero
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using lucide-react for
3D Jack Portfolio
Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, and
Coding Conventions
Enforces client coding conventions. Use when writing, reviewing, or modifying React/TypeScript code in the cli
Interactive Product Demo
Claude Code skill that builds animated landing-page product demos from live DOM/CSS instead of video or GIF —
Quest Master
A fully-featured game progression system built with Next.js, TypeScript, Tailwind CSS, and Framer Motion. This
Related Agents
Canva React Converter
Specialized agent for autonomous Canva-to-React component conversion. Uses Canva screenshots and locked design
Pixel
Frontend specialist. Invoke for any UI work: React components, TypeScript, CSS/Tailwind, Next.js, Vite, routin
Pelle
Pelle — senior frontend-utvecklare. React/Next.js, komponentarkitektur, Tailwind CSS, Zod. TypeScript alltid,