ai-flow-dev 2.1.9 → 2.2.0

package/prompts/frontend/flow-build.md

@@ -14,19 +14,20 @@ Your mission is to guide the user through creating **comprehensive, production-r
 
 ### Detectar Argumento de Fase
 
+// turbo
 Buscar en el mensaje del usuario patrones como:
 
-- "fase 0", "fase 1", "fase 2", ..., "fase 8"
+- "fase 0", "fase 1", "fase 2", ..., "fase 10"
 - "phase 0", "phase 1", etc.
 - "ejecutar fase N"
 - "run phase N"
 
 ### Comportamiento
 
-**Si se detecta "fase N" (donde N = 0-8):**
+**Si se detecta "fase N" (donde N = 0-10):**
 
 1. **Validar que la fase existe para frontend:**
-   - Fase 0: Context Discovery (opcional, solo proyectos existentes)
+   - Fase 0: Context Discovery
    - Fase 1: Discovery & UX Requirements
    - Fase 2: Components & Framework
    - Fase 3: State Management
@@ -35,447 +36,100 @@ Buscar en el mensaje del usuario patrones como:
    - Fase 6: Testing Strategy
    - Fase 7: Performance & Deployment
    - Fase 8: Project Setup & Final Documentation
+   - Fase 9: Implementation Roadmap
+   - Fase 10: User Stories Generation
 
 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`
+   - Ejecutar SOLO esa fase y seguir sus instrucciones internas.
+   - Al finalizar, informar 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
+   - Listar las fases válidas (0-10) 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.
-```
+- Ejecutar el flujo completo comenzando por la Selección de Modo (A/B).
 ---
 ## 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: [%]%
+1. **Ask for Questionnaire Mode FIRST** (Interactive vs Smart Auto-Suggest).
+2. **Ask for Project Scope SECOND** (MVP, Production-Ready, or Enterprise).
+3. **Execute ALL applicable phases in order**, adjusting depth based on scope.
+4. **Ask questions ONE BY ONE**. Wait for the user's answer.
+5. **Show progress indicator before EVERY question**.
+6. **Provide recommendations** using markers: ⭐ **Recommended**, 🔥 **Popular**, ⚡ **Modern**, 🏆 **Enterprise**.
+7. **Generate documents incrementally** after each phase.
 ---
-   ```
-   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
----
-## 📚 How to Use This Guide
+## 🚀 Mode Selection
 
-This documentation is **modularized** for better maintainability and performance. Each phase is in a separate file.
+**BEFORE STARTING ANY PHASE**, ask the user to select the questionnaire mode:
 
-### For Complete Build (All Phases)
+A) ⭐ **Interactive Mode (Recommended)**
+   • Full control, step-by-step questions. (90-120 min)
 
-Execute phases sequentially by reading each file in order:
+B) ⚡ **Smart Auto-Suggest Mode**
+   • AI suggests best practices, you answer 6 critical questions. (15-25 min)
 
-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`
+Your choice (A/B): __
 
-### For Individual Phases
+**Based on the selection:**
+- **Mode A (Interactive):** Proceed with normal sequential flow (Phases 0-10).
+- **Mode B (Smart Auto-Suggest):** Ask the following 6 critical questions one by one, then auto-generate all suggestions based on industry standards and the app type:
 
-You can execute any phase independently by reading its file. For example:
+  1. **Project Name & Description** (Skip if Phase 0 detected context)
+  2. **Target Audience & Devices:** Who are the users and what devices (Mobile/Desktop)?
+  3. **Application Type:** Dashboard, E-commerce, SaaS, Landing Page, Social, B2B, PWA, etc.
+  4. **Framework Foundation:** React, Next.js, Vue, Nuxt, Svelte, Angular.
+  5. **Design System & Styling:** Custom (Tailwind/CSS) or Library (MUI/Ant/Chakra).
+  6. **State Management Complexity:** Simple (forms) or Complex (shared/real-time).
 
-```
-Read .ai-flow/prompts/frontend/flow-build-phase-3-state.md and execute only Phase 3
-```
+  **AI Logic for Auto-Suggest:**
+  - Generate comprehensive suggestions for all phases (1-10).
+  - Use modern tools matching the framework (e.g., Next.js -> TanStack Query).
+  - Adjust complexity based on scope (MVP vs Enterprise).
+  - Present a summary for confirmation before generating 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
+## 📚 Flow Overview & Modular Phases
 
-**What it does:**
+Each phase is modularized for better maintainability and reduced context usage.
 
-- **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
+| Phase | Description | File |
+|-------|-------------|------|
+| **Phase 0** | Context Discovery | `frontend/flow-build-phase-0.md` |
+| **Phase 1** | Discovery & UX | `frontend/flow-build-phase-1.md` |
+| **Phase 2** | Components & Framework| `frontend/flow-build-phase-2.md` |
+| **Phase 3** | State Management | `frontend/flow-build-phase-3.md` |
+| **Phase 4** | Styling & Design | `frontend/flow-build-phase-4.md` |
+| **Phase 5** | Code Standards | `frontend/flow-build-phase-5.md` |
+| **Phase 6** | Testing Strategy | `frontend/flow-build-phase-6.md` |
+| **Phase 7** | Performance & Deploy | `frontend/flow-build-phase-7.md` |
+| **Phase 8** | Setup & Final Docs | `frontend/flow-build-phase-8.md` |
+| **Phase 9** | Roadmap (Optional) | `frontend/flow-build-phase-9.md` |
+| **Phase 10** | User Stories (Optional) | `frontend/flow-build-phase-10.md` |
 
-**Supports:** React, Vue, Angular, Svelte, Solid + meta-frameworks (Next.js, Nuxt, SvelteKit, etc.)
-
-**Skip if:** Starting a completely new project from scratch
 ---
-### 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?
+## 📋 Scope Selection (MVP / Production / Enterprise)
 
-**Generates:**
+Before starting Phase 1, ask the user to select the Project Scope.
+> 📎 **Reference:** See [shared/scope-levels.md](../shared/scope-levels.md)
 
-- `project-brief.md`
-- Parts of `AGENT.md`
 ---
-### Phase 2: Components & Framework
+## 🔄 Documentation Sync
 
-**File:** `frontend/flow-build-phase-2-components.md`
-**Duration:** 15-20 minutes
-**Key Questions:**
+As your project grows, use the following to keep docs updated:
+**Command:** `/flow-docs-sync`
+**Logic:** Read `.ai-flow/prompts/frontend/flow-docs-sync.md`.
 
-- 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 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`
 ---
-### 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 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?
+## 🎯 After Completion
 
-**Generates:**
+ALWAYS present a final summary:
+1. **Quick Summary:** 1 paragraph overview.
+2. **Extended Report:** Key decisions by phase.
+3. **Scaffolding:** Offer to initialize or commit changes.
 
-- `docs/code-standards.md`
-- 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`
----
-### 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 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`)
----
-## 📊 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)
-
-
-
-
+_Version: 4.2 (v2.1.9) (Antigravity Optimized - Modularized & Turbo-Enabled)_
+_Last Updated: 2025-12-21_
+_AI Flow - Transform your idea into production-ready code in minutes_