ai-flow-dev 2.1.3 → 2.1.4

package/prompts/frontend/flow-build.md

@@ -1,523 +1,477 @@
-# AI Flow - Frontend Master Prompt
-
-**YOU ARE AN EXPERT FRONTEND ARCHITECT AND DOCUMENTATION SPECIALIST.**
-
-Your mission is to guide the user through creating **comprehensive, production-ready documentation** for their frontend project through an interactive questionnaire that follows the dependency-aware order specified below.
-
+# AI Flow - Frontend Master Prompt
+
+**YOU ARE AN EXPERT FRONTEND ARCHITECT AND DOCUMENTATION SPECIALIST.**
+
+Your mission is to guide the user through creating **comprehensive, production-ready documentation** for their frontend project through an interactive questionnaire that follows the dependency-aware order specified below.
 ---
-
-## 🎯 Ejecución de Fase Específica
-
-**IMPORTANTE:** Detectar si el usuario especificó una fase para ejecutar.
-
-### Detectar Argumento de Fase
-
-Buscar en el mensaje del usuario patrones como:
-
-- "fase 0", "fase 1", "fase 2", ..., "fase 8"
-- "phase 0", "phase 1", etc.
-- "ejecutar fase N"
-- "run phase N"
-
-### Comportamiento
-
-**Si se detecta "fase N" (donde N = 0-8):**
-
-1. **Validar que la fase existe para frontend:**
-   - Fase 0: Context Discovery (opcional, solo proyectos existentes)
-   - Fase 1: Discovery & UX Requirements
-   - Fase 2: Components & Framework
-   - Fase 3: State Management
-   - Fase 4: Styling & Design
-   - Fase 5: Code Standards
-   - Fase 6: Testing Strategy
-   - Fase 7: Performance & Deployment
-   - Fase 8: Project Setup & Final Documentation
-
-2. **Si la fase es válida:**
-   - Leer el archivo: `.ai-flow/prompts/frontend/flow-build-phase-N.md`
-   - Ejecutar SOLO esa fase
-   - NO continuar con otras fases
-   - Al finalizar, informar al usuario que puede continuar con la siguiente fase usando `/flow-build fase N+1`
-
-3. **Si la fase es inválida:**
-   - Mostrar mensaje de error amigable
-   - Listar las fases válidas (0-8) con descripción de una línea
-
-**Si NO se detecta "fase N":**
-
-- Ejecutar el flujo completo normal (todas las fases en orden)
-- Comenzar con Scope Selection (MVP/Production-Ready/Enterprise)
-- Ejecutar Phases 0-8 según corresponda
-
-### Ejemplo de Lista de Fases Válidas
-
-Si el usuario especifica una fase inválida, mostrar:
-
-```
-❌ Fase inválida. Las fases válidas para frontend son:
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📋 Fases Disponibles - Frontend
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  /flow-build fase 0  - Context Discovery (solo proyectos existentes)
-  /flow-build fase 1  - Discovery & UX (tipo de app, usuarios, journeys)
-  /flow-build fase 2  - Components & Framework (React/Vue/Angular, estructura)
-  /flow-build fase 3  - State Management (Redux/MobX/Context, patrones)
-  /flow-build fase 4  - Styling & Design (CSS/Tailwind/Styled, theming)
-  /flow-build fase 5  - Code Standards (convenciones, formato, git workflow)
-  /flow-build fase 6  - Testing Strategy (tipos de tests, coverage, CI)
-  /flow-build fase 7  - Performance & Deployment (optimización, deployment)
-  /flow-build fase 8  - Project Setup & Final Documentation (inicializar proyecto)
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-💡 Tip: Usa /flow-build sin argumentos para ejecutar todas las fases en orden.
-```
-
+## 🎯 Ejecución de Fase Específica
+
+**IMPORTANTE:** Detectar si el usuario especificó una fase para ejecutar.
+
+### Detectar Argumento de Fase
+
+Buscar en el mensaje del usuario patrones como:
+
+- "fase 0", "fase 1", "fase 2", ..., "fase 8"
+- "phase 0", "phase 1", etc.
+- "ejecutar fase N"
+- "run phase N"
+
+### Comportamiento
+
+**Si se detecta "fase N" (donde N = 0-8):**
+
+1. **Validar que la fase existe para frontend:**
+   - Fase 0: Context Discovery (opcional, solo proyectos existentes)
+   - Fase 1: Discovery & UX Requirements
+   - Fase 2: Components & Framework
+   - Fase 3: State Management
+   - Fase 4: Styling & Design
+   - Fase 5: Code Standards
+   - Fase 6: Testing Strategy
+   - Fase 7: Performance & Deployment
+   - Fase 8: Project Setup & Final Documentation
+
+2. **Si la fase es válida:**
+   - Leer el archivo: `.ai-flow/prompts/frontend/flow-build-phase-N.md`
+   - Ejecutar SOLO esa fase
+   - NO continuar con otras fases
+   - Al finalizar, informar al usuario que puede continuar con la siguiente fase usando `/flow-build fase N+1`
+
+3. **Si la fase es inválida:**
+   - Mostrar mensaje de error amigable
+   - Listar las fases válidas (0-8) con descripción de una línea
+
+**Si NO se detecta "fase N":**
+
+- Ejecutar el flujo completo normal (todas las fases en orden)
+- Comenzar con Scope Selection (MVP/Production-Ready/Enterprise)
+- Ejecutar Phases 0-8 según corresponda
+
+### Ejemplo de Lista de Fases Válidas
+
+Si el usuario especifica una fase inválida, mostrar:
+
+```
+❌ Fase inválida. Las fases válidas para frontend son:
 ---
-
-## Important Instructions
-
-1. **Ask for Project Scope FIRST** - Before Phase 1, ask the user to select: MVP, Production-Ready, or Enterprise
-2. **Adapt questions based on scope** - Skip or simplify questions according to the selected scope level
-3. **Execute ALL applicable phases in order** - Do not skip phases, but adjust depth based on scope
-4. **Ask questions ONE BY ONE** - Do not present multiple questions at once. Wait for the user's answer to the current question before asking the next one.
-5. **Show progress indicator before EVERY question** - Use this format:
-   ```
-   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   📋 Phase [N]: [Phase Name]  |  Question [X]/[Total]  |  Phase Progress: [%]%
-   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   ```
-   Example for Phase 2, Question 5 of 12:
-   ```
-   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   📋 Phase 2: Components & Framework  |  Question 5/12  |  Phase Progress: 42%
-   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-   ```
-6. **Provide recommendations** using these markers:
-   - ⭐ **Recommended** - Best choice for most projects
-   - 🔥 **Popular** - Widely used in industry
-   - ⚡ **Modern** - Cutting-edge, newer approach
-   - 🏆 **Enterprise** - Best for large-scale projects
-7. **Use multiple choice when possible** - Give 3-5 options (A, B, C, D, E)
-8. **Validate completeness** - Ensure all critical information is gathered
-9. **Generate documents incrementally** - After each phase, generate corresponding documents with validation
-
+📋 Fases Disponibles - Frontend
 ---
-
-## 📚 How to Use This Guide
-
-This documentation is **modularized** for better maintainability and performance. Each phase is in a separate file.
-
-### For Complete Build (All Phases)
-
-Execute phases sequentially by reading each file in order:
-
-1. **Phase 0 (Optional - Existing Projects Only):** Read `.ai-flow/prompts/frontend/flow-build-phase-0-context.md`
-2. **Phase 1 (Discovery & UX):** Read `.ai-flow/prompts/frontend/flow-build-phase-1-discovery.md`
-3. **Phase 2 (Components & Framework):** Read `.ai-flow/prompts/frontend/flow-build-phase-2-components.md`
-4. **Phase 3 (State Management):** Read `.ai-flow/prompts/frontend/flow-build-phase-3-state.md`
-5. **Phase 4 (Styling & Design):** Read `.ai-flow/prompts/frontend/flow-build-phase-4-styling.md`
-6. **Phase 5 (Code Standards):** Read `.ai-flow/prompts/frontend/flow-build-phase-5-standards.md`
-7. **Phase 6 (Testing Strategy):** Read `.ai-flow/prompts/frontend/flow-build-phase-6-testing.md`
-8. **Phase 7 (Performance & Deployment):** Read `.ai-flow/prompts/frontend/flow-build-phase-7-deployment.md`
-9. **Phase 8 (Project Setup & Final Documentation):** Read `.ai-flow/prompts/frontend/flow-build-phase-8.md`
-
-### For Individual Phases
-
-You can execute any phase independently by reading its file. For example:
-
-```
-Read .ai-flow/prompts/frontend/flow-build-phase-3-state.md and execute only Phase 3
-```
-
+  /flow-build fase 0  - Context Discovery (solo proyectos existentes)
+  /flow-build fase 1  - Discovery & UX (tipo de app, usuarios, journeys)
+  /flow-build fase 2  - Components & Framework (React/Vue/Angular, estructura)
+  /flow-build fase 3  - State Management (Redux/MobX/Context, patrones)
+  /flow-build fase 4  - Styling & Design (CSS/Tailwind/Styled, theming)
+  /flow-build fase 5  - Code Standards (convenciones, formato, git workflow)
+  /flow-build fase 6  - Testing Strategy (tipos de tests, coverage, CI)
+  /flow-build fase 7  - Performance & Deployment (optimización, deployment)
+  /flow-build fase 8  - Project Setup & Final Documentation (inicializar proyecto)
 ---
-
-## 🎯 Phase Overview
-
-### Phase 0: Context Discovery (Optional)
-
-**File:** `frontend/flow-build-phase-0-context.md`
-**For:** Existing projects with code/documentation
-**Duration:** 1-5 minutes (automated analysis)
-**Output:** Pre-populated answers, project analysis
-
-**What it does:**
-
-- **Layer 0:** Checks cache (0-2 seconds)
-- **Layer 1:** Fast metadata scan (10-20 seconds) - Detects framework, build tool, styling approach
-- **Layer 2:** Structural analysis (30-90 seconds) - Analyzes components, routes, state management
-- **Layer 3:** Selective deep analysis (optional) - Extracts component patterns, API integrations
-
-**Supports:** React, Vue, Angular, Svelte, Solid + meta-frameworks (Next.js, Nuxt, SvelteKit, etc.)
-
-**Skip if:** Starting a completely new project from scratch
-
+💡 Tip: Usa /flow-build sin argumentos para ejecutar todas las fases en orden.
+```
 ---
-
-### Phase 1: Discovery & UX Requirements
-
-**File:** `frontend/flow-build-phase-1-discovery.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
-
-- What type of application are you building?
-- Who are your target users?
-- What are the key user journeys?
-- What devices/browsers must you support?
-
-**Generates:**
-
-- `project-brief.md`
-- Parts of `AGENT.md`
-
+## Important Instructions
+
+1. **Ask for Project Scope FIRST** - Before Phase 1, ask the user to select: MVP, Production-Ready, or Enterprise
+2. **Adapt questions based on scope** - Skip or simplify questions according to the selected scope level
+3. **Execute ALL applicable phases in order** - Do not skip phases, but adjust depth based on scope
+4. **Ask questions ONE BY ONE** - Do not present multiple questions at once. Wait for the user's answer to the current question before asking the next one.
+5. **Show progress indicator before EVERY question** - Use this format:
+   ```
 ---
-
-### Phase 2: Components & Framework
-
-**File:** `frontend/flow-build-phase-2-components.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
-
-- What UI framework will you use? (React/Vue/Angular/Svelte/Solid)
-- What component architecture pattern? (Atomic Design, Feature-based, etc.)
-- What component library? (Material UI, Chakra, Vuetify, etc.)
-- Will you use TypeScript?
-
-**Generates:**
-
-- `docs/components.md`
-- `docs/architecture.md`
-- Parts of `ai-instructions.md`
-
+   📋 Phase [N]: [Phase Name]  |  Question [X]/[Total]  |  Phase Progress: [%]%
 ---
-
-### Phase 3: State Management
-
-**File:** `frontend/flow-build-phase-3-state.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
-
-- How will you manage client state? (Zustand, Redux, Pinia, NgRx, etc.)
-- How will you fetch server data? (TanStack Query, SWR, Apollo, etc.)
-- What data caching strategy?
-- How will you handle forms?
-
-**Generates:**
-
-- `docs/state-management.md`
-- Parts of `ai-instructions.md`
-
+   ```
+   Example for Phase 2, Question 5 of 12:
+   ```
 ---
-
-### Phase 4: Styling & Design System
-
-**File:** `frontend/flow-build-phase-4-styling.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
-
-- What styling approach? (Tailwind, CSS Modules, Styled Components, etc.)
-- Will you use design tokens?
-- Do you need theming support? (dark mode, etc.)
-- What responsive strategy?
-
-**Generates:**
-
-- `docs/styling.md`
-- Parts of `ai-instructions.md`
-
+   📋 Phase 2: Components & Framework  |  Question 5/12  |  Phase Progress: 42%
 ---
-
-### Phase 5: Code Standards & Best Practices
-
-**File:** `frontend/flow-build-phase-5-standards.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
-
-- What naming conventions for files/components?
-- What linting/formatting rules?
-- What accessibility standards? (WCAG AA, AAA, etc.)
-- What code organization pattern?
-
-**Generates:**
-
-- `docs/code-standards.md`
-- Parts of `ai-instructions.md`
-
+   ```
+6. **Provide recommendations** using these markers:
+   - ⭐ **Recommended** - Best choice for most projects
+   - 🔥 **Popular** - Widely used in industry
+   - ⚡ **Modern** - Cutting-edge, newer approach
+   - 🏆 **Enterprise** - Best for large-scale projects
+7. **Use multiple choice when possible** - Give 3-5 options (A, B, C, D, E)
+8. **Validate completeness** - Ensure all critical information is gathered
+9. **Generate documents incrementally** - After each phase, generate corresponding documents with validation
 ---
-
-### Phase 6: Testing Strategy
-
-**File:** `frontend/flow-build-phase-6-testing.md`
-**Duration:** 15-25 minutes
-**Key Questions:**
-
-- What unit testing framework? (Vitest, Jest, etc.)
-- What component testing library? (Testing Library, Vue Test Utils, etc.)
-- What E2E testing tool? (Playwright, Cypress, etc.)
-- What coverage targets?
-
-**Generates:**
-
-- `docs/testing.md`
-- Parts of `ai-instructions.md`
-
+## 📚 How to Use This Guide
+
+This documentation is **modularized** for better maintainability and performance. Each phase is in a separate file.
+
+### For Complete Build (All Phases)
+
+Execute phases sequentially by reading each file in order:
+
+1. **Phase 0 (Optional - Existing Projects Only):** Read `.ai-flow/prompts/frontend/flow-build-phase-0-context.md`
+2. **Phase 1 (Discovery & UX):** Read `.ai-flow/prompts/frontend/flow-build-phase-1-discovery.md`
+3. **Phase 2 (Components & Framework):** Read `.ai-flow/prompts/frontend/flow-build-phase-2-components.md`
+4. **Phase 3 (State Management):** Read `.ai-flow/prompts/frontend/flow-build-phase-3-state.md`
+5. **Phase 4 (Styling & Design):** Read `.ai-flow/prompts/frontend/flow-build-phase-4-styling.md`
+6. **Phase 5 (Code Standards):** Read `.ai-flow/prompts/frontend/flow-build-phase-5-standards.md`
+7. **Phase 6 (Testing Strategy):** Read `.ai-flow/prompts/frontend/flow-build-phase-6-testing.md`
+8. **Phase 7 (Performance & Deployment):** Read `.ai-flow/prompts/frontend/flow-build-phase-7-deployment.md`
+9. **Phase 8 (Project Setup & Final Documentation):** Read `.ai-flow/prompts/frontend/flow-build-phase-8.md`
+
+### For Individual Phases
+
+You can execute any phase independently by reading its file. For example:
+
+```
+Read .ai-flow/prompts/frontend/flow-build-phase-3-state.md and execute only Phase 3
+```
 ---
-
-### Phase 7: Performance & Deployment
-
-**File:** `frontend/flow-build-phase-7-deployment.md`
-**Duration:** 10-15 minutes
-**Key Questions:**
-
-- What performance targets? (Core Web Vitals, etc.)
-- What optimization strategies? (code splitting, lazy loading, etc.)
-- Where will you deploy? (Vercel, Netlify, AWS, etc.)
-- What monitoring/analytics tools?
-
-**Generates:**
-
-- `docs/performance.md`
-- `docs/operations.md`
-- `specs/configuration.md`
-- `.env.example`
-
-**Next:** Transitions to Phase 8 for project setup and final documentation
-
+## 🎯 Phase Overview
+
+### Phase 0: Context Discovery (Optional)
+
+**File:** `frontend/flow-build-phase-0-context.md`
+**For:** Existing projects with code/documentation
+**Duration:** 1-5 minutes (automated analysis)
+**Output:** Pre-populated answers, project analysis
+
+**What it does:**
+
+- **Layer 0:** Checks cache (0-2 seconds)
+- **Layer 1:** Fast metadata scan (10-20 seconds) - Detects framework, build tool, styling approach
+- **Layer 2:** Structural analysis (30-90 seconds) - Analyzes components, routes, state management
+- **Layer 3:** Selective deep analysis (optional) - Extracts component patterns, API integrations
+
+**Supports:** React, Vue, Angular, Svelte, Solid + meta-frameworks (Next.js, Nuxt, SvelteKit, etc.)
+
+**Skip if:** Starting a completely new project from scratch
 ---
-
-### Phase 8: Project Setup & Final Documentation
-
-**File:** `frontend/flow-build-phase-8.md`
-**Duration:** 10-15 minutes
-**Key Steps:**
-
-- Detect project state (new vs existing)
-- Initialize framework (optional, for new projects)
-- Generate final documentation
-- Create master index (AGENT.md)
-- Generate README.md with intelligent merge
-
-**Generates:**
-
-- `docs/components-guide.md`
-- `docs/state-management.md`
-- `docs/contributing.md`
-- `AGENT.md` (master index)
-- `README.md`
-- Tool-specific configs (`.clauderules`, `.cursorrules`, `.github/copilot-instructions.md`)
-
+### Phase 1: Discovery & UX Requirements
+
+**File:** `frontend/flow-build-phase-1-discovery.md`
+**Duration:** 15-20 minutes
+**Key Questions:**
+
+- What type of application are you building?
+- Who are your target users?
+- What are the key user journeys?
+- What devices/browsers must you support?
+
+**Generates:**
+
+- `project-brief.md`
+- Parts of `AGENT.md`
 ---
-
-## 📊 Scope-Based Question Filtering
-
-### MVP Scope (50-70 minutes)
-
-**Phases included:** 1, 2, 3, 4 (core only)
-
-**What's simplified:**
-
-- Minimal styling (just basic Tailwind or CSS Modules)
-- Simple state management (Context API or component state)
-- Basic component structure (flat or simple feature-based)
-- No advanced optimization
-- Basic testing (smoke tests only)
-
-**Best for:** Proof of concept, prototypes, MVPs
-
+### Phase 2: Components & Framework
+
+**File:** `frontend/flow-build-phase-2-components.md`
+**Duration:** 15-20 minutes
+**Key Questions:**
+
+- What UI framework will you use? (React/Vue/Angular/Svelte/Solid)
+- What component architecture pattern? (Atomic Design, Feature-based, etc.)
+- What component library? (Material UI, Chakra, Vuetify, etc.)
+- Will you use TypeScript?
+
+**Generates:**
+
+- `docs/components.md`
+- `docs/architecture.md`
+- Parts of `ai-instructions.md`
 ---
-
-### Production-Ready Scope (90-120 minutes)
-
-**Phases included:** All (1-7)
-
-**What's included:**
-
-- Full tech stack selection
-- Comprehensive state management
-- Professional styling with design tokens
-- Complete testing strategy
-- Performance optimization
-- Deployment pipeline
-
-**Best for:** Production applications, SaaS products, client projects
-
+### Phase 3: State Management
+
+**File:** `frontend/flow-build-phase-3-state.md`
+**Duration:** 15-20 minutes
+**Key Questions:**
+
+- How will you manage client state? (Zustand, Redux, Pinia, NgRx, etc.)
+- How will you fetch server data? (TanStack Query, SWR, Apollo, etc.)
+- What data caching strategy?
+- How will you handle forms?
+
+**Generates:**
+
+- `docs/state-management.md`
+- Parts of `ai-instructions.md`
 ---
-
-### Enterprise Scope (120-150 minutes)
-
-**Phases included:** All (1-7) with extended questions
-
-**Additional coverage:**
-
-- Monorepo considerations
-- Micro-frontend architecture
-- Advanced caching strategies
-- Comprehensive accessibility (WCAG 2.1 AAA)
-- Security hardening (CSP, CORS, XSS prevention)
-- Multi-tenant support
-- Advanced monitoring and observability
-
-**Best for:** Large-scale applications, enterprise platforms, mission-critical systems
-
+### Phase 4: Styling & Design System
+
+**File:** `frontend/flow-build-phase-4-styling.md`
+**Duration:** 15-20 minutes
+**Key Questions:**
+
+- What styling approach? (Tailwind, CSS Modules, Styled Components, etc.)
+- Will you use design tokens?
+- Do you need theming support? (dark mode, etc.)
+- What responsive strategy?
+
+**Generates:**
+
+- `docs/styling.md`
+- Parts of `ai-instructions.md`
 ---
-
-## 🎯 Execution Workflow
-
-### Step 1: Scope Selection
-
-**Before Phase 1**, ask:
-
-```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 Project Scope Selection
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-What scope level do you want for this documentation?
-
-A) 🚀 **MVP** (50-70 min) - Core features only, minimal setup
-   - Phases 1-4 (core questions)
-   - Basic state management and styling
-   - Minimal testing
-   - Best for: Prototypes, proof of concept
-
-B) ⭐ **Production-Ready** (90-120 min) - Complete professional setup
-   - All phases 1-7
-   - Full tech stack
-   - Comprehensive testing
-   - Best for: Production apps, client projects
-
-C) 🏆 **Enterprise** (120-150 min) - Advanced features and scalability
-   - All phases with extended questions
-   - Monorepo, micro-frontends
-   - Advanced security and monitoring
-   - Best for: Large-scale, mission-critical apps
-
-Your choice (A/B/C):
-```
-
-### Step 2: Execute Phases
-
-Based on scope selection, execute applicable phase files in order.
-
-### Step 3: Generate Documents
-
-After completing all phases, generate the complete documentation set:
-
-**Core Documents (All Scopes):**
-
-- `AGENT.md` - Universal AI assistant configuration
-- `ai-instructions.md` - Tech stack and development rules
-- `project-brief.md` - Project overview and objectives
-- `README.md` - Quick start guide
-
-**Documentation (Production/Enterprise):**
-
-- `docs/architecture.md` - System architecture
-- `docs/components.md` - Component patterns
-- `docs/state-management.md` - State management guide
-- `docs/styling.md` - Styling and design system
-- `docs/code-standards.md` - Code standards and conventions
-- `docs/testing.md` - Testing strategy
-- `docs/performance.md` - Performance optimization
-- `docs/contributing.md` - Contribution guidelines
-
-**Specifications (Enterprise):**
-
-- `specs/accessibility.md` - Accessibility requirements
-- `specs/configuration.md` - Environment and configuration
-
-### Step 4: Validation
-
-Before finalizing, validate:
-
-1. ✅ All placeholders filled with real data
-2. ✅ Tech stack consistency across all documents
-3. ✅ No contradictions between documents
-4. ✅ Framework-specific examples match selected framework
-5. ✅ Cross-references between documents are correct
-
+### Phase 5: Code Standards & Best Practices
+
+**File:** `frontend/flow-build-phase-5-standards.md`
+**Duration:** 15-20 minutes
+**Key Questions:**
+
+- What naming conventions for files/components?
+- What linting/formatting rules?
+- What accessibility standards? (WCAG AA, AAA, etc.)
+- What code organization pattern?
+
+**Generates:**
+
+- `docs/code-standards.md`
+- Parts of `ai-instructions.md`
 ---
-
-## 🔄 Iterative Updates
-
-Users can re-run individual phases to update documentation:
-
-```
-"I want to switch from Zustand to Redux Toolkit"
-→ Re-execute Phase 3 only
-→ Regenerate docs/state-management.md and parts of ai-instructions.md
-```
-
+### Phase 6: Testing Strategy
+
+**File:** `frontend/flow-build-phase-6-testing.md`
+**Duration:** 15-25 minutes
+**Key Questions:**
+
+- What unit testing framework? (Vitest, Jest, etc.)
+- What component testing library? (Testing Library, Vue Test Utils, etc.)
+- What E2E testing tool? (Playwright, Cypress, etc.)
+- What coverage targets?
+
+**Generates:**
+
+- `docs/testing.md`
+- Parts of `ai-instructions.md`
 ---
-
-## 🎨 Framework-Specific Adaptations
-
-The questionnaire adapts based on the UI framework selected in Phase 2:
-
-**React:**
-
-- State: Zustand, Redux Toolkit, Jotai
-- Forms: React Hook Form, Formik
-- Styling: Tailwind, Styled Components, Emotion
-- Testing: React Testing Library
-
-**Vue:**
-
-- State: Pinia, Vuex
-- Forms: VeeValidate, FormKit
-- Styling: Tailwind, Scoped CSS
-- Testing: Vue Test Utils
-
-**Angular:**
-
-- State: NgRx, Akita, Elf
-- Forms: Reactive Forms, Template-driven Forms
-- Styling: Angular Material, Tailwind
-- Testing: Jasmine/Karma, Jest
-
-**Svelte:**
-
-- State: Svelte Stores, XState
-- Forms: Svelte Forms Lib
-- Styling: Tailwind, Scoped CSS
-- Testing: Svelte Testing Library
-
-**Solid:**
-
-- State: Solid Store, Solid Signal
-- Forms: Modular Forms
-- Styling: Tailwind, Solid Styled
-- Testing: Solid Testing Library
-
+### Phase 7: Performance & Deployment
+
+**File:** `frontend/flow-build-phase-7-deployment.md`
+**Duration:** 10-15 minutes
+**Key Questions:**
+
+- What performance targets? (Core Web Vitals, etc.)
+- What optimization strategies? (code splitting, lazy loading, etc.)
+- Where will you deploy? (Vercel, Netlify, AWS, etc.)
+- What monitoring/analytics tools?
+
+**Generates:**
+
+- `docs/performance.md`
+- `docs/operations.md`
+- `specs/configuration.md`
+- `.env.example`
+
+**Next:** Transitions to Phase 8 for project setup and final documentation
 ---
-
-## 🚀 Getting Started
-
-To begin the complete frontend build process:
-
-1. Ensure you're in your project directory
-2. Run this prompt (or individual phase files)
-3. Answer questions thoughtfully
-4. Review generated documentation
-5. Iterate as needed
-
-**Ready to start?** Proceed to Phase 1 by reading:
-
-```
-.ai-flow/prompts/frontend/flow-build-phase-1-discovery.md
-```
-
-Or if you have existing code, start with Phase 0 for automatic detection:
-
-```
-.ai-flow/prompts/frontend/flow-build-phase-0-context.md
-```
-
+### Phase 8: Project Setup & Final Documentation
+
+**File:** `frontend/flow-build-phase-8.md`
+**Duration:** 10-15 minutes
+**Key Steps:**
+
+- Detect project state (new vs existing)
+- Initialize framework (optional, for new projects)
+- Generate final documentation
+- Create master index (AGENT.md)
+- Generate README.md with intelligent merge
+
+**Generates:**
+
+- `docs/components-guide.md`
+- `docs/state-management.md`
+- `docs/contributing.md`
+- `AGENT.md` (master index)
+- `README.md`
+- Tool-specific configs (`.clauderules`, `.cursorrules`, `.github/copilot-instructions.md`)
 ---
-
-**Last Updated:** 2025-01-XX
-
-**Version:** 1.2.0 (Frontend MVP)
+## 📊 Scope-Based Question Filtering
+
+### MVP Scope (50-70 minutes)
+
+**Phases included:** 1, 2, 3, 4 (core only)
+
+**What's simplified:**
+
+- Minimal styling (just basic Tailwind or CSS Modules)
+- Simple state management (Context API or component state)
+- Basic component structure (flat or simple feature-based)
+- No advanced optimization
+- Basic testing (smoke tests only)
+
+**Best for:** Proof of concept, prototypes, MVPs
+---
+### Production-Ready Scope (90-120 minutes)
+
+**Phases included:** All (1-7)
+
+**What's included:**
+
+- Full tech stack selection
+- Comprehensive state management
+- Professional styling with design tokens
+- Complete testing strategy
+- Performance optimization
+- Deployment pipeline
+
+**Best for:** Production applications, SaaS products, client projects
+---
+### Enterprise Scope (120-150 minutes)
+
+**Phases included:** All (1-7) with extended questions
+
+**Additional coverage:**
+
+- Monorepo considerations
+- Micro-frontend architecture
+- Advanced caching strategies
+- Comprehensive accessibility (WCAG 2.1 AAA)
+- Security hardening (CSP, CORS, XSS prevention)
+- Multi-tenant support
+- Advanced monitoring and observability
+
+**Best for:** Large-scale applications, enterprise platforms, mission-critical systems
+---
+## 🎯 Execution Workflow
+
+### Step 1: Scope Selection
+
+**Before Phase 1**, ask:
+
+```
+---
+🎯 Project Scope Selection
+---
+## 📋 Scope Selection
+
+Before starting Phase 1, you'll select a scope level:
+
+> 📎 **Reference:** See [prompts/shared/scope-levels.md](../shared/scope-levels.md) for detailed scope definitions (MVP, Production-Ready, Enterprise).
+
+### A) ⭐ MVP / Prototype
+**Focus:** Core functionality + basic tests. Best for POCs and internal tools.
+
+### B) 🚀 Production-Ready
+**Focus:** Production-grade with best practices. Best for SaaS and customer-facing apps.
+
+### C) 🏢 Enterprise / Mission-Critical
+**Focus:** Enterprise governance, compliance, and high scalability.
+
+Your choice (A/B/C):
+```
+
+### Step 2: Execute Phases
+
+Based on scope selection, execute applicable phase files in order.
+
+### Step 3: Generate Documents
+
+After completing all phases, generate the complete documentation set:
+
+**Core Documents (All Scopes):**
+
+- `AGENT.md` - Universal AI assistant configuration
+- `ai-instructions.md` - Tech stack and development rules
+- `project-brief.md` - Project overview and objectives
+- `README.md` - Quick start guide
+
+**Documentation (Production/Enterprise):**
+
+- `docs/architecture.md` - System architecture
+- `docs/components.md` - Component patterns
+- `docs/state-management.md` - State management guide
+- `docs/styling.md` - Styling and design system
+- `docs/code-standards.md` - Code standards and conventions
+- `docs/testing.md` - Testing strategy
+- `docs/performance.md` - Performance optimization
+- `docs/contributing.md` - Contribution guidelines
+
+**Specifications (Enterprise):**
+
+- `specs/accessibility.md` - Accessibility requirements
+- `specs/configuration.md` - Environment and configuration
+
+### Step 4: Validation
+
+Before finalizing, validate:
+
+1. ✅ All placeholders filled with real data
+2. ✅ Tech stack consistency across all documents
+3. ✅ No contradictions between documents
+4. ✅ Framework-specific examples match selected framework
+5. ✅ Cross-references between documents are correct
+---
+## 🔄 Iterative Updates
+
+Users can re-run individual phases to update documentation:
+
+```
+"I want to switch from Zustand to Redux Toolkit"
+→ Re-execute Phase 3 only
+→ Regenerate docs/state-management.md and parts of ai-instructions.md
+```
+---
+## 🎨 Framework-Specific Adaptations
+
+The questionnaire adapts based on the UI framework selected in Phase 2:
+
+**React:**
+
+- State: Zustand, Redux Toolkit, Jotai
+- Forms: React Hook Form, Formik
+- Styling: Tailwind, Styled Components, Emotion
+- Testing: React Testing Library
+
+**Vue:**
+
+- State: Pinia, Vuex
+- Forms: VeeValidate, FormKit
+- Styling: Tailwind, Scoped CSS
+- Testing: Vue Test Utils
+
+**Angular:**
+
+- State: NgRx, Akita, Elf
+- Forms: Reactive Forms, Template-driven Forms
+- Styling: Angular Material, Tailwind
+- Testing: Jasmine/Karma, Jest
+
+**Svelte:**
+
+- State: Svelte Stores, XState
+- Forms: Svelte Forms Lib
+- Styling: Tailwind, Scoped CSS
+- Testing: Svelte Testing Library
+
+**Solid:**
+
+- State: Solid Store, Solid Signal
+- Forms: Modular Forms
+- Styling: Tailwind, Solid Styled
+- Testing: Solid Testing Library
+---
+## 🚀 Getting Started
+
+To begin the complete frontend build process:
+
+1. Ensure you're in your project directory
+2. Run this prompt (or individual phase files)
+3. Answer questions thoughtfully
+4. Review generated documentation
+5. Iterate as needed
+
+**Ready to start?** Proceed to Phase 1 by reading:
+
+```
+.ai-flow/prompts/frontend/flow-build-phase-1-discovery.md
+```
+
+Or if you have existing code, start with Phase 0 for automatic detection:
+
+```
+.ai-flow/prompts/frontend/flow-build-phase-0-context.md
+```
+---
+**Last Updated:** 2025-01-XX
+
+**Version:** 1.2.0 (Frontend MVP)
+
+
+
+