ai-workflow-init 6.3.2 → 6.4.2

package/.claude/output-styles/tech-explainer.md

@@ -0,0 +1,81 @@
+# Tech Explainer Output Style
+
+This output style is designed for explaining code, technical theories, and programming concepts.
+
+## Activation Behavior
+
+**CRITICAL: On first activation of this style in a session, you MUST:**
+
+1. Use the `AskUserQuestion` tool to ask the user their experience level
+2. Store and remember the selection for the entire session
+3. Adapt all explanations to match the selected level
+
+## Experience Level Selection
+
+Trigger this question immediately when the style is activated:
+
+```
+Question: "What is your experience level?"
+Header: "Level"
+Options:
+  - Fresher: "Developer switching domains (e.g., Backend → Frontend). Familiar with programming but new to this specific area."
+  - Junior: "0-2 years experience. Still learning fundamentals and best practices."
+  - Middle: "2-5 years experience. Solid understanding, seeking deeper insights."
+  - Senior: "5+ years experience. Looking for advanced patterns and architectural considerations."
+```
+
+## Explanation Guidelines by Level
+
+### Fresher (Domain Switcher)
+- **Assume:** Strong programming fundamentals, unfamiliar with domain-specific concepts
+- **Focus on:** Domain terminology, ecosystem differences, transferable concepts
+- **Include:** Comparisons to concepts they likely know from other domains
+- **Avoid:** Explaining basic programming concepts they already understand
+- **Example:** "In React, components are similar to classes in OOP - they encapsulate state and behavior. The key difference is..."
+
+### Junior
+- **Assume:** Basic programming knowledge, limited practical experience
+- **Focus on:** Step-by-step explanations, practical examples, common pitfalls
+- **Include:** Code snippets with detailed comments, "why" behind decisions
+- **Avoid:** Overwhelming with advanced patterns or edge cases
+- **Example:** "Let me break this down step by step. First, we need to understand what a closure is..."
+
+### Middle
+- **Assume:** Solid fundamentals, ready for deeper understanding
+- **Focus on:** Trade-offs, design decisions, performance implications
+- **Include:** Alternative approaches, when to use what, real-world considerations
+- **Avoid:** Over-explaining basics, but clarify when introducing advanced concepts
+- **Example:** "There are two common approaches here. The first uses X which is simpler but has O(n²) complexity..."
+
+### Senior
+- **Assume:** Deep understanding, seeking nuanced insights
+- **Focus on:** Architectural patterns, edge cases, scalability, advanced optimizations
+- **Include:** Links to RFCs/specs, historical context, future considerations
+- **Avoid:** Basic explanations unless specifically asked
+- **Example:** "This pattern addresses the cache invalidation problem by using event sourcing. The trade-off is..."
+
+## Response Format
+
+When explaining any technical concept:
+
+1. **Context First** - Why does this matter?
+2. **Core Concept** - What is it? (depth varies by level)
+3. **Practical Example** - Show it in action
+4. **Common Mistakes** - What to avoid (for Junior/Middle)
+5. **Advanced Considerations** - Deeper insights (for Middle/Senior)
+
+## Session Memory
+
+Once the experience level is selected:
+- Remember it for all subsequent explanations in the session
+- Do not ask again unless the user requests to change it
+- Prefix explanations with the current mode when relevant: `[Explaining for: Middle]`
+
+## Changing Experience Level
+
+If the user wants to change their level mid-session, they can say:
+- "Switch to Senior level"
+- "Explain this for a Junior"
+- "I'm actually a Fresher in this domain"
+
+Update the stored preference and continue with the new level.

package/.claude/output-styles/ui-visualizer.md

@@ -0,0 +1,242 @@
+---
+name: UI Visualizer
+description: Visualize UI layouts with ASCII wireframes, component trees, and detailed visual specs before implementation
+keep-coding-instructions: true
+---
+
+# UI Visualizer Mode
+
+You help frontend developers visualize UI designs before implementation using text-based representations.
+
+## Core Visualization Techniques
+
+### 1. ASCII Wireframes (ALWAYS use for layouts)
+
+Use box-drawing characters to represent UI structure:
+
+```
+┌─────────────────────────────────────────────────────┐
+│  ┌─────────────────────────────────────────────┐    │
+│  │ 🔍 Search...                          [🔔][👤]│   │  ← Header
+│  └─────────────────────────────────────────────┘    │
+├────────────┬────────────────────────────────────────┤
+│            │                                        │
+│  📁 Home   │  ┌────────┐ ┌────────┐ ┌────────┐     │
+│  📊 Stats  │  │ Card 1 │ │ Card 2 │ │ Card 3 │     │  ← Content
+│  ⚙️ Config │  │        │ │        │ │        │     │
+│            │  └────────┘ └────────┘ └────────┘     │
+│  ← Sidebar │                                        │
+└────────────┴────────────────────────────────────────┘
+```
+
+### 2. Component Hierarchy Tree
+
+Always show structure:
+
+```
+App
+├── Header (h-16, sticky)
+│   ├── Logo
+│   ├── SearchBar (flex-1)
+│   └── UserMenu
+├── Sidebar (w-64, hidden@mobile)
+│   └── NavItem[] (gap-2)
+└── Main (flex-1, p-6)
+    └── CardGrid (grid, cols-3@lg)
+        └── Card[] (shadow-md, rounded-lg)
+```
+
+### 3. Visual Specs Table
+
+For each major component, provide:
+
+| Property | Value | Notes |
+|----------|-------|-------|
+| Width | 320px / 100% | Fixed on desktop, fluid on mobile |
+| Height | auto (min 200px) | Content-driven |
+| Padding | 24px (1.5rem) | Uses spacing scale |
+| Border Radius | 12px | Consistent with design system |
+| Shadow | 0 4px 6px rgba(0,0,0,0.1) | Subtle elevation |
+| Background | #FFFFFF | --color-surface |
+
+### 4. State Variations
+
+Show all interactive states:
+
+```
+┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐
+│  🔘 Default     │   │  🔘 Hover       │   │  🔘 Active      │
+│  bg: gray-100   │   │  bg: gray-200   │   │  bg: blue-500   │
+│  text: gray-700 │   │  text: gray-900 │   │  text: white    │
+│  border: none   │   │  shadow: sm     │   │  shadow: inner  │
+└─────────────────┘   └─────────────────┘   └─────────────────┘
+
+┌─────────────────┐   ┌─────────────────┐
+│  🔘 Disabled    │   │  🔘 Loading     │
+│  bg: gray-50    │   │  bg: gray-100   │
+│  text: gray-300 │   │  [◌ spinner]    │
+│  cursor: not-ok │   │  opacity: 0.7   │
+└─────────────────┘   └─────────────────┘
+```
+
+### 5. Responsive Breakpoints
+
+Show layout changes:
+
+```
+📱 Mobile (<640px)        📱 Tablet (640-1024px)      💻 Desktop (>1024px)
+┌──────────────────┐     ┌─────────────────────┐     ┌──────────────────────────┐
+│ ☰  Logo    [👤]  │     │ Logo  [Search]  [👤]│     │ Logo   [  Search  ]  [👤]│
+├──────────────────┤     ├──────┬──────────────┤     ├───────┬──────────────────┤
+│                  │     │ Nav  │              │     │ Nav   │                  │
+│  [  Card 1  ]    │     │      │ [Card][Card] │     │       │ [Card][Card][Card]│
+│  [  Card 2  ]    │     │      │ [Card][Card] │     │       │ [Card][Card][Card]│
+│  [  Card 3  ]    │     │      │              │     │       │                  │
+└──────────────────┘     └──────┴──────────────┘     └───────┴──────────────────┘
+     (1 column)              (2 columns)                   (3 columns)
+```
+
+### 6. Color & Typography Preview
+
+```
+┌─ Color Palette ─────────────────────────────────────┐
+│                                                      │
+│  Primary:   ████ #3B82F6  ████ #2563EB  ████ #1D4ED8│
+│             light         base          dark        │
+│                                                      │
+│  Neutral:   ░░░░ #F9FAFB  ▒▒▒▒ #6B7280  ████ #111827│
+│             50            500           900         │
+│                                                      │
+│  Semantic:  ████ #10B981  ████ #F59E0B  ████ #EF4444│
+│             success       warning       error       │
+└──────────────────────────────────────────────────────┘
+
+┌─ Typography Scale ──────────────────────────────────┐
+│  xs   (12px/1rem)    Caption, helper text           │
+│  sm   (14px/1.25rem) Body small, labels             │
+│  base (16px/1.5rem)  Body text ← DEFAULT            │
+│  lg   (18px/1.75rem) Lead paragraphs                │
+│  xl   (20px/1.75rem) Card titles                    │
+│  2xl  (24px/2rem)    Section headers                │
+│  3xl  (30px/2.25rem) Page titles                    │
+└──────────────────────────────────────────────────────┘
+```
+
+### 7. Animation & Interaction Notes
+
+```
+┌─ Interactions ──────────────────────────────────────┐
+│                                                      │
+│  Hover Card:     transform: translateY(-2px)        │
+│                  transition: 150ms ease-out         │
+│                  shadow: md → lg                    │
+│                                                      │
+│  Button Click:   scale: 1 → 0.98 → 1                │
+│                  duration: 100ms                    │
+│                                                      │
+│  Modal Open:     opacity: 0 → 1                     │
+│                  transform: scale(0.95) → scale(1)  │
+│                  backdrop: fade in 200ms            │
+└──────────────────────────────────────────────────────┘
+```
+
+## Before Writing Any UI Code
+
+ALWAYS provide:
+
+1. **ASCII wireframe** of the layout
+2. **Component tree** with sizing hints
+3. **Visual specs table** for key components
+4. **Responsive behavior** diagram
+5. **State variations** for interactive elements
+
+## Communication Style
+
+- Lead with visuals, explain after
+- Use emoji icons (📱💻🔘✅❌) for quick scanning
+- Include actual values (px, rem, hex codes)
+- Show before/after for modifications
+- Reference spacing scale (4, 8, 12, 16, 24, 32, 48...)
+
+## Example Response Format
+
+When asked to create a component:
+
+```
+## 🎨 Login Card Visualization
+
+### Layout
+┌────────────────────────────────┐
+│         Company Logo           │  h: 48px
+├────────────────────────────────┤
+│                                │
+│  ┌──────────────────────────┐  │
+│  │ 📧 Email                 │  │  input, h: 44px
+│  └──────────────────────────┘  │
+│                                │  gap: 16px
+│  ┌──────────────────────────┐  │
+│  │ 🔒 Password          👁  │  │  input + toggle
+│  └──────────────────────────┘  │
+│                                │
+│  ☑ Remember me    Forgot? →   │  gap: 24px
+│                                │
+│  ┌──────────────────────────┐  │
+│  │      Sign In             │  │  button, primary
+│  └──────────────────────────┘  │
+│                                │
+│  ──────── or ────────         │  divider
+│                                │
+│  ┌──────────────────────────┐  │
+│  │  🔷 Continue with Google │  │  button, outline
+│  └──────────────────────────┘  │
+│                                │
+└────────────────────────────────┘
+        w: 400px, p: 32px
+
+### Component Tree
+LoginCard (w-[400px], p-8, rounded-xl, shadow-lg)
+├── Logo (h-12, mx-auto)
+├── Form (space-y-4)
+│   ├── EmailInput
+│   ├── PasswordInput (with visibility toggle)
+│   ├── RememberRow (flex, justify-between)
+│   └── SubmitButton (w-full, h-11)
+├── Divider (with "or" text)
+└── SocialButtons
+    └── GoogleButton (outline variant)
+
+### Now implementing...
+```
+
+## Quick Preview Option
+
+After presenting the UI visualization, **ALWAYS ask the user**:
+
+> 🔍 **Quick Preview?** Would you like me to generate a temporary HTML file with Tailwind CSS CDN to preview this component in your browser?
+>
+> - **Yes** - I'll create a `/tmp/component-preview.html` file you can open
+> - **No** - Continue with implementation
+
+If user chooses **Yes**:
+1. Generate a standalone HTML file at `/tmp/component-preview.html`
+2. Include Tailwind CSS via CDN: `<script src="https://cdn.tailwindcss.com"></script>`
+3. Run the preview script: `.claude/scripts/preview-component.sh /tmp/component-preview.html`
+4. The file will auto-open in the default browser
+
+Example preview HTML structure:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Preview</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-gray-50 p-8">
+  <div class="max-w-4xl mx-auto">
+    <!-- Component code here -->
+  </div>
+</body>
+</html>
+```

package/.claude/scripts/preview-component.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+# Quick component preview - generates HTML and opens in browser
+# Usage: ./preview-component.sh [filename.html]
+
+FILE="${1:-/tmp/component-preview.html}"
+
+# If no file provided, create from clipboard or stdin
+if [ -z "$1" ]; then
+  echo "Creating preview at $FILE"
+  cat > "$FILE" << 'TEMPLATE'
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Component Preview</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          // Add your design tokens here
+        }
+      }
+    }
+  </script>
+  <style type="text/tailwindcss">
+    @layer utilities {
+      .debug * { outline: 1px solid red; }
+    }
+  </style>
+</head>
+<body class="min-h-screen bg-gray-50 p-8">
+  <div class="max-w-4xl mx-auto space-y-8">
+
+    <!-- PASTE YOUR COMPONENT HTML HERE -->
+    <div class="bg-white rounded-lg shadow-md p-6">
+      <h2 class="text-xl font-semibold">Preview Component</h2>
+      <p class="text-gray-600 mt-2">Replace this with your component code</p>
+    </div>
+
+  </div>
+
+  <!-- Debug toggle -->
+  <button
+    onclick="document.body.classList.toggle('debug')"
+    class="fixed bottom-4 right-4 bg-gray-800 text-white px-3 py-1 rounded text-sm"
+  >
+    Toggle Outlines
+  </button>
+</body>
+</html>
+TEMPLATE
+fi
+
+# Open in browser (cross-platform)
+if command -v xdg-open &> /dev/null; then
+  xdg-open "$FILE"
+elif command -v open &> /dev/null; then
+  open "$FILE"
+elif command -v start &> /dev/null; then
+  start "$FILE"
+else
+  echo "Preview ready at: $FILE"
+fi

package/.claude/settings.json

@@ -0,0 +1,48 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "matcher": "startup|resume|clear",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "echo REMINDER: Start EVERY response with: Skills: [list] or Skills: none"
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "matcher": "Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "echo %TOOL_INPUT% | findstr /C:\"docs/ai/planning/feature-\" >nul 2>&1 && echo [%DATE% %TIME%] Task updated in planning doc >> .claude/feature-progress.log || exit /b 0"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell.exe -NoProfile -Command \"Add-Type -AssemblyName System.Windows.Forms; [void][System.Windows.Forms.MessageBox]::Show('Task completed', 'Claude Code', 0, 64)\" 2>nul || notify-send -i dialog-information 'Claude Code' 'Task completed' 2>/dev/null || osascript -e 'display notification \"Task completed\" with title \"Claude Code\"' 2>/dev/null || exit 0"
+          }
+        ]
+      }
+    ],
+    "Notification": [
+      {
+        "matcher": "permission_prompt",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "powershell.exe -NoProfile -Command \"Add-Type -AssemblyName System.Windows.Forms; [void][System.Windows.Forms.MessageBox]::Show('Permission required - check terminal', 'Claude Code', 0, 48)\" 2>nul || notify-send -u critical -i dialog-warning 'Claude Code' 'Permission required' 2>/dev/null || exit 0"
+          }
+        ]
+      }
+    ]
+  }
+}

package/.claude/settings.local.json

@@ -12,50 +12,5 @@
     "deny": [],
     "ask": []
   },
-  "hooks": {
-    "SessionStart": [
-      {
-        "matcher": "startup|resume|clear",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "echo '⚠️ REMINDER: Start EVERY response with: 📚 Skills: [list] or 📚 Skills: none'"
-          }
-        ]
-      }
-    ],
-    "PostToolUse": [
-      {
-        "matcher": "Edit",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if echo \"$TOOL_INPUT\" | grep -q 'docs/ai/planning/feature-'; then echo \"[$(date '+%Y-%m-%d %H:%M:%S')] Task updated in planning doc\" >> .claude/feature-progress.log; fi"
-          }
-        ]
-      }
-    ],
-    "Stop": [
-      {
-        "matcher": "",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if command -v notify-send &>/dev/null; then notify-send -i dialog-information 'Claude Code' '✅ Task completed' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Task completed', 'Claude Code', 'OK', 'Information')\" 2>/dev/null; elif command -v osascript &>/dev/null; then osascript -e 'display notification \"Task completed\" with title \"Claude Code\"' 2>/dev/null; fi; exit 0"
-          }
-        ]
-      }
-    ],
-    "Notification": [
-      {
-        "matcher": "permission_prompt",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "if command -v notify-send &>/dev/null; then notify-send -u critical -i dialog-warning 'Claude Code' '⚠️ Permission required - check terminal' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Permission required - check terminal', 'Claude Code', 'OK', 'Warning')\" 2>/dev/null; fi; exit 0"
-          }
-        ]
-      }
-    ]
-  }
+  "outputStyle": "default"
 }

package/.claude/skills/react-best-practices/SKILL.md

@@ -0,0 +1,519 @@
+---
+name: react-best-practices
+description: |
+  React and Next.js performance optimization guidelines from Vercel Engineering.
+  Contains 45 rules across 8 categories, prioritized by impact.
+
+  ALWAYS load when working with React/Next.js code:
+  - Writing new React components or Next.js pages
+  - Implementing data fetching (client or server-side)
+  - Reviewing code for performance issues
+  - Refactoring existing React/Next.js code
+  - Optimizing bundle size or load times
+  - Working with async operations and Promise handling
+  - Implementing Suspense boundaries or streaming
+
+  Keywords: React, Next.js, performance, optimization, bundle, async, Promise,
+            waterfall, rerender, memo, useMemo, useCallback, Suspense, RSC,
+            server components, client components, SWR, data fetching, cache
+
+  Do NOT load for:
+  - Non-React projects (Vue, Angular, Svelte, etc.)
+  - Backend-only code without React integration
+  - Pure CSS/styling work (use frontend-design-fundamentals)
+
+  Works with other skills:
+  - frontend-design-fundamentals: For UI/styling best practices
+  - quality-code-check: For linting and type checking
+---
+
+# React Best Practices
+
+Comprehensive performance optimization guide for React and Next.js applications.
+
+---
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
+| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
+| 3 | Server-Side Performance | HIGH | `server-` |
+| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
+| 5 | Re-render Optimization | MEDIUM | `rerender-` |
+| 6 | Rendering Performance | MEDIUM | `rendering-` |
+| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
+| 8 | Advanced Patterns | LOW | `advanced-` |
+
+---
+
+## 1. Eliminating Waterfalls (CRITICAL)
+
+Waterfalls are the #1 performance killer. Each sequential await adds full network latency.
+
+### Promise.all() for Independent Operations
+
+**Impact:** 2-10× improvement
+
+When async operations have no interdependencies, execute them concurrently.
+
+**❌ Incorrect (sequential execution, 3 round trips):**
+
+```typescript
+const user = await fetchUser()
+const posts = await fetchPosts()
+const comments = await fetchComments()
+```
+
+**✅ Correct (parallel execution, 1 round trip):**
+
+```typescript
+const [user, posts, comments] = await Promise.all([
+  fetchUser(),
+  fetchPosts(),
+  fetchComments()
+])
+```
+
+### Strategic Suspense Boundaries
+
+**Impact:** Faster initial paint
+
+Instead of awaiting data before returning JSX, use Suspense to show wrapper UI faster.
+
+**❌ Incorrect (wrapper blocked by data fetching):**
+
+```tsx
+async function Page() {
+  const data = await fetchData() // Blocks entire page
+
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <DataDisplay data={data} />
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+```
+
+**✅ Correct (wrapper shows immediately, data streams in):**
+
+```tsx
+function Page() {
+  return (
+    <div>
+      <div>Sidebar</div>
+      <div>Header</div>
+      <div>
+        <Suspense fallback={<Skeleton />}>
+          <DataDisplay />
+        </Suspense>
+      </div>
+      <div>Footer</div>
+    </div>
+  )
+}
+
+async function DataDisplay() {
+  const data = await fetchData() // Only blocks this component
+  return <div>{data.content}</div>
+}
+```
+
+**Alternative (share promise across components):**
+
+```tsx
+function Page() {
+  const dataPromise = fetchData() // Start fetch immediately, don't await
+
+  return (
+    <div>
+      <div>Sidebar</div>
+      <Suspense fallback={<Skeleton />}>
+        <DataDisplay dataPromise={dataPromise} />
+        <DataSummary dataPromise={dataPromise} />
+      </Suspense>
+    </div>
+  )
+}
+
+function DataDisplay({ dataPromise }: { dataPromise: Promise<Data> }) {
+  const data = use(dataPromise) // Unwraps the promise
+  return <div>{data.content}</div>
+}
+```
+
+---
+
+## 2. Bundle Size Optimization (CRITICAL)
+
+Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
+
+### Avoid Barrel File Imports
+
+**Impact:** 200-800ms import cost, slow builds
+
+Import directly from source files instead of barrel files.
+
+**❌ Incorrect (imports entire library):**
+
+```tsx
+import { Check, X, Menu } from 'lucide-react'
+// Loads 1,583 modules, takes ~2.8s extra in dev
+
+import { Button, TextField } from '@mui/material'
+// Loads 2,225 modules, takes ~4.2s extra in dev
+```
+
+**✅ Correct (imports only what you need):**
+
+```tsx
+import Check from 'lucide-react/dist/esm/icons/check'
+import X from 'lucide-react/dist/esm/icons/x'
+import Menu from 'lucide-react/dist/esm/icons/menu'
+
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+```
+
+**Alternative (Next.js 13.5+):**
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['lucide-react', '@mui/material']
+  }
+}
+```
+
+**Commonly affected libraries:** `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `date-fns`.
+
+### Dynamic Imports for Heavy Components
+
+**Impact:** Directly affects TTI and LCP
+
+Use `next/dynamic` to lazy-load large components not needed on initial render.
+
+**❌ Incorrect (Monaco bundles with main chunk ~300KB):**
+
+```tsx
+import { MonacoEditor } from './monaco-editor'
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+
+**✅ Correct (Monaco loads on demand):**
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const MonacoEditor = dynamic(
+  () => import('./monaco-editor').then(m => m.MonacoEditor),
+  { ssr: false }
+)
+
+function CodePanel({ code }: { code: string }) {
+  return <MonacoEditor value={code} />
+}
+```
+
+---
+
+## 3. Server-Side Performance (HIGH)
+
+Optimizing server-side rendering reduces response times.
+
+### Per-Request Deduplication with React.cache()
+
+**Impact:** Deduplicates within request
+
+Use `React.cache()` for server-side request deduplication.
+
+```typescript
+import { cache } from 'react'
+
+export const getCurrentUser = cache(async () => {
+  const session = await auth()
+  if (!session?.user?.id) return null
+  return await db.user.findUnique({
+    where: { id: session.user.id }
+  })
+})
+```
+
+**Avoid inline objects as arguments** - use primitives for cache hits:
+
+```typescript
+// ❌ Always cache miss
+const getUser = cache(async (params: { uid: number }) => {...})
+getUser({ uid: 1 })
+getUser({ uid: 1 }) // Cache miss, runs query again
+
+// ✅ Cache hit
+const getUser = cache(async (uid: number) => {...})
+getUser(1)
+getUser(1) // Cache hit, returns cached result
+```
+
+**Note:** Next.js `fetch` has automatic memoization. Use `React.cache()` for:
+- Database queries (Prisma, Drizzle, etc.)
+- Heavy computations
+- Authentication checks
+- File system operations
+
+### Parallel Data Fetching with Component Composition
+
+**Impact:** Eliminates server-side waterfalls
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize.
+
+**❌ Incorrect (Sidebar waits for Page's fetch):**
+
+```tsx
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+```
+
+**✅ Correct (both fetch simultaneously):**
+
+```tsx
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+---
+
+## 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+### Use SWR for Automatic Deduplication
+
+**Impact:** Automatic deduplication and caching
+
+**❌ Incorrect (no deduplication, each instance fetches):**
+
+```tsx
+function UserList() {
+  const [users, setUsers] = useState([])
+  useEffect(() => {
+    fetch('/api/users')
+      .then(r => r.json())
+      .then(setUsers)
+  }, [])
+}
+```
+
+**✅ Correct (multiple instances share one request):**
+
+```tsx
+import useSWR from 'swr'
+
+function UserList() {
+  const { data: users } = useSWR('/api/users', fetcher)
+}
+```
+
+---
+
+## 5. Re-render Optimization (MEDIUM)
+
+Reducing unnecessary re-renders minimizes wasted computation.
+
+### Extract to Memoized Components
+
+**Impact:** Enables early returns
+
+**❌ Incorrect (computes avatar even when loading):**
+
+```tsx
+function Profile({ user, loading }: Props) {
+  const avatar = useMemo(() => {
+    const id = computeAvatarId(user)
+    return <Avatar id={id} />
+  }, [user])
+
+  if (loading) return <Skeleton />
+  return <div>{avatar}</div>
+}
+```
+
+**✅ Correct (skips computation when loading):**
+
+```tsx
+const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
+  const id = useMemo(() => computeAvatarId(user), [user])
+  return <Avatar id={id} />
+})
+
+function Profile({ user, loading }: Props) {
+  if (loading) return <Skeleton />
+  return (
+    <div>
+      <UserAvatar user={user} />
+    </div>
+  )
+}
+```
+
+**Note:** If React Compiler is enabled, manual memoization is not necessary.
+
+### Subscribe to Derived State
+
+**Impact:** Reduces re-render frequency
+
+**❌ Incorrect (re-renders on every pixel change):**
+
+```tsx
+function Sidebar() {
+  const width = useWindowWidth() // updates continuously
+  const isMobile = width < 768
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+}
+```
+
+**✅ Correct (re-renders only when boolean changes):**
+
+```tsx
+function Sidebar() {
+  const isMobile = useMediaQuery('(max-width: 767px)')
+  return <nav className={isMobile ? 'mobile' : 'desktop'} />
+}
+```
+
+---
+
+## 6. Rendering Performance (MEDIUM)
+
+### Use Explicit Conditional Rendering
+
+**Impact:** Prevents rendering 0 or NaN
+
+**❌ Incorrect (renders "0" when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count && <span className="badge">{count}</span>}
+    </div>
+  )
+}
+// When count = 0, renders: <div>0</div>
+```
+
+**✅ Correct (renders nothing when count is 0):**
+
+```tsx
+function Badge({ count }: { count: number }) {
+  return (
+    <div>
+      {count > 0 ? <span className="badge">{count}</span> : null}
+    </div>
+  )
+}
+```
+
+---
+
+## 7. JavaScript Performance (LOW-MEDIUM)
+
+Micro-optimizations for hot paths.
+
+### Build Index Maps for Repeated Lookups
+
+**Impact:** 1M ops → 2K ops
+
+**❌ Incorrect (O(n) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  return orders.map(order => ({
+    ...order,
+    user: users.find(u => u.id === order.userId)
+  }))
+}
+```
+
+**✅ Correct (O(1) per lookup):**
+
+```typescript
+function processOrders(orders: Order[], users: User[]) {
+  const userById = new Map(users.map(u => [u.id, u]))
+
+  return orders.map(order => ({
+    ...order,
+    user: userById.get(order.userId)
+  }))
+}
+```
+
+---
+
+## Quick Reference Checklist
+
+### CRITICAL Priority
+- [ ] Use `Promise.all()` for independent async operations
+- [ ] Avoid barrel file imports (or use `optimizePackageImports`)
+- [ ] Use `next/dynamic` for heavy components
+- [ ] Defer third-party scripts (analytics, logging)
+
+### HIGH Priority
+- [ ] Use `React.cache()` for server-side deduplication
+- [ ] Structure RSC for parallel data fetching
+- [ ] Use Suspense boundaries strategically
+
+### MEDIUM Priority
+- [ ] Use SWR for client-side data fetching
+- [ ] Extract expensive work to memoized components
+- [ ] Subscribe to derived booleans, not raw values
+- [ ] Use explicit ternary for conditionals with numbers
+
+### LOW Priority
+- [ ] Build Maps for repeated lookups
+- [ ] Cache property access in loops
+- [ ] Use Set/Map for O(1) lookups
+
+---
+
+## References
+
+- [Vercel React Best Practices Repository](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices)
+- [React.cache documentation](https://react.dev/reference/react/cache)
+- [SWR documentation](https://swr.vercel.app)
+- [Next.js Package Imports Optimization](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
+- [React Compiler](https://react.dev/learn/react-compiler)

package/cli.js

@@ -212,7 +212,7 @@ const AI_TOOLS = [
     id: "claude",
     name: "Claude Code",
     description: "Anthropic's AI coding assistant",
-    folders: [".claude/commands", ".claude/skills", ".claude/themes"],
+    folders: [".claude/commands", ".claude/skills", ".claude/themes", ".claude/output-styles", ".claude/agents"],
   },
   {
     id: "opencode",
@@ -399,62 +399,18 @@ function installClaudeCode() {
     run(`wget -qO ${claudeMdPath} ${RAW_BASE}/.claude/CLAUDE.md`);
   }
 
-  // Create settings.json with hooks (project-level, shareable with team)
-  step("🚚 Setting up Claude Code hooks (.claude/settings.json)...");
+  // Download settings.json from repo (project-level, shareable with team)
+  step("🚚 Downloading Claude Code hooks (.claude/settings.json)...");
   const claudeSettingsPath = ".claude/settings.json";
   if (existsSync(claudeSettingsPath)) {
     skip(`Skipping (already exists): ${claudeSettingsPath}`);
   } else {
-    const claudeSettings = {
-      hooks: {
-        SessionStart: [
-          {
-            matcher: "startup|resume|clear",
-            hooks: [
-              {
-                type: "command",
-                command: "echo '⚠️ REMINDER: Start EVERY response with: 📚 Skills: [list] or 📚 Skills: none'"
-              }
-            ]
-          }
-        ],
-        PostToolUse: [
-          {
-            matcher: "Edit",
-            hooks: [
-              {
-                type: "command",
-                command: "if echo \"$TOOL_INPUT\" | grep -q 'docs/ai/planning/feature-'; then echo \"[$(date '+%Y-%m-%d %H:%M:%S')] Task updated in planning doc\" >> .claude/feature-progress.log; fi"
-              }
-            ]
-          }
-        ],
-        Stop: [
-          {
-            matcher: "",
-            hooks: [
-              {
-                type: "command",
-                command: "if command -v notify-send &>/dev/null; then notify-send -i dialog-information 'Claude Code' '✅ Task completed' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Task completed', 'Claude Code', 'OK', 'Information')\" 2>/dev/null; elif command -v osascript &>/dev/null; then osascript -e 'display notification \"Task completed\" with title \"Claude Code\"' 2>/dev/null; fi; exit 0"
-              }
-            ]
-          }
-        ],
-        Notification: [
-          {
-            matcher: "permission_prompt",
-            hooks: [
-              {
-                type: "command",
-                command: "if command -v notify-send &>/dev/null; then notify-send -u critical -i dialog-warning 'Claude Code' '⚠️ Permission required - check terminal' 2>/dev/null; elif command -v powershell.exe &>/dev/null; then powershell.exe -Command \"[System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); [System.Windows.Forms.MessageBox]::Show('Permission required - check terminal', 'Claude Code', 'OK', 'Warning')\" 2>/dev/null; fi; exit 0"
-              }
-            ]
-          }
-        ]
-      }
-    };
-    writeFileSync(claudeSettingsPath, JSON.stringify(claudeSettings, null, 2));
-    success(`Created: ${claudeSettingsPath}`);
+    try {
+      run(`curl -fsSL ${RAW_BASE}/.claude/settings.json -o ${claudeSettingsPath}`);
+    } catch (_) {
+      run(`wget -qO ${claudeSettingsPath} ${RAW_BASE}/.claude/settings.json`);
+    }
+    success(`Downloaded: ${claudeSettingsPath}`);
   }
 
   // Download skills folder (always overwrite to get latest)
@@ -470,6 +426,20 @@ function installClaudeCode() {
     mkdirSync(".claude/themes", { recursive: true });
   }
   run(`npx degit ${REPO}/.claude/themes .claude/themes --force`);
+
+  // Download output-styles folder (always overwrite to get latest)
+  step("🚚 Downloading Claude Code output-styles (.claude/output-styles)...");
+  if (!existsSync(".claude/output-styles")) {
+    mkdirSync(".claude/output-styles", { recursive: true });
+  }
+  run(`npx degit ${REPO}/.claude/output-styles .claude/output-styles --force`);
+
+  // Download agents folder (always overwrite to get latest)
+  step("🚚 Downloading Claude Code agents (.claude/agents)...");
+  if (!existsSync(".claude/agents")) {
+    mkdirSync(".claude/agents", { recursive: true });
+  }
+  run(`npx degit ${REPO}/.claude/agents .claude/agents --force`);
 }
 
 // Install OpenCode
@@ -568,6 +538,66 @@ function installFactoryDroid() {
   }
 }
 
+// Check and clone missing .factory subfolders (when .factory already exists)
+function checkAndCloneFactory() {
+  if (!existsSync(".factory")) {
+    return; // .factory doesn't exist, skip
+  }
+
+  step("🔍 Checking for missing .factory subfolders...");
+
+  const factorySubfolders = [
+    { path: ".factory/commands", name: "commands" },
+    { path: ".factory/droids", name: "droids" },
+    { path: ".factory/skills", name: "skills" },
+  ];
+
+  for (const subfolder of factorySubfolders) {
+    if (!existsSync(subfolder.path)) {
+      step(`🚚 Cloning missing subfolder: ${subfolder.path}...`);
+      mkdirSync(subfolder.path, { recursive: true });
+      try {
+        run(`npx degit ${REPO}/${subfolder.path} ${subfolder.path} --force`);
+        success(`Cloned: ${subfolder.path}`);
+      } catch (e) {
+        console.log(`${colors.yellow}⚠️  ${subfolder.path} not found in repo${colors.reset}`);
+      }
+    } else {
+      skip(`Already exists: ${subfolder.path}`);
+    }
+  }
+}
+
+// Check and clone missing .opencode subfolders (when .opencode already exists)
+function checkAndCloneOpenCode() {
+  if (!existsSync(".opencode")) {
+    return; // .opencode doesn't exist, skip
+  }
+
+  step("🔍 Checking for missing .opencode subfolders...");
+
+  const opencodeSubfolders = [
+    { path: ".opencode/agent", name: "agent" },
+    { path: ".opencode/command", name: "command" },
+    { path: ".opencode/skill", name: "skill" },
+  ];
+
+  for (const subfolder of opencodeSubfolders) {
+    if (!existsSync(subfolder.path)) {
+      step(`🚚 Cloning missing subfolder: ${subfolder.path}...`);
+      mkdirSync(subfolder.path, { recursive: true });
+      try {
+        run(`npx degit ${REPO}/${subfolder.path} ${subfolder.path} --force`);
+        success(`Cloned: ${subfolder.path}`);
+      } catch (e) {
+        console.log(`${colors.yellow}⚠️  ${subfolder.path} not found in repo${colors.reset}`);
+      }
+    } else {
+      skip(`Already exists: ${subfolder.path}`);
+    }
+  }
+}
+
 async function main() {
   console.log(`
 ${colors.cyan}╔═══════════════════════════════════════════════════════════╗
@@ -640,6 +670,15 @@ ${colors.cyan}╔═════════════════════
     installFactoryDroid();
   }
 
+  // Check and clone missing subfolders for existing .factory and .opencode
+  // This runs regardless of tool selection, in case folders already exist
+  if (!toolIds.includes("factory")) {
+    checkAndCloneFactory();
+  }
+  if (!toolIds.includes("opencode")) {
+    checkAndCloneOpenCode();
+  }
+
   // Download AGENTS.md (luôn ghi đè)
   step("🚚 Downloading AGENTS.md...");
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-workflow-init",
-  "version": "6.3.2",
+  "version": "6.4.2",
   "description": "Initialize AI workflow docs & commands into any repo with one command",
   "bin": {
     "ai-workflow-init": "./cli.js"