ai-flow-dev 1.0.2 → 1.1.1

package/prompts/frontend/{flow-docs-gen-phase-7.md → flow-bootstrap-phase-7.md}

@@ -24,30 +24,35 @@ Define performance targets and deployment strategy:
 **What performance targets will you aim for?**
 
 Core Web Vitals:
+
 - **LCP (Largest Contentful Paint):** Largest element render time
 - **FID (First Input Delay):** Time to interactive
 - **CLS (Cumulative Layout Shift):** Visual stability
 
 A) ⭐ **"Good" Rating (Recommended)**
-   - LCP: < 2.5s
-   - FID: < 100ms
-   - CLS: < 0.1
-   - Best for: Most apps, SEO, user experience
+
+- LCP: < 2.5s
+- FID: < 100ms
+- CLS: < 0.1
+- Best for: Most apps, SEO, user experience
 
 B) **"Needs Improvement" (Acceptable)**
-   - LCP: < 4.0s
-   - FID: < 300ms
-   - CLS: < 0.25
-   - Best for: MVPs, internal tools
+
+- LCP: < 4.0s
+- FID: < 300ms
+- CLS: < 0.25
+- Best for: MVPs, internal tools
 
 C) **Aggressive Targets**
-   - LCP: < 1.5s
-   - FID: < 50ms
-   - CLS: < 0.05
-   - Best for: Performance-critical apps, e-commerce
+
+- LCP: < 1.5s
+- FID: < 50ms
+- CLS: < 0.05
+- Best for: Performance-critical apps, e-commerce
 
 D) **No specific targets**
-   - Not recommended
+
+- Not recommended
 
 **Your answer:**
 
@@ -58,16 +63,20 @@ D) **No specific targets**
 **What bundle size will you target?**
 
 A) ⭐ **< 200KB gzipped (initial load)** (Recommended)
-   - Best for: Most apps, good mobile experience
+
+- Best for: Most apps, good mobile experience
 
 B) **< 100KB gzipped**
-   - Best for: Performance-critical apps
+
+- Best for: Performance-critical apps
 
 C) **< 300KB gzipped**
-   - Best for: Feature-rich apps
+
+- Best for: Feature-rich apps
 
 D) **No target**
-   - Best for: Internal tools only
+
+- Best for: Internal tools only
 
 **Your answer:**
 
@@ -77,6 +86,7 @@ B) Yes - Warn if bundle grows
 C) No
 
 **Tool for bundle analysis:**
+
 - `webpack-bundle-analyzer`
 - `rollup-plugin-visualizer`
 - `vite-plugin-bundle-analyzer`
@@ -89,29 +99,35 @@ C) No
 **How will you split your code?**
 
 A) ⭐ **Route-based splitting** (Recommended)
-   - Split by page/route
-   - Example: `/dashboard` → `Dashboard.chunk.js`
-   - Best for: Multi-page apps, SPAs
+
+- Split by page/route
+- Example: `/dashboard` → `Dashboard.chunk.js`
+- Best for: Multi-page apps, SPAs
 
 B) **Component-based splitting**
-   - Lazy load heavy components
-   - Example: Modals, charts, editors
-   - Best for: Apps with heavy components
+
+- Lazy load heavy components
+- Example: Modals, charts, editors
+- Best for: Apps with heavy components
 
 C) **Vendor splitting**
-   - Separate vendor code from app code
-   - Best for: Long-term caching
+
+- Separate vendor code from app code
+- Best for: Long-term caching
 
 D) **Combined approach**
-   - Route + Component + Vendor splitting
-   - Best for: Large apps, optimal caching
+
+- Route + Component + Vendor splitting
+- Best for: Large apps, optimal caching
 
 E) **No code splitting**
-   - Best for: Very small apps (<100KB)
+
+- Best for: Very small apps (<100KB)
 
 **Your answer:**
 
 **Dynamic imports for:**
+
 - [ ] Routes
 - [ ] Modals/Dialogs
 - [ ] Heavy libraries (charts, editors)
@@ -125,31 +141,37 @@ E) **No code splitting**
 **How will you optimize images?**
 
 A) ⭐ **Next-gen formats + Lazy loading** (Recommended)
-   - WebP/AVIF with PNG/JPG fallback
-   - Lazy load below-the-fold images
-   - Responsive images (srcset)
-   - Best for: Image-heavy apps
+
+- WebP/AVIF with PNG/JPG fallback
+- Lazy load below-the-fold images
+- Responsive images (srcset)
+- Best for: Image-heavy apps
 
 B) **Lazy loading only**
-   - Native lazy loading: `<img loading="lazy" />`
-   - Best for: Simple optimization
+
+- Native lazy loading: `<img loading="lazy" />`
+- Best for: Simple optimization
 
 C) **CDN + Image service**
-   - Use Cloudinary, Imgix, etc.
-   - Automatic optimization
-   - Best for: Large image libraries
+
+- Use Cloudinary, Imgix, etc.
+- Automatic optimization
+- Best for: Large image libraries
 
 D) **No optimization**
-   - Best for: Minimal images
+
+- Best for: Minimal images
 
 **Your answer:**
 
 **Image formats supported:**
+
 - [ ] WebP
 - [ ] AVIF
 - [ ] PNG/JPG fallback
 
 **Image CDN:**
+
 - Cloudinary
 - Imgix
 - Vercel Image Optimization
@@ -163,27 +185,32 @@ D) **No optimization**
 **What caching strategy will you use?**
 
 A) ⭐ **Cache-first with revalidation** (Recommended)
-   - Service Worker cache assets
-   - Revalidate in background
-   - Best for: PWAs, fast repeat visits
+
+- Service Worker cache assets
+- Revalidate in background
+- Best for: PWAs, fast repeat visits
 
 B) **Network-first with cache fallback**
-   - Try network, fall back to cache
-   - Best for: Dynamic content
+
+- Try network, fall back to cache
+- Best for: Dynamic content
 
 C) **Browser caching only**
-   - Use HTTP cache headers
-   - Best for: Static sites, simple apps
+
+- Use HTTP cache headers
+- Best for: Static sites, simple apps
 
 D) **No caching**
-   - Best for: Dev environments only
+
+- Best for: Dev environments only
 
 **Your answer:**
 
 **Cache duration for assets:**
-- HTML: ____ (e.g., no cache, max-age=3600)
-- CSS/JS (versioned): ____ (e.g., max-age=31536000)
-- Images: ____ (e.g., max-age=86400)
+
+- HTML: \_\_\_\_ (e.g., no cache, max-age=3600)
+- CSS/JS (versioned): \_\_\_\_ (e.g., max-age=31536000)
+- Images: \_\_\_\_ (e.g., max-age=86400)
 
 ---
 
@@ -192,38 +219,45 @@ D) **No caching**
 **Where will you deploy?**
 
 A) ⭐ **Vercel** (Recommended for Next.js/SPA)
-   - Features: Zero-config, edge functions, preview deployments
-   - Best for: Next.js, React, Vue, Svelte
-   - Pricing: Free tier available
+
+- Features: Zero-config, edge functions, preview deployments
+- Best for: Next.js, React, Vue, Svelte
+- Pricing: Free tier available
 
 B) 🔥 **Netlify**
-   - Features: Similar to Vercel, great DX
-   - Best for: Static sites, JAMstack
-   - Pricing: Free tier available
+
+- Features: Similar to Vercel, great DX
+- Best for: Static sites, JAMstack
+- Pricing: Free tier available
 
 C) **AWS (S3 + CloudFront)**
-   - Features: Full control, scalable
-   - Best for: Enterprise, existing AWS infrastructure
-   - Pricing: Pay per use
+
+- Features: Full control, scalable
+- Best for: Enterprise, existing AWS infrastructure
+- Pricing: Pay per use
 
 D) **Cloudflare Pages**
-   - Features: Edge deployment, fast global CDN
-   - Best for: Static sites, edge workers
-   - Pricing: Free tier generous
+
+- Features: Edge deployment, fast global CDN
+- Best for: Static sites, edge workers
+- Pricing: Free tier generous
 
 E) **Firebase Hosting**
-   - Features: Integrated with Firebase services
-   - Best for: Firebase apps
-   - Pricing: Free tier available
+
+- Features: Integrated with Firebase services
+- Best for: Firebase apps
+- Pricing: Free tier available
 
 F) **Docker + VPS (DigitalOcean, Linode, etc.)**
-   - Features: Full control, self-hosted
-   - Best for: Custom infrastructure
-   - Pricing: $5-$20/month
+
+- Features: Full control, self-hosted
+- Best for: Custom infrastructure
+- Pricing: $5-$20/month
 
 G) **Azure Static Web Apps / Google Cloud Run**
-   - Features: Enterprise cloud platforms
-   - Best for: Enterprise, existing Azure/GCP infrastructure
+
+- Features: Enterprise cloud platforms
+- Best for: Enterprise, existing Azure/GCP infrastructure
 
 **Your answer:**
 
@@ -234,28 +268,34 @@ G) **Azure Static Web Apps / Google Cloud Run**
 **What CI/CD platform will you use?**
 
 A) ⭐ **GitHub Actions** (Recommended)
-   - Features: Native GitHub integration, free for public repos
-   - Best for: GitHub-hosted projects
+
+- Features: Native GitHub integration, free for public repos
+- Best for: GitHub-hosted projects
 
 B) **GitLab CI/CD**
-   - Features: Native GitLab integration
-   - Best for: GitLab-hosted projects
+
+- Features: Native GitLab integration
+- Best for: GitLab-hosted projects
 
 C) **Vercel/Netlify auto-deploy**
-   - Features: Zero-config, automatic on git push
-   - Best for: Simple deployments
+
+- Features: Zero-config, automatic on git push
+- Best for: Simple deployments
 
 D) **CircleCI / Travis CI**
-   - Features: Mature platforms, good caching
-   - Best for: Complex pipelines
+
+- Features: Mature platforms, good caching
+- Best for: Complex pipelines
 
 E) **No CI/CD**
-   - Manual deployments
-   - Not recommended
+
+- Manual deployments
+- Not recommended
 
 **Your answer:**
 
 **CI/CD steps:**
+
 - [ ] Install dependencies
 - [ ] Lint code
 - [ ] Run unit tests
@@ -273,22 +313,26 @@ E) **No CI/CD**
 **How many environments will you have?**
 
 A) ⭐ **3 environments** (Recommended)
-   - Development (local)
-   - Staging (preview.yourapp.com)
-   - Production (yourapp.com)
-   - Best for: Most apps
+
+- Development (local)
+- Staging (preview.yourapp.com)
+- Production (yourapp.com)
+- Best for: Most apps
 
 B) **4+ environments**
-   - Development, Staging, QA, Production
-   - Best for: Enterprise apps
+
+- Development, Staging, QA, Production
+- Best for: Enterprise apps
 
 C) **2 environments**
-   - Development, Production
-   - Best for: Small teams, MVPs
+
+- Development, Production
+- Best for: Small teams, MVPs
 
 **Your answer:**
 
 **Environment variables management:**
+
 - `.env.local` (gitignored, local overrides)
 - `.env.development`
 - `.env.staging`
@@ -304,63 +348,75 @@ C) **2 environments**
 #### Analytics
 
 A) ⭐ **Google Analytics 4**
-   - Features: Free, comprehensive, industry standard
-   - Best for: Most apps
+
+- Features: Free, comprehensive, industry standard
+- Best for: Most apps
 
 B) **Plausible / Fathom**
-   - Features: Privacy-focused, simple, no GDPR banner needed
-   - Best for: Privacy-conscious apps
-   - Pricing: Paid
+
+- Features: Privacy-focused, simple, no GDPR banner needed
+- Best for: Privacy-conscious apps
+- Pricing: Paid
 
 C) **Mixpanel / Amplitude**
-   - Features: Product analytics, event tracking
-   - Best for: SaaS products
-   - Pricing: Free tier available
+
+- Features: Product analytics, event tracking
+- Best for: SaaS products
+- Pricing: Free tier available
 
 D) **No analytics**
-   - Best for: Internal tools only
+
+- Best for: Internal tools only
 
 **Your answer:**
 
 #### Error Tracking
 
 A) ⭐ **Sentry** (Recommended)
-   - Features: Error tracking, performance monitoring, releases
-   - Best for: Most apps
-   - Pricing: Free tier available
+
+- Features: Error tracking, performance monitoring, releases
+- Best for: Most apps
+- Pricing: Free tier available
 
 B) **LogRocket**
-   - Features: Session replay, error tracking
-   - Best for: User behavior analysis
-   - Pricing: Paid
+
+- Features: Session replay, error tracking
+- Best for: User behavior analysis
+- Pricing: Paid
 
 C) **Datadog / New Relic**
-   - Features: Full observability platform
-   - Best for: Enterprise
-   - Pricing: Paid
+
+- Features: Full observability platform
+- Best for: Enterprise
+- Pricing: Paid
 
 D) **Console only**
-   - Best for: MVPs, dev environments
+
+- Best for: MVPs, dev environments
 
 **Your answer:**
 
 #### Performance Monitoring
 
 A) ⭐ **Web Vitals + Sentry** (Recommended)
-   - Track Core Web Vitals automatically
-   - Best for: Most apps
+
+- Track Core Web Vitals automatically
+- Best for: Most apps
 
 B) **Lighthouse CI**
-   - Run Lighthouse in CI/CD
-   - Best for: Performance budgets
+
+- Run Lighthouse in CI/CD
+- Best for: Performance budgets
 
 C) **SpeedCurve / Calibre**
-   - Features: Continuous performance monitoring
-   - Best for: Performance-critical apps
-   - Pricing: Paid
+
+- Features: Continuous performance monitoring
+- Best for: Performance-critical apps
+- Pricing: Paid
 
 D) **No monitoring**
-   - Not recommended
+
+- Not recommended
 
 **Your answer:**
 
@@ -371,23 +427,28 @@ D) **No monitoring**
 **How will you manage SEO?**
 
 A) ⭐ **React Helmet / vue-meta / Angular Meta service**
-   - Dynamic meta tags per page
-   - Best for: SPAs with SEO needs
+
+- Dynamic meta tags per page
+- Best for: SPAs with SEO needs
 
 B) **Next.js / Nuxt / Analog built-in SEO**
-   - `<Head>` component, automatic sitemap
-   - Best for: SSR frameworks
+
+- `<Head>` component, automatic sitemap
+- Best for: SSR frameworks
 
 C) **Static meta tags**
-   - Hardcoded in index.html
-   - Best for: Simple apps, no SEO focus
+
+- Hardcoded in index.html
+- Best for: Simple apps, no SEO focus
 
 D) **No SEO**
-   - Best for: Internal tools, auth-protected apps
+
+- Best for: Internal tools, auth-protected apps
 
 **Your answer:**
 
 **SEO requirements:**
+
 - [ ] Dynamic meta tags (title, description, OG)
 - [ ] Sitemap.xml generation
 - [ ] Robots.txt
@@ -483,100 +544,64 @@ Update `ai-instructions.md`:
 
 ---
 
-## 🚀 Final Steps: Document Generation
-
-Now that all 7 phases are complete, generate the **complete documentation set**:
-
-### 1. Core Documents
-
-- `AGENT.md` - Universal AI assistant configuration
-- `ai-instructions.md` - Complete tech stack and rules
-- `project-brief.md` - Full project overview
-- `README.md` - Quick start guide
-- `.env.example` - Environment variable template
+## ✅ Phase 7 Completion
 
-### 2. Documentation
+After answering all questions, summarize:
 
-- `docs/architecture.md` - System architecture overview
-- `docs/components.md` - Component patterns
-- `docs/state-management.md` - State management guide
-- `docs/styling.md` - Styling and design system
-- `docs/api-integration.md` - API integration patterns
-- `docs/code-standards.md` - Code conventions
-- `docs/testing.md` - Testing strategy
-- `docs/performance.md` - Performance optimization
-- `docs/operations.md` - Deployment and monitoring
-- `docs/contributing.md` - Contribution guidelines
-
-### 3. Specifications
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+✅ Phase 7 Complete: Performance & Deployment
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-- `specs/accessibility.md` - A11y requirements
-- `specs/configuration.md` - Environment configuration
+Selected Performance & Deployment Strategy:
+- Performance: {{CORE_WEB_VITALS_TARGETS}}
+- Optimization: {{OPTIMIZATION_STRATEGIES}}
+- Deployment Platform: {{DEPLOYMENT_PLATFORM}}
+- Monitoring: {{MONITORING_TOOLS}}
+- Analytics: {{ANALYTICS_TOOLS}}
 
----
+Generated Documents:
+✅ docs/performance.md
+✅ docs/operations.md
+✅ specs/configuration.md
+✅ .env.example
 
-## ✅ Validation Checklist
-
-Before finalizing, ensure:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-- [ ] All placeholders replaced with real data
-- [ ] Tech stack consistent across all documents
-- [ ] No contradictions between documents
-- [ ] Framework-specific examples match selected framework
-- [ ] Cross-references correct
-- [ ] AGENT.md references all other documents
-- [ ] ai-instructions.md has NEVER/ALWAYS rules from all phases
+📊 Progress Summary:
 
----
+Phases 1-7 completed:
+✅ project-brief.md (Phase 1)
+✅ docs/ui-structure.md (Phase 2)
+✅ docs/architecture.md (Phase 3)
+✅ ai-instructions.md (Phase 3)
+✅ docs/code-standards.md (Phase 5)
+✅ docs/testing.md (Phase 6)
+✅ docs/performance.md (Phase 7)
+✅ docs/operations.md (Phase 7)
+✅ specs/configuration.md (Phase 7)
+✅ .env.example (Phase 7)
 
-## 🎉 Completion Message
+Remaining:
+⏭️  Phase 8: Project setup & final documentation
 
-```
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎉 FRONTEND BOOTSTRAP COMPLETE!
+🎯 Next: Phase 8 - Project Setup & Final Documentation
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Generated {{DOCUMENT_COUNT}} professional frontend documentation files:
-
-Core Files:
-  ✅ AGENT.md
-  ✅ ai-instructions.md
-  ✅ project-brief.md
-  ✅ README.md
-  ✅ .env.example
-
-Documentation:
-  ✅ docs/architecture.md
-  ✅ docs/components.md
-  ✅ docs/state-management.md
-  ✅ docs/styling.md
-  ✅ docs/api-integration.md
-  ✅ docs/code-standards.md
-  ✅ docs/testing.md
-  ✅ docs/performance.md
-  ✅ docs/operations.md
-  ✅ docs/contributing.md
-
-Specifications:
-  ✅ specs/accessibility.md
-  ✅ specs/configuration.md
+Phase 8 will:
+- 🔍 Detect project state (new vs existing)
+- 🚀 Initialize framework (optional, for new projects)
+- 📝 Generate final docs (components-guide, state-management, contributing)
+- 📖 Generate AGENT.md (master documentation index)
+- 📄 Generate README.md (with intelligent merge if needed)
+- 🤖 Create tool-specific configs (based on AI selection)
 
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-📚 Next Steps:
-
-1. Review the generated documentation
-2. Customize templates as needed
-3. Share AGENT.md with your AI assistant
-4. Start building! 🚀
-
-💡 Tip: Run /flow-docs-sync to regenerate specific documents later
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Continue to Phase 8? (yes/no)
 ```
 
 ---
 
-**Last Updated:** 2025-01-XX
+**Last Updated:** 2025-12-09
 
-**Version:** 1.2.0
-
+**Version:** 2.0.0 (Unified workflow with Phase 8)