ai-qakit 1.0.0

package/templates/.claude/commands/devkit/config/init-frontend.md

@@ -0,0 +1,911 @@
+---
+description: "Initialize frontend project with ultrathink methodology (maximum detail): /init-frontend [optional-context]"
+allowed-tools: Read, Grep, Bash, Write, Edit, AskUserQuestion, Skill
+---
+
+**IMPORTANT:** Analyze the skills catalog and activate the skills that are needed for the task during the process.
+
+---
+
+**Report Protocol**: Follow ./.claude/CLAUDE.md "Sub-Agent Report Generation" protocol before spawning subagents.
+
+# Initializze Frontend Project (Ultrathink)
+
+## ⚠️ Plan Before Executing
+
+**Always create a structured plan and get user approval before making changes.**
+
+1. Run all analysis phases first (5 specialized agents)
+2. Present comprehensive findings
+3. Generate and optimize CLAUDE.md
+4. Customize all commands for this project
+5. Ask for confirmation before each major step
+6. Never make changes without user approval
+
+## Usage
+
+`/config/init-frontend [optional context about the project]`
+
+## Context
+
+- Project context: $ARGUMENTS
+- This command creates a comprehensive CLAUDE.md file by analyzing the frontend repository with multiple specialized agents
+- Then optimizes the CLAUDE.md and customizes all commands for this specific project
+
+## Your Role
+
+You are the Coordinator Agent orchestrating specialized sub-agents to create a comprehensive CLAUDE.md file that will guide Claude in understanding and working with this frontend codebase.
+
+## Sub-Agents
+
+| Agent | Phase | Responsibility |
+|-------|-------|----------------|
+| Frontend Analyst | 1 | Framework, build tools, component architecture |
+| UI/UX Context Gatherer | 2 | Design system, styling, accessibility patterns |
+| Documentation Agent | 3 | Existing docs, component docs, Storybook |
+| Testing Agent | 4 | Test patterns, visual testing, E2E |
+| Git History Analyst | 5 | Evolution, patterns, lessons learned **(OPTIONAL)** |
+| **Claude Optimizer** | 7 | Optimize CLAUDE.md for token efficiency |
+| **Command Customizer** | 8 | Adapt all commands to project structure |
+
+The first 4 agents run during analysis (Phases 1-4). Phase 5 (Git History Analyst) is **optional** - ask the user before running. **Claude Optimizer** runs after generating CLAUDE.md (Phase 7). **Command Customizer** adapts all commands (Phase 8).
+
+## Process
+
+### Phase 1: Frontend Analysis (Frontend Analyst Agent)
+
+1. **Framework Detection**
+   - Core framework (React, Next.js, Remix, Astro)
+   - React version and features (hooks, server components, etc.)
+   - Routing solution (React Router, TanStack Router, Next.js routing)
+   - Meta-framework features (SSR, SSG, ISR, RSC)
+   - TypeScript configuration and strictness
+
+2. **Build & Development Tools**
+   - Build tool (Vite, Webpack, Turbopack, esbuild)
+   - Package manager (npm, pnpm, yarn, bun)
+   - Dev server configuration
+   - Environment variable handling
+   - Path aliases and module resolution
+   - Bundle analysis tools
+
+3. **Project Structure Analysis**
+   - Directory organization pattern
+   - Component organization (flat, grouped by feature, atomic)
+   - Page/route organization
+   - Shared utilities and hooks location
+   - Asset management (images, fonts, icons)
+   - Public vs bundled assets
+
+4. **State Management**
+   - Global state solution (Zustand, Redux, Jotai, Recoil)
+   - Server state management (TanStack Query, SWR, RTK Query)
+   - Form state (React Hook Form, Formik, native)
+   - URL state management
+   - Local storage/session patterns
+
+5. **Data Fetching Patterns**
+   - API client setup (fetch, axios, ky)
+   - TanStack Query configuration
+   - Error handling patterns
+   - Loading state patterns
+   - Caching strategies
+   - Optimistic updates
+
+### Phase 2: UI/UX Context Discovery (UI/UX Context Gatherer Agent)
+
+1. **Styling Architecture**
+   - Styling approach (CSS Modules, Tailwind, styled-components, vanilla-extract)
+   - CSS organization (global, component-scoped, utility-first)
+   - Theme system (CSS variables, theme provider)
+   - Dark mode implementation
+   - Responsive design approach (breakpoints, container queries)
+   - Animation library (Framer Motion, React Spring, CSS)
+
+2. **Component Patterns**
+   - Component file structure (single file, folder pattern)
+   - Naming conventions (PascalCase components, kebab-case files)
+   - Props patterns (interfaces, destructuring, defaults)
+   - Composition patterns (compound components, render props, HOCs)
+   - ForwardRef usage patterns
+   - Display name conventions
+
+3. **Design System & UI Library**
+   - UI component library (shadcn/ui, Radix, Headless UI, MUI, Chakra)
+   - Icon system (Lucide, Heroicons, custom SVGs)
+   - Typography scale and font families
+   - Color palette and semantic tokens
+   - Spacing and sizing scale
+   - Component variants pattern (cva, Stitches variants)
+
+4. **Accessibility Standards**
+   - ARIA patterns in use
+   - Keyboard navigation implementation
+   - Focus management patterns
+   - Screen reader considerations
+   - Color contrast requirements
+   - Accessibility testing tools (axe, Pa11y)
+
+5. **Performance Patterns**
+   - Code splitting strategy (route-based, component-based)
+   - Lazy loading patterns
+   - Image optimization (next/image, custom solutions)
+   - Bundle size management
+   - Core Web Vitals targets
+   - Memoization patterns (useMemo, useCallback, memo)
+
+### Phase 3: Documentation Mining (Documentation Agent)
+
+1. **Component Documentation**
+   - Storybook setup and organization
+   - Component prop documentation (JSDoc, TypeDoc)
+   - Usage examples in stories
+   - Design tokens documentation
+   - Component variants documentation
+
+2. **Project Documentation**
+   - README files and their insights
+   - Architecture decision records
+   - Component guidelines
+   - Styling guidelines
+   - Contribution guidelines
+   - Changelog and migration guides
+
+3. **Implicit Knowledge**
+   - TODO/FIXME patterns in components
+   - Known browser compatibility issues
+   - Performance gotchas
+   - Accessibility workarounds
+   - Third-party library quirks
+   - CSS specificity issues
+
+### Phase 4: Quality Standards (Testing Agent)
+
+1. **Component Testing**
+   - Test framework (Vitest, Jest)
+   - Component testing approach (React Testing Library)
+   - Test file organization and naming
+   - Mock patterns (MSW, manual mocks)
+   - Test utilities and custom renders
+   - Coverage requirements
+
+2. **Visual Testing**
+   - Visual regression testing (Chromatic, Percy, Playwright)
+   - Storybook visual tests
+   - Snapshot testing approach
+   - Screenshot comparison workflow
+
+3. **E2E Testing**
+   - E2E framework (Playwright, Cypress)
+   - Test organization and fixtures
+   - Page object patterns
+   - CI integration
+   - Cross-browser testing
+
+4. **Quality Gates**
+   - Linting rules (ESLint, Biome)
+   - TypeScript strictness
+   - Formatting (Prettier, Biome)
+   - Pre-commit hooks (Husky, lint-staged)
+   - CI/CD checks
+   - Bundle size limits
+   - Lighthouse CI
+
+### Phase 5: Git History Analysis (Git History Analyst Agent) - OPTIONAL
+
+**Before running this phase, ask the user:**
+
+Use AskUserQuestion:
+- question: "Would you like to analyze the git history? This provides insights about code evolution, component changes, and lessons learned, but takes additional time."
+- header: "Git History Analysis"
+- options:
+  - Yes, analyze git history
+  - No, skip git history analysis
+
+**If "No, skip git history analysis":** Skip to Phase 6 (Present Analysis Summary). Mark git history sections as "Not analyzed" in the summary.
+
+**If "Yes, analyze git history":** Proceed with the analysis below.
+
+---
+
+1. **Component Evolution**
+   - Component refactoring patterns
+   - Design system migrations
+   - Styling approach changes
+   - State management migrations
+   - Router migrations
+
+2. **Performance History**
+   - Bundle size trends
+   - Performance optimization commits
+   - Core Web Vitals improvements
+   - Code splitting additions
+
+3. **Breaking Changes**
+   - Major dependency upgrades
+   - API changes in shared components
+   - Design token changes
+   - Routing structure changes
+
+4. **Hot Spots**
+   - Frequently modified components
+   - Bug-prone areas
+   - Complex components with many changes
+   - Stable vs volatile code areas
+
+## Ultrathink Reflection Phase
+
+Synthesize all gathered information to create a comprehensive CLAUDE.md. Each agent should contribute:
+
+**Frontend Analyst Agent:**
+- Project overview and framework details
+- Build tools and development setup
+- State management patterns
+- Data fetching approach
+
+**UI/UX Context Gatherer Agent:**
+- Styling architecture and design system
+- Component patterns and conventions
+- Accessibility standards
+- Performance patterns
+
+**Documentation Agent:**
+- Component documentation approach
+- Hidden context and gotchas
+- Known issues and workarounds
+
+**Testing Agent:**
+- Testing strategies and frameworks
+- Quality gates and CI/CD
+- Visual testing approach
+
+**Git History Analyst Agent:** *(if user opted in)*
+- Historical context and evolution
+- Migration paths and lessons learned
+- Hot spots and stable areas
+
+## Output Format
+
+Generate a CLAUDE.md file adapted for frontend projects:
+
+### Core Sections (Always Include)
+1. **Skill Usage Priority** - Always check skills first
+2. **Repository Overview** - What the project is
+3. **Quick Start** - How to run locally
+4. **Essential Commands** - Dev, build, test, lint
+5. **Project Structure** - Directory layout
+6. **Component Patterns** - How to create components
+7. **Styling Guide** - How styling works
+8. **Code Style** - Naming and formatting
+
+### Frontend-Specific Sections
+- **Routing** - How navigation works
+- **State Management** - Global and server state
+- **Data Fetching** - API calls and caching
+- **Design System** - UI library and tokens
+- **Accessibility** - A11y requirements
+- **Performance** - Optimization patterns
+- **Testing** - Component and E2E tests
+
+### Flexible Template:
+
+```markdown
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Skill Usage Priority
+
+When responding to any request:
+
+1. **FIRST**: Check `.claude/skills/` for relevant skills
+2. **THEN**: Read and follow that skill's SKILL.md instructions
+3. **ONLY** use general knowledge if no skill matches
+
+Available skills are in `.claude/skills/` - always check before responding.
+
+## Repository Overview
+
+[Description of the frontend application, its purpose, and target users]
+
+### Project Statistics
+- Framework: [React/Next.js] [version]
+- Language: TypeScript [version]
+- Styling: [Tailwind/CSS Modules/etc.]
+- State: [Zustand/Redux/etc.]
+- Router: [React Router/TanStack Router/Next.js]
+
+## Quick Start
+
+### Prerequisites
+- Node.js [version]
+- [Package manager] [version]
+
+### Initial Setup
+\`\`\`bash
+# Install dependencies
+[pnpm install]
+
+# Start development server
+[pnpm dev]
+
+# Open browser
+open http://localhost:[port]
+\`\`\`
+
+## Essential Commands
+
+### Development
+\`\`\`bash
+[pnpm dev]              # Start dev server
+[pnpm build]            # Production build
+[pnpm preview]          # Preview production build
+[pnpm lint]             # Run linter
+[pnpm typecheck]        # TypeScript check
+\`\`\`
+
+### Testing
+\`\`\`bash
+[pnpm test]             # Run unit tests
+[pnpm test:coverage]    # With coverage
+[pnpm test:e2e]         # E2E tests
+[pnpm storybook]        # Component explorer
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+src/
+├── app/                 # [Next.js App Router / Routes]
+│   ├── layout.tsx       # Root layout
+│   └── page.tsx         # Home page
+├── components/          # Shared components
+│   ├── ui/              # Base UI components
+│   └── features/        # Feature components
+├── hooks/               # Custom hooks
+├── lib/                 # Utilities and configs
+├── services/            # API services
+├── stores/              # State management
+├── styles/              # Global styles
+└── types/               # TypeScript types
+\`\`\`
+
+## Component Patterns
+
+### File Structure
+[Single file or folder pattern with example]
+
+### Component Template
+\`\`\`typescript
+interface ComponentProps {
+  // Props definition
+}
+
+export function Component({ prop }: ComponentProps) {
+  return (
+    // JSX
+  )
+}
+\`\`\`
+
+### Naming Conventions
+- Components: `PascalCase` (e.g., `UserCard.tsx`)
+- Hooks: `useCamelCase` (e.g., `useAuth.ts`)
+- Utilities: `camelCase` (e.g., `formatDate.ts`)
+- Types: `PascalCase` (e.g., `User`, `ApiResponse`)
+- CSS Modules: `ComponentName.module.css`
+
+## Styling Guide
+
+### Approach
+[Tailwind/CSS Modules/styled-components description]
+
+### Theme System
+[How theming works - CSS variables, theme provider]
+
+### Responsive Design
+[Breakpoint system and approach]
+
+### Dark Mode
+[How dark mode is implemented]
+
+## Routing
+
+### Router: [React Router / TanStack Router / Next.js]
+
+### Route Structure
+[How routes are organized]
+
+### Navigation
+\`\`\`typescript
+// Link component usage
+// Programmatic navigation
+\`\`\`
+
+### Protected Routes
+[Authentication guard pattern]
+
+## State Management
+
+### Global State: [Zustand/Redux/Jotai]
+[How to create and use stores]
+
+### Server State: [TanStack Query/SWR]
+[How to fetch and cache data]
+
+### Form State: [React Hook Form/etc.]
+[Form handling patterns]
+
+## Data Fetching
+
+### API Client
+[How API calls are structured]
+
+### Query Patterns
+\`\`\`typescript
+// Example query hook
+const { data, isLoading } = useQuery({
+  queryKey: ['resource'],
+  queryFn: fetchResource,
+})
+\`\`\`
+
+### Error Handling
+[How errors are handled and displayed]
+
+### Loading States
+[Loading component patterns]
+
+## Design System
+
+### UI Library: [shadcn/ui / Radix / etc.]
+[How to use and extend components]
+
+### Icons: [Lucide / Heroicons / etc.]
+[Icon usage pattern]
+
+### Colors
+[Color palette and semantic tokens]
+
+### Typography
+[Font families and scale]
+
+## Accessibility
+
+### Requirements
+- WCAG 2.1 AA compliance
+- Keyboard navigation support
+- Screen reader compatibility
+
+### Patterns
+- Use semantic HTML
+- Include proper ARIA labels
+- Manage focus appropriately
+- Provide skip links
+
+### Testing
+[Accessibility testing approach]
+
+## Performance
+
+### Code Splitting
+[Route-based and component-based splitting]
+
+### Image Optimization
+[Image component and optimization]
+
+### Bundle Analysis
+\`\`\`bash
+[Bundle analysis command]
+\`\`\`
+
+### Core Web Vitals Targets
+- LCP: < 2.5s
+- FID: < 100ms
+- CLS: < 0.1
+
+## Testing
+
+### Unit Tests
+- Framework: [Vitest/Jest]
+- Location: `*.test.tsx` or `__tests__/`
+- Run: `[pnpm test]`
+
+### Component Tests
+- Use React Testing Library
+- Test user behavior, not implementation
+- Mock external dependencies with MSW
+
+### E2E Tests
+- Framework: [Playwright/Cypress]
+- Location: `e2e/` or `tests/`
+- Run: `[pnpm test:e2e]`
+
+## Hidden Context
+
+### [Non-obvious aspect]
+[Explanation]
+
+### Known Issues
+- [Issue]: [Workaround]
+
+### Browser Support
+[Supported browsers and any quirks]
+
+### Third-Party Quirks
+[Library-specific gotchas]
+
+## Code Style
+
+### ESLint Rules
+[Key rules and rationale]
+
+### Import Order
+[Import organization pattern]
+
+### File Organization
+[How code is organized within files]
+
+## Adding New Features
+
+### New Component
+1. Create file in appropriate location
+2. Add types/interfaces
+3. Implement component
+4. Add tests
+5. Add Storybook story (if applicable)
+6. Export from index
+
+### New Page/Route
+1. Create route file
+2. Add data fetching
+3. Implement page component
+4. Add loading/error states
+5. Update navigation if needed
+
+### New API Integration
+1. Add types for API response
+2. Create service function
+3. Create query hook
+4. Handle loading/error states
+```
+
+---
+
+## Phase 6: Present Analysis Summary
+
+Before creating any files, display the analysis summary and get user approval:
+
+```
+════════════════════════════════════════════════════════════════════
+                    📊 FRONTEND ULTRATHINK ANALYSIS COMPLETE
+════════════════════════════════════════════════════════════════════
+
+📁 PROJECT OVERVIEW
+┌─────────────────────────────────────────────────────────────────┐
+│  Name:          [project name]                                  │
+│  Type:          [SPA / SSR / SSG / Hybrid]                     │
+│  Framework:     [React/Next.js] [version]                       │
+│  Router:        [React Router / TanStack Router / Next.js]     │
+│  Language:      TypeScript [version]                            │
+└─────────────────────────────────────────────────────────────────┘
+
+🎨 UI/UX STACK
+┌─────────────────────────────────────────────────────────────────┐
+│  Styling:       [Tailwind / CSS Modules / etc.]                │
+│  UI Library:    [shadcn/ui / Radix / etc.]                     │
+│  Icons:         [Lucide / Heroicons / etc.]                    │
+│  Animations:    [Framer Motion / CSS / etc.]                   │
+└─────────────────────────────────────────────────────────────────┘
+
+📦 STATE & DATA
+┌─────────────────────────────────────────────────────────────────┐
+│  Global State:  [Zustand / Redux / etc.]                       │
+│  Server State:  [TanStack Query / SWR / etc.]                  │
+│  Forms:         [React Hook Form / etc.]                       │
+│  API Client:    [fetch / axios / ky]                           │
+└─────────────────────────────────────────────────────────────────┘
+
+🔧 DEV TOOLS
+┌─────────────────────────────────────────────────────────────────┐
+│  Build:         [Vite / Webpack / Turbopack]                   │
+│  Package Mgr:   [pnpm / npm / yarn]                            │
+│  Testing:       [Vitest / Jest] + [Playwright / Cypress]       │
+│  Linting:       [ESLint / Biome] + [Prettier / Biome]         │
+└─────────────────────────────────────────────────────────────────┘
+
+📂 KEY INSIGHTS FROM AGENTS
+   Frontend Analyst:   [key finding]
+   UI/UX Gatherer:     [key finding]
+   Documentation:      [key finding]
+   Testing:            [key finding]
+   Git History:        [key finding] OR [Skipped by user]
+
+📝 WILL CREATE/MODIFY:
+   ✨ .claude/CLAUDE.md         (master prompt - frontend focused)
+   🔧 Then optimized by claude-optimizer agent
+   🔄 create-component.md       (customize for [styling approach])
+   🔄 create-page.md            (customize for [router])
+   🔄 create-test.md            (customize for [test framework])
+
+════════════════════════════════════════════════════════════════════
+```
+
+Use AskUserQuestion:
+- question: "Review the analysis above. Should I proceed with generating the CLAUDE.md and customizing commands?"
+- header: "Confirm"
+- options:
+  - Yes, proceed with these settings
+  - No, I need to correct something
+
+If "No", wait for corrections and re-analyze.
+
+---
+
+## Phase 7: Optimize CLAUDE.md (Claude Optimizer Agent)
+
+After generating the comprehensive CLAUDE.md, invoke the **claude-optimizer** sub-agent from `.claude/agents/claude-optimizer.md`.
+
+### Optimizer Objectives
+
+1. **Token Audit**
+   - Count current tokens (target: under 5K, ideal: 2.5-3.5K)
+   - Identify token-heavy sections
+   - Flag redundant/verbose content
+
+2. **Content Compression**
+   - Transform verbose instructions to precise directives
+   - Consolidate without losing project-specific information
+   - Convert prose to tables/bullets where appropriate
+   - **PRESERVE all project context** (paths, commands, tools, components)
+   - **DO NOT remove or compress the Skill Usage Priority section**
+
+3. **Structure Optimization**
+   - Critical-first layout (component patterns, styling at top)
+   - Clear visual hierarchy with emoji headers
+   - Code blocks for all commands
+   - Strategic emphasis hierarchy:
+     ```
+     🔴 CRITICAL - Accessibility, security
+     🟡 MANDATORY - Component patterns, styling
+     🟢 IMPORTANT - Testing, performance
+     ⚪ RECOMMENDED - Best practices
+     ```
+
+### Optimizer Output
+
+Display optimization report:
+```
+📊 CLAUDE.md Optimization Results
+─────────────────────────────────
+Before: X tokens → After: Y tokens (Z% reduction)
+Clarity Score: X/10 → Y/10
+Critical instructions in first 500 tokens: ✅
+
+High-Impact Changes:
+1. [Change] → Saved X tokens
+2. [Change] → Improved clarity
+3. [Change] → Enhanced structure
+```
+
+---
+
+## Phase 8: Customize Commands (Command Customizer Agent)
+
+Adapt all frontend commands to match this project's specific structure, conventions, and tools.
+
+### 8.1 Customize Frontend Commands
+
+Rewrite each command using Write tool to include ONLY the detected tools/frameworks:
+
+| Command | Customize For |
+|---------|---------------|
+| `create-component.md` | [detected styling], actual component paths, actual patterns |
+| `create-page.md` | [detected router], actual route structure, data fetching patterns |
+| `create-test.md` | [detected test framework], actual test paths, actual commands |
+| `create-form.md` | [detected form library], validation library, UI components |
+| `create-table.md` | [detected table library], pagination approach, styling |
+| `create-api-integration.md` | [detected data fetching library], API client, type patterns |
+| `create-storybook.md` | [Storybook config], story format, addon patterns |
+
+### 8.2 Command Customization Guidelines
+
+For each command:
+
+1. **Read the current command** from `.claude/commands/`
+2. **Extract project-specific values** from `.claude/CLAUDE.md`:
+   - Router and routing patterns
+   - Styling approach and conventions
+   - Component file structure
+   - Test framework and patterns
+3. **Rewrite the command** to include ONLY:
+   - The specific framework detected (remove all others)
+   - Actual directory paths from this project
+   - Actual commands from this project
+   - Reference to `.claude/CLAUDE.md` for context
+4. **Remove generic examples** and replace with project-specific ones
+
+### 8.3 Example Customization
+
+**Before (generic create-component.md):**
+```markdown
+## Styling
+- CSS Modules
+- Tailwind with cva
+- styled-components
+```
+
+**After (customized for Tailwind + shadcn/ui project):**
+```markdown
+## Styling: Tailwind + shadcn/ui
+
+Reference: `.claude/CLAUDE.md` for project conventions
+
+### Component Location
+- UI components: `src/components/ui/`
+- Feature components: `src/components/features/`
+
+### Variant Pattern (using cva)
+\`\`\`typescript
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const buttonVariants = cva('base-classes', {
+  variants: {
+    variant: { primary: '...', secondary: '...' },
+    size: { sm: '...', md: '...', lg: '...' },
+  },
+  defaultVariants: { variant: 'primary', size: 'md' },
+})
+\`\`\`
+```
+
+---
+
+## Phase 9: Final Summary
+
+```
+════════════════════════════════════════════════════════════════════
+                    ✅ FRONTEND ULTRATHINK COMPLETE
+════════════════════════════════════════════════════════════════════
+
+📄 MASTER PROMPT: .claude/CLAUDE.md
+┌─────────────────────────────────────────────────────────────────┐
+│  Project:     [name]                                            │
+│  Framework:   [React/Next.js] [version]                         │
+│  Router:      [React Router / TanStack Router]                  │
+│  Styling:     [Tailwind / CSS Modules]                          │
+│  State:       [Zustand / Redux] + [TanStack Query]              │
+│  Testing:     [Vitest] + [Playwright]                           │
+└─────────────────────────────────────────────────────────────────┘
+
+🔧 OPTIMIZATION RESULTS:
+┌─────────────────────────────────────────────────────────────────┐
+│  Tokens:      [before] → [after] ([X]% reduction)               │
+│  Clarity:     [X]/10 → [Y]/10                                   │
+│  Critical instructions in first 20%: ✅                         │
+└─────────────────────────────────────────────────────────────────┘
+
+📝 CUSTOMIZED COMMANDS:
+   ✅ create-component.md      → [styling approach] + actual paths
+   ✅ create-page.md           → [router] + actual patterns
+   ✅ create-test.md           → [test framework] + actual commands
+   ✅ create-form.md           → [form library] + validation + UI
+   ✅ create-table.md          → [table library] + pagination
+   ✅ create-api-integration.md → [data fetching] + API client
+   ✅ create-storybook.md      → [Storybook config] + addons
+
+📂 FRONTEND INSIGHTS CAPTURED:
+   - [Key insight from Frontend Analyst]
+   - [Key insight from UI/UX Gatherer - design system]
+   - [Key insight from Testing - coverage patterns]
+   - [Git history insight] OR [Git history: Skipped]
+
+════════════════════════════════════════════════════════════════════
+```
+
+---
+
+## Phase 10: Validation and Feedback Loop
+
+### Validation Questions
+
+Use AskUserQuestion:
+- question: "Do you have any additional requirements or corrections?"
+- header: "Feedback"
+- options:
+  - No, everything looks good
+  - Yes, I have additional requirements
+
+### If "Yes, I have additional requirements"
+
+Wait for input, then:
+
+1. **Parse requirements**
+2. **Update `.claude/CLAUDE.md`** with:
+   - Custom component patterns
+   - Design system specifics
+   - Team preferences
+   - Special considerations
+3. **Re-optimize** with claude-optimizer if significant changes
+4. **Update relevant commands** if needed
+5. **Display updates**:
+   ```
+   📝 Updated based on your requirements:
+      ✅ .claude/CLAUDE.md - Added [description]
+      ✅ [command].md - Updated [description]
+   ```
+6. **Ask again** - repeat until "No, we're done"
+
+### If "No, everything looks good"
+
+```
+════════════════════════════════════════════════════════════════════
+                         🎉 FRONTEND SETUP COMPLETE!
+════════════════════════════════════════════════════════════════════
+
+Your frontend project is now configured with comprehensive AI-assisted development.
+
+📖 WHAT WAS CREATED:
+   • .claude/CLAUDE.md - Comprehensive master prompt (optimized)
+   • Customized commands for YOUR specific frontend stack
+   • Component and page generation tailored to your patterns
+
+🚀 QUICK START:
+   /create-component Button with primary and secondary variants
+   /create-page user list with pagination
+   /create-form UserForm with email, name, and role fields
+   /create-table UsersTable with sorting and pagination
+   /create-api-integration users CRUD operations
+   /create-storybook Button
+   /create-test src/components/ui/Button.tsx
+
+💡 All commands reference .claude/CLAUDE.md and use YOUR project's
+   actual paths, conventions, and tools.
+
+📊 FRONTEND INSIGHTS CAPTURED:
+   • Component architecture and patterns
+   • Styling approach and design tokens
+   • State management patterns
+   • Testing strategies
+   [If git history was analyzed:]
+   • Component evolution patterns
+   • Hot spots for careful changes
+
+Happy coding! 🚀
+════════════════════════════════════════════════════════════════════
+```
+
+---
+
+## Notes
+
+- Focus on React ecosystem (React, Next.js, React Router, TanStack Router)
+- Document component patterns thoroughly - this is critical for frontend
+- Include accessibility requirements prominently
+- Cover styling approach in detail
+- Document state management patterns clearly
+- Include performance optimization patterns
+- Cover testing strategies for components and E2E
+- Document design system and UI library usage
+- Include responsive design patterns
+- Cover dark mode implementation if present
+
+**IMPORTANT**: Adapt the template to the specific frontend project. A Next.js app needs different sections than a React SPA with React Router. Select relevant sections based on the actual stack detected.
+
+---
+
+## Begin Now
+
+Execute the phases in order:
+
+1. **Phases 1-4**: Run first 4 analysis agents for frontend-specific information
+2. **Phase 5 (Optional)**: Ask user if they want git history analysis
+3. **Phase 6**: Present analysis summary and get user confirmation
+4. **Generate CLAUDE.md**: Create comprehensive master prompt using the template
+5. **Phase 7**: Invoke claude-optimizer to optimize the CLAUDE.md
+6. **Phase 8**: Customize all commands for this project's specific stack
+7. **Phase 9**: Display final summary
+8. **Phase 10**: Handle any additional requirements
+
+Use the appropriate tools (Bash, Read, Grep) to gather information. If anything is unclear, ask questions using AskUserQuestion. Never make changes without user confirmation.
+