# MISSION: Scaffold "Stack It Fast" 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 **Stack It Fast**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Stack It Fast
- **What It Does**: Stack It Fast is a directory of real production tech stacks from verified engineers, pairing each architecture with ready-to-use AI coding agent rule files and scaffolding prompts.
- **Domain & Category**: Content Directory & Showcase
- **Production Scale**: Just Me (Solo Vibe Coder)
- **Development Mode**: HYBRID
- **Architectural Rationale**: Choose your stack based on real projects, not guesswork. Context: Launch this week as fast as possible driver. Survey verified stack.
- **Live Website Reference**: https://stackitfast.com/
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Astro (SSR & Island Architecture), TypeScript, React Islands (Interactive Widgets Hydrated on Demand), Tailwind CSS, Astro Server Endpoints, tRPC v11, Hono / Edge API, PostgreSQL (Supabase / Neon), SQL Migrations, Redis Cache, Cloudflare Pages / Workers (Global Edge CDN), Cloudflare Hyperdrive / Neon Edge, GitHub Actions Automated Pipeline, Turborepo Monorepo Architecture, Strict TypeScript (noImplicitAny, strictNullChecks), Zod Schema-First Input Verification, Playwright Automated E2E Testing
- **Frontend Layer**: Astro (SSR & Island Architecture), React Islands (Interactive Widgets Hydrated on Demand), Tailwind CSS, Astro Server Endpoints
- **Backend Layer**: Astro (SSR & Island Architecture), tRPC v11, Hono / Edge API, Turborepo Monorepo Architecture
- **Data & Persistence**: PostgreSQL (Supabase / Neon), SQL Migrations, Redis Cache, Cloudflare Hyperdrive / Neon Edge
- **Infrastructure & Deploy**: Cloudflare Pages / Workers (Global Edge CDN), Cloudflare Hyperdrive / Neon Edge, GitHub Actions Automated Pipeline
---
## 3. 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**:
- Implement a sleek, dark-mode first design palette (`#0e0e0f` main background, `#141416` cards, `#28292e` borders, warm amber `#e0791f` accent).
- Use crisp 1px borders and subtle 1px offset depth shadows (`0 1px 0 rgba(0, 0, 0, 0.5)`). Never use blurry default Tailwind shadows.
- Clean typography using `IBM Plex Sans` for body/headings and `IBM Plex Mono` for tags, badges, metrics, and code snippets.
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.
---
## 4. 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 database client, connection pool, Drizzle/PostgreSQL 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.
---
## 5. 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.