Astro

# MISSION: Scaffold "Astro" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Astro**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Astro
- **What It Does**: Astro is an open-source web framework for building content-driven websites with an islands architecture: pages render to static HTML by default, and interactive UI components from any supported framework hydrate individually only where needed.
- **Domain & Category**: Island Architecture Web Framework
- **Production Scale**: 1M+ MAU
- **Development Mode**: HYBRID
- **Architectural Rationale**: Vite as a first-class dependency and per-framework, per-host integration packages let Astro ship a fast static-first build while opting into server rendering or client hydration only where a project actually needs it.
- **Live Website Reference**: https://astro.build
- **Source Repository**: https://github.com/withastro/astro
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Astro, TypeScript, Vite, Node.js, pnpm, Turborepo, Vitest, Zod
- **Primary Language(s)**: TypeScript, Astro, JavaScript
- **License of the reference repo**: NOASSERTION
- **Frontend**: Astro — The framework itself: compiles .astro components and ships an islands-architecture runtime with per-component hydration.; Vite — Astro's dev server and production bundler; packages/astro depends on Vite 8 directly, not through a plugin.; Shiki — Powers the built-in syntax highlighter used by Markdown/MDX code blocks.; Sharp — Optional dependency used by Astro's built-in image optimization service.
- **Backend & APIs**: Zod — Validates Astro config and content-collection frontmatter schemas.; esbuild — Used internally by Astro's core for fast TypeScript/JS transforms.
- **Infrastructure & deploy**: Cloudflare Workers — @astrojs/cloudflare adapter deploys Astro SSR output to Cloudflare Workers via the official Vite plugin and Wrangler.; Docker — Provides a devcontainer/example Dockerfile for containerized Astro builds.
- **Tooling, testing & ops**: pnpm — Workspace package manager for the whole monorepo (pnpm@11.27.0, four workspace globs).; Turborepo — Orchestrates build/dev/test/lint task graphs across every package and example in the monorepo.; Vitest — Unit, integration and e2e-adjacent test runner for astro, create-astro and the integrations.; Biome — Formats code and lints/sorts imports repo-wide, paired with ESLint for deeper rules.; Playwright — End-to-end browser tests for packages/astro (test:e2e:chrome/firefox scripts).; GitHub Actions — CI, format, continuous-benchmark, release (Changesets), and example-sync workflows.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/withastro/astro @ 1aa7ae5)
1. **The framework is a pnpm + Turborepo monorepo of many small packages**: The root package.json declares workspaces for packages/markdown/*, packages/integrations/*, packages/*, and packages/language-tools/*, and turbo.json defines the task graph (build, dev, test) that Turborepo runs across all of them. The astro package (the compiler/runtime) and create-astro (the scaffolding CLI) are separate publishable packages from every framework integration.
2. **Vite is a direct dependency of the core, not an optional plugin host**: packages/astro/package.json lists "vite": "^8.0.13" as a normal dependency alongside esbuild and vitefu, so every Astro project gets a Vite dev server and Rollup-based production build without any extra configuration; integrations and adapters plug into Vite through Astro rather than the other way around.
3. **Each hosting target and UI framework ships as its own scoped package**: packages/integrations holds one package per adapter or framework (for example @astrojs/cloudflare for Cloudflare Workers, seen in packages/integrations/cloudflare/package.json), so a project only installs the runtime code for the platform and UI frameworks it actually uses instead of bundling every possible target.
4. **Content schemas are validated with Zod, not a custom validator**: packages/astro/package.json depends on "zod": "^4.5.4" directly, which backs the content collections API (defineCollection/z schema helpers) so authors get typed, validated frontmatter without Astro maintaining its own schema language.
5. **create-astro is a thin, separately versioned scaffolding tool**: packages/create-astro/package.json depends on @astrojs/cli-kit for the interactive prompts and @bluwy/giget-core to fetch example templates from GitHub, keeping the "npm create astro@latest" CLI decoupled from the astro package itself so it can evolve on its own release cadence.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Leverage Astro's Island Architecture: keep pages static (.astro) by default for zero-JS baseline and instant Google search indexing. Hydrate interactive React components with 'client:load' or 'client:visible' only where needed for user state.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer: client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.