ASTRODECK – The starter kit for AI-assisted websites. Build company sites, blogs, and portfolios with your coding agent.
More than a template – AstroDeck is a complete foundation for building websites with AI assistance: 16 sections, 11 components, and 11 page templates, plus the operating layer your coding agent needs — AGENTS.md conventions, a dedicated Claude Code agent, and guardrails that keep AI edits on the design system.
About AstroDeck
AstroDeck is not just another website template – it's a production-ready starter kit and component library designed for building Astro.js websites with AI assistance. While traditional templates offer a fixed design, AstroDeck provides the building blocks and AI agents to create entirely custom websites from scratch.
At its core, AstroDeck follows a three-tier architecture: Components (small UI primitives like buttons and dialogs), Sections (full page blocks like pricing tables and FAQs), and Pages (complete templates assembled from sections). This modular approach lets you mix and match at any level of abstraction.
What makes AstroDeck unique is its AI-first development approach. The AGENTS.md standard – used by 60,000+ open-source projects – ensures any AI coding assistant understands the codebase immediately, and the rules are enforced, not just written down: a convention guard hook blocks off-system edits before they land, and one command checks every design convention. Claude Code gets the deepest integration with a dedicated project agent, seven domain skills, and a multi-agent review workflow.
Features
- Astro 6.x with zero-JS by default for optimal performance
- Tailwind CSS 4 with OKLCH color tokens and full dark mode
- shadcn/ui + Radix UI components (11 interactive components)
- 16 pre-built page sections (Hero, Pricing, FAQ, Testimonials, etc.)
- 11 ready-to-use page templates (SaaS, Portfolio, Blog, Auth, etc.)
- Works with any AGENTS.md-compatible AI tool: Claude Code, Cursor, Copilot, Codex, Windsurf & more
- AI guardrails: convention guard hook blocks off-system edits before they land
- One-command quality checks (npm run check:kpis) for colors, alt texts, meta tags & more
- Deepest Claude Code integration: dedicated agent, 7 domain skills, multi-agent review
- Three-tier architecture: Components → Sections → Pages
- TypeScript throughout with full type safety
- SEO optimized with OpenGraph, Twitter Cards, sitemap, and RSS
- CSS-only scroll animations via data-animate attributes
- Component registry (registry.json) for tooling integration
- MIT licensed – free for commercial and personal use
License
This project is licensed under the MIT License. You are free to use, modify, and distribute it for personal and commercial projects.
