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.
• ⚡ MVP Track — Launch a minimum viable product with essential features and performance.
• ✨ Showcase Track — Build a portfolio-worthy project with all bells and whistles.

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 example landing page at /examples/landing.

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. Choose your implementation track based on your needs

Get Started with Agentic AI

Implementation Phases 0-4 are completed in this template. Run pnpm dev and point your IDE agent at the Phase 5 docs 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 v5.11.0 with Vite v6.x bundler
• Styling: Tailwind CSS v3.4.4 + Design tokens system
• Structured Interactivity: Preact v10.26.9 — Performant interactive islands
• Code Quality: Biome v2.0.6 (20x faster than ESLint + Prettier)
• TypeScript: v5.8.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 v9.x (required for performance)
• Comprehensive Testing: Playwright v1.53.1 for E2E tests + Vitest for fast unit tests
• Performance Automation: Sharp v0.33.x image optimization + Lighthouse CI

View full tech stack details

Core Dependencies

• UI Framework: Preact v10.26.9 for interactive islands
• Content: MDX with Astro Content Collections API
• Images: Astro Image component with Sharp processing (AVIF + WebP)
• Fonts: @fontsource for self-hosting variable fonts

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
• Track Comparison - MVP vs Showcase decision guide

Implementation Paths

• Implementation Guides - 12-phase walkthrough (start at Phase 4)
• MVP Track Guide - 2-3 week implementation
• Showcase Track Guide - 4-6 week full-featured build

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 (Cascade, Copilot, ChatGPT) at the Phase 4 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)

Compare Tracks

FAQ

Star on GitHub

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

Built with ❤️ by the Astro community

Contribute • Report Issues • Join Discord