Astro Performance Starter

⚡ Why This Template?

🚀 Performance-First Architecture 95+
Zero-JS baseline and top-tier web vitals enforced by strict quality gates and CI/CD

📖 12-Phase Documentation Optimized for Agentic AI 12 Phases
Implementation guides, ADRs, prompt libraries for rich, coherent AI context

🎨 Token-Driven Design System Design Tokens
Full dark mode support and WCAG AA accessibility built into the CI pipeline

⭐ Automated & Opinionated Toolchain AI Ready
Biome for 20x faster linting, Husky pre-commit hooks, and automated versioning

🎯 Quick Start Paths

Choose your adventure based on your timeline and goals:

• 🚀 Launch Demo — See the template in action locally in 5 minutes (start here!).
• 📦 Quick Deploy — Personalize and deploy to production in under an hour.
• 🧭 Implementation Guides — Work through the Foundation, Build and Polish tiers; each phase labels its steps Essential, Recommended or Advanced so you stop where your project needs to.

Template Reference

These docs live separately from the starter’s production build. Your cloned project already shows a clean homepage at /. Treat this documentation as reference material and AI context—no changes needed here.

Live Demo

Preview the component showcase on the live demo site.

New to this template?

Start here:

1. Try the Launch Demo to see it in action (5 minutes)
2. Deploy with Quick Deploy to go live (45-75 minutes)
3. Read the FAQ for common questions
4. Pick your scope in the implementation guides: Essential, Recommended or Advanced

Get Started with Agentic AI

Implementation Phases 0-4 (the Foundation tier) are completed in this template. Run pnpm dev and point your IDE agent at the Phase 5 guide to begin.

📊 TargetPerformance Metrics

Metric	Target	Description
🚀 Performance	95+ (Excellent)	Lighthouse score out of the box
♿ Accessibility	100 (Perfect)	WCAG AA compliance, automated testing
🛡️ Best Practices	100 (Perfect)	Secure, modern web standards enforced
🔍 SEO	100 (Perfect)	Optimized for search engine discoverability

Scores reflect ideal conditions (empty starter). Real-world results may vary by deployment and content. See changelog →

🛠️ Tech Stack Highlights

Modern tools with excellent developer experience:

• Framework: Astro v7.4.1 with Vite v8.2.0 bundler
• Styling: Tailwind CSS v4.3.3 + Design tokens system
• Structured Interactivity: Preact v10.29.8 — Performant interactive islands
• Code Quality: Biome v2.5.15 (20x faster than ESLint + Prettier)
• TypeScript: v5.9.3 in strict mode with path aliases
• Content Collections & Type-Safety: Astro Content Collections with Zod schemas
• Commit Message Linting: Commitlint is integrated with Husky for semantic versioning
• Link Validation: Automated checking for all internal links (+docs) via custom Remark plugin.
• Package Manager: pnpm v11.27.1 (required for performance)
• Comprehensive Testing: Playwright v1.64.1 for E2E tests + Vitest for fast unit tests
• Performance Automation: Sharp v0.35.5 image optimization + Lighthouse CI

View full tech stack details

Core Dependencies

• UI Framework: Preact v10.29.8 for interactive islands
• Content: MDX with Astro Content Collections API
• Images: Astro Image component with Sharp processing (single-format output, AVIF by default)
• Fonts: Astro Fonts API with self-hosted variable fonts (vendored woff2, metric-adjusted fallbacks)

Development Experience

• Zero-config TypeScript with strict mode
• Automated code formatting and linting
• Git hooks for quality enforcement
• Hot reloading with Vite
• Component-driven development

Performance & Quality

• Performance budgets with CI enforcement
• Automated accessibility testing with axe-core
• Comprehensive broken link detection (docs and pages)
• Design token compilation system
• Bundle size monitoring

📚 Documentation Guide

Navigate the docs efficiently:

Quick Reference

• FAQ - Common questions and troubleshooting
• Launch Demo - 5-minute local setup guide
• Quick Deploy - 45-minute deployment guide
• Onboarding - Setup, concepts and conventions for new developers

Implementation Paths

• Implementation Guides - 13-phase walkthrough in three tiers; phases 0-4 ship done, start at Phase 5
• Budgets & Guardrails - The quality gates every phase is held to

Deep Dive Resources

• Design System - Tokens, patterns, and accessibility
• Architecture Decisions - Technical decision log and templates
• AI Context - Using AI agents with this template
• Contributing - Development workflow and guidelines

🧩 Key Features

Zero-Config TypeScript

Strict mode setup with proper type definitions and path aliases configured out of the box.

Performance Budgets

CI/CD performance monitoring with automated Lighthouse testing to maintain perfect scores.

Accessibility Testing

WCAG AA compliance with automated testing using axe-core and Playwright.

Design Token System

Comprehensive token system with dark mode support and automatic CSS generation.

🤖 AI-Accelerated Development

Get started instantly with AI assistance:

Point your favorite AI agent (Claude Code, Copilot, ChatGPT) at the Phase 5 Implementation Guide to start customizing immediately. Our documentation is structured for optimal AI context.

AI Context Available

Check the AI Context section for prompt templates and context management strategies designed for this template.

🚀 Ready to Build?

Launch Demo (5 min)

Implementation Guides

FAQ

Star on GitHub

Project Status: This template is currently in beta (v0.9.0). Expect rapid iteration and breaking changes until v1.0.0. See what’s new →

Built with ❤️ by Clownware

Contribute • Report Issues • Join Discord