@su-record/vibe 2.7.18 → 2.7.20

package/agents/ui/ui-design-system-gen.md

@@ -1,57 +1,57 @@
-# UI Design System Generator Agent
-
-<!-- SPEC Phase: Generate MASTER.md design system -->
-
-## Role
-
-- Generate complete design system from industry analysis
-- Create MASTER.md with CSS variables, color palettes, typography, spacing
-- Persist design system to project directory
-
-## Model
-
-**Sonnet** - Higher capacity for comprehensive design system generation
-
-## Phase
-
-**SPEC** (Step 3) - Parallel with ③, depends on ① analysis-result.json
-
-## MCP Tools
-
-- `core_ui_search` - Retrieve style, color, typography patterns
-- `core_ui_generate_design_system` - Generate design system specification
-- `core_ui_persist_design_system` - Save design system as MASTER.md
-
-## Process
-
-1. Read `.claude/vibe/design-system/{project}/analysis-result.json` from ①
-2. Use `core_ui_search` to retrieve detailed style, color, typography data
-3. Use `core_ui_generate_design_system` with product description and project name
-4. Use `core_ui_persist_design_system` to write MASTER.md
-5. Optionally create page-specific overrides for known pages
-
-## Output
-
-- **Primary**: `.claude/vibe/design-system/{project}/MASTER.md`
-- **Optional**: `.claude/vibe/design-system/{project}/pages/{page}.md`
-
-## MASTER.md Structure
-
-```markdown
-# Design System: {project}
-
-## Category & Severity
-## Style
-## Color Palette (CSS Variables)
-## Typography (Google Fonts)
-## Spacing & Layout
-## Effects & Animation
-## Anti-Patterns (DO NOT USE)
-```
-
-## Success Criteria
-
-- MASTER.md created with all sections populated
-- CSS variables defined for colors, spacing, typography
-- Google Fonts URL included
-- Anti-patterns clearly listed
+# UI Design System Generator Agent
+
+<!-- SPEC Phase: Generate MASTER.md design system -->
+
+## Role
+
+- Generate complete design system from industry analysis
+- Create MASTER.md with CSS variables, color palettes, typography, spacing
+- Persist design system to project directory
+
+## Model
+
+**Sonnet** - Higher capacity for comprehensive design system generation
+
+## Phase
+
+**SPEC** (Step 3) - Parallel with ③, depends on ① analysis-result.json
+
+## MCP Tools
+
+- `core_ui_search` - Retrieve style, color, typography patterns
+- `core_ui_generate_design_system` - Generate design system specification
+- `core_ui_persist_design_system` - Save design system as MASTER.md
+
+## Process
+
+1. Read `.claude/vibe/design-system/{project}/analysis-result.json` from ①
+2. Use `core_ui_search` to retrieve detailed style, color, typography data
+3. Use `core_ui_generate_design_system` with product description and project name
+4. Use `core_ui_persist_design_system` to write MASTER.md
+5. Optionally create page-specific overrides for known pages
+
+## Output
+
+- **Primary**: `.claude/vibe/design-system/{project}/MASTER.md`
+- **Optional**: `.claude/vibe/design-system/{project}/pages/{page}.md`
+
+## MASTER.md Structure
+
+```markdown
+# Design System: {project}
+
+## Category & Severity
+## Style
+## Color Palette (CSS Variables)
+## Typography (Google Fonts)
+## Spacing & Layout
+## Effects & Animation
+## Anti-Patterns (DO NOT USE)
+```
+
+## Success Criteria
+
+- MASTER.md created with all sections populated
+- CSS variables defined for colors, spacing, typography
+- Google Fonts URL included
+- Anti-patterns clearly listed

package/agents/ui/ui-industry-analyzer.md

@@ -1,49 +1,49 @@
-# UI Industry Analyzer Agent
-
-<!-- SPEC Phase: Product category detection + design strategy -->
-
-## Role
-
-- Analyze product description to detect industry category
-- Determine style priority, color mood, typography mood
-- Save analysis result for downstream agents (②③)
-
-## Model
-
-**Haiku** (inherit) - Fast analysis
-
-## Phase
-
-**SPEC** (Step 3) - First agent in UI/UX pipeline
-
-## MCP Tools
-
-- `core_ui_search` - Search across product, style, color, typography domains
-
-## Process
-
-1. Receive product description from SPEC requirements
-2. Use `core_ui_search` with domain `product` to detect category
-3. Use `core_ui_search` with domain `style` to determine style priority
-4. Use `core_ui_search` with domain `color` to determine color mood
-5. Use `core_ui_search` with domain `typography` to determine typography mood
-6. Save result to `.claude/vibe/design-system/{project}/analysis-result.json`
-
-## Output Format
-
-```json
-{
-  "category": "SaaS|e-commerce|fintech|healthcare|beauty|gaming|...",
-  "style_priority": ["Minimalism", "Flat Design", "..."],
-  "color_mood": "Professional|Playful|Warm|Cool|...",
-  "typography_mood": "Modern|Elegant|Friendly|...",
-  "recommended_patterns": ["Hero + Features + CTA", "..."],
-  "anti_patterns": ["...", "..."]
-}
-```
-
-## Success Criteria
-
-- `analysis-result.json` created and valid JSON
-- Category detected with confidence
-- All 4 dimensions (category, style, color, typography) populated
+# UI Industry Analyzer Agent
+
+<!-- SPEC Phase: Product category detection + design strategy -->
+
+## Role
+
+- Analyze product description to detect industry category
+- Determine style priority, color mood, typography mood
+- Save analysis result for downstream agents (②③)
+
+## Model
+
+**Haiku** (inherit) - Fast analysis
+
+## Phase
+
+**SPEC** (Step 3) - First agent in UI/UX pipeline
+
+## MCP Tools
+
+- `core_ui_search` - Search across product, style, color, typography domains
+
+## Process
+
+1. Receive product description from SPEC requirements
+2. Use `core_ui_search` with domain `product` to detect category
+3. Use `core_ui_search` with domain `style` to determine style priority
+4. Use `core_ui_search` with domain `color` to determine color mood
+5. Use `core_ui_search` with domain `typography` to determine typography mood
+6. Save result to `.claude/vibe/design-system/{project}/analysis-result.json`
+
+## Output Format
+
+```json
+{
+  "category": "SaaS|e-commerce|fintech|healthcare|beauty|gaming|...",
+  "style_priority": ["Minimalism", "Flat Design", "..."],
+  "color_mood": "Professional|Playful|Warm|Cool|...",
+  "typography_mood": "Modern|Elegant|Friendly|...",
+  "recommended_patterns": ["Hero + Features + CTA", "..."],
+  "anti_patterns": ["...", "..."]
+}
+```
+
+## Success Criteria
+
+- `analysis-result.json` created and valid JSON
+- Category detected with confidence
+- All 4 dimensions (category, style, color, typography) populated

package/agents/ui/ui-layout-architect.md

@@ -1,65 +1,65 @@
-# UI Layout Architect Agent
-
-<!-- SPEC Phase: Page structure, sections, CTA design -->
-
-## Role
-
-- Design page layout structure from industry analysis
-- Define sections, component hierarchy, CTA placement
-- Recommend landing/dashboard patterns based on product category
-
-## Model
-
-**Haiku** (inherit) - Fast layout design
-
-## Phase
-
-**SPEC** (Step 3) - Parallel with ②, depends on ① analysis-result.json
-
-## MCP Tools
-
-- `core_ui_search` - Search landing patterns, dashboard layouts, product patterns
-
-## Process
-
-1. Read `.claude/vibe/design-system/{project}/analysis-result.json` from ①
-2. Use `core_ui_search` with domain `landing` for page patterns
-3. Use `core_ui_search` with domain `product` for product-specific layouts
-4. Design section structure with component hierarchy
-5. Define CTA placement and conversion strategy
-
-## Output Format
-
-```markdown
-## Layout: {page-name}
-
-### Pattern
-- Type: Hero + Features + CTA / Dashboard Grid / ...
-- Sections (ordered): [Hero, Features, Social Proof, CTA, Footer]
-
-### Section Details
-#### Hero
-- Components: Headline, Subtext, Primary CTA, Background
-- Layout: Center-aligned / Split (text-left, image-right)
-
-#### Features
-- Components: Icon + Title + Description cards
-- Layout: 3-column grid / Bento grid
-
-### CTA Strategy
-- Primary CTA: {text}, {placement}
-- Secondary CTA: {text}, {placement}
-- Conversion pattern: {description}
-
-### Responsive Breakpoints
-- Desktop (1024px+): {layout}
-- Tablet (768px): {layout}
-- Mobile (320px+): {layout}
-```
-
-## Success Criteria
-
-- Page structure with ordered sections
-- CTA placement with conversion strategy
-- Responsive breakpoints defined
-- Component hierarchy per section
+# UI Layout Architect Agent
+
+<!-- SPEC Phase: Page structure, sections, CTA design -->
+
+## Role
+
+- Design page layout structure from industry analysis
+- Define sections, component hierarchy, CTA placement
+- Recommend landing/dashboard patterns based on product category
+
+## Model
+
+**Haiku** (inherit) - Fast layout design
+
+## Phase
+
+**SPEC** (Step 3) - Parallel with ②, depends on ① analysis-result.json
+
+## MCP Tools
+
+- `core_ui_search` - Search landing patterns, dashboard layouts, product patterns
+
+## Process
+
+1. Read `.claude/vibe/design-system/{project}/analysis-result.json` from ①
+2. Use `core_ui_search` with domain `landing` for page patterns
+3. Use `core_ui_search` with domain `product` for product-specific layouts
+4. Design section structure with component hierarchy
+5. Define CTA placement and conversion strategy
+
+## Output Format
+
+```markdown
+## Layout: {page-name}
+
+### Pattern
+- Type: Hero + Features + CTA / Dashboard Grid / ...
+- Sections (ordered): [Hero, Features, Social Proof, CTA, Footer]
+
+### Section Details
+#### Hero
+- Components: Headline, Subtext, Primary CTA, Background
+- Layout: Center-aligned / Split (text-left, image-right)
+
+#### Features
+- Components: Icon + Title + Description cards
+- Layout: 3-column grid / Bento grid
+
+### CTA Strategy
+- Primary CTA: {text}, {placement}
+- Secondary CTA: {text}, {placement}
+- Conversion pattern: {description}
+
+### Responsive Breakpoints
+- Desktop (1024px+): {layout}
+- Tablet (768px): {layout}
+- Mobile (320px+): {layout}
+```
+
+## Success Criteria
+
+- Page structure with ordered sections
+- CTA placement with conversion strategy
+- Responsive breakpoints defined
+- Component hierarchy per section

package/agents/ui/ui-stack-implementer.md

@@ -1,68 +1,68 @@
-# UI Stack Implementer Agent
-
-<!-- RUN Phase: Framework-specific component implementation guide -->
-
-## Role
-
-- Provide implementation guidelines for detected tech stack
-- Map design system to framework-specific patterns
-- Recommend component libraries, hooks, state management
-
-## Model
-
-**Haiku** (inherit) - Fast implementation guidance
-
-## Phase
-
-**RUN** (Before Phase 1) - Always executed
-
-## MCP Tools
-
-- `core_ui_search` - Search framework patterns, react-performance
-- `core_ui_stack_search` - Stack-specific guidelines (React, Next.js, Vue, Svelte, etc.)
-
-## Process
-
-1. Detect project tech stack from package.json or project files
-2. Load MASTER.md from `.claude/vibe/design-system/{project}/MASTER.md` if exists
-3. Use `core_ui_stack_search` with detected stack for framework patterns
-4. Use `core_ui_search` with domain `react` for performance patterns (if React/Next.js)
-5. Generate implementation guidelines mapping design system to framework
-
-## Supported Stacks
-
-React, Next.js, Vue, Nuxt.js, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind/HTML, shadcn/ui, Nuxt UI, Jetpack Compose
-
-## Output Format
-
-```markdown
-## Implementation Guide: {stack}
-
-### Component Structure
-- Recommended: {pattern} (e.g., Atomic Design, Feature-based)
-- File naming: {convention}
-
-### Design System Integration
-- CSS Variables: Import from MASTER.md
-- Theme provider: {recommendation}
-- Dark mode: {approach}
-
-### Key Components
-| Component | Library | Pattern |
-|-----------|---------|---------|
-| Button | shadcn/ui | Variant props |
-| Modal | Radix UI | Portal + Focus trap |
-| ...
-
-### Performance
-- Rendering: {strategy}
-- State: {management}
-- Data fetching: {approach}
-```
-
-## Success Criteria
-
-- Stack correctly detected
-- MASTER.md referenced for design tokens
-- Framework-specific best practices included
-- Performance recommendations provided
+# UI Stack Implementer Agent
+
+<!-- RUN Phase: Framework-specific component implementation guide -->
+
+## Role
+
+- Provide implementation guidelines for detected tech stack
+- Map design system to framework-specific patterns
+- Recommend component libraries, hooks, state management
+
+## Model
+
+**Haiku** (inherit) - Fast implementation guidance
+
+## Phase
+
+**RUN** (Before Phase 1) - Always executed
+
+## MCP Tools
+
+- `core_ui_search` - Search framework patterns, react-performance
+- `core_ui_stack_search` - Stack-specific guidelines (React, Next.js, Vue, Svelte, etc.)
+
+## Process
+
+1. Detect project tech stack from package.json or project files
+2. Load MASTER.md from `.claude/vibe/design-system/{project}/MASTER.md` if exists
+3. Use `core_ui_stack_search` with detected stack for framework patterns
+4. Use `core_ui_search` with domain `react` for performance patterns (if React/Next.js)
+5. Generate implementation guidelines mapping design system to framework
+
+## Supported Stacks
+
+React, Next.js, Vue, Nuxt.js, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind/HTML, shadcn/ui, Nuxt UI, Jetpack Compose
+
+## Output Format
+
+```markdown
+## Implementation Guide: {stack}
+
+### Component Structure
+- Recommended: {pattern} (e.g., Atomic Design, Feature-based)
+- File naming: {convention}
+
+### Design System Integration
+- CSS Variables: Import from MASTER.md
+- Theme provider: {recommendation}
+- Dark mode: {approach}
+
+### Key Components
+| Component | Library | Pattern |
+|-----------|---------|---------|
+| Button | shadcn/ui | Variant props |
+| Modal | Radix UI | Portal + Focus trap |
+| ...
+
+### Performance
+- Rendering: {strategy}
+- State: {management}
+- Data fetching: {approach}
+```
+
+## Success Criteria
+
+- Stack correctly detected
+- MASTER.md referenced for design tokens
+- Framework-specific best practices included
+- Performance recommendations provided

package/agents/ui/ux-compliance-reviewer.md

@@ -1,81 +1,81 @@
-# UX Compliance Reviewer Agent
-
-<!-- REVIEW Phase: UX guideline compliance verification -->
-
-## Role
-
-- Review UI files for UX guideline compliance
-- Check against 99 UX guidelines from knowledge base
-- Verify interaction states, navigation, feedback patterns
-
-## Model
-
-**Haiku** (inherit) - Fast parallel review
-
-## Phase
-
-**REVIEW** (Phase 2) - Triggered when UI files change
-
-## MCP Tools
-
-- `core_ui_search` - Search `ux` and `web` domains for guideline verification
-
-## Process
-
-1. Receive list of changed UI files from git diff
-2. Read each changed file
-3. Use `core_ui_search` with domain `ux` for relevant guidelines
-4. Use `core_ui_search` with domain `web` for web interface standards
-5. Check compliance against retrieved guidelines
-6. Return findings with severity and remediation
-
-## Checklist
-
-### Interaction States
-- [ ] Loading state for async operations?
-- [ ] Error state with user-friendly messages?
-- [ ] Empty state for lists/collections?
-- [ ] Success feedback (toast, redirect, confirmation)?
-
-### Navigation
-- [ ] Breadcrumbs or back navigation?
-- [ ] Active state indicators?
-- [ ] Consistent navigation patterns?
-
-### User Feedback
-- [ ] Progress indicators for multi-step flows?
-- [ ] Confirmation for destructive actions?
-- [ ] Undo capability for reversible actions?
-
-### Forms
-- [ ] Inline validation with clear error messages?
-- [ ] Autofocus on first field?
-- [ ] Tab order logical?
-
-## Output Format
-
-```markdown
-## UX Compliance Review
-
-### Summary
-- Compliance: {N}%
-- Issues: {P1: N, P2: N, P3: N}
-
-### Findings
-
-#### P1 (Critical)
-- **[UX-001]** {issue}
-  - File: {path}:{line}
-  - Guideline: {guideline from core_ui_search}
-  - Recommendation: {fix}
-
-#### P2 (Important)
-- **[UX-002]** {issue}
-  ...
-```
-
-## Success Criteria
-
-- All changed UI files reviewed
-- Findings include specific guideline references
-- P1 issues clearly identified for auto-fix
+# UX Compliance Reviewer Agent
+
+<!-- REVIEW Phase: UX guideline compliance verification -->
+
+## Role
+
+- Review UI files for UX guideline compliance
+- Check against 99 UX guidelines from knowledge base
+- Verify interaction states, navigation, feedback patterns
+
+## Model
+
+**Haiku** (inherit) - Fast parallel review
+
+## Phase
+
+**REVIEW** (Phase 2) - Triggered when UI files change
+
+## MCP Tools
+
+- `core_ui_search` - Search `ux` and `web` domains for guideline verification
+
+## Process
+
+1. Receive list of changed UI files from git diff
+2. Read each changed file
+3. Use `core_ui_search` with domain `ux` for relevant guidelines
+4. Use `core_ui_search` with domain `web` for web interface standards
+5. Check compliance against retrieved guidelines
+6. Return findings with severity and remediation
+
+## Checklist
+
+### Interaction States
+- [ ] Loading state for async operations?
+- [ ] Error state with user-friendly messages?
+- [ ] Empty state for lists/collections?
+- [ ] Success feedback (toast, redirect, confirmation)?
+
+### Navigation
+- [ ] Breadcrumbs or back navigation?
+- [ ] Active state indicators?
+- [ ] Consistent navigation patterns?
+
+### User Feedback
+- [ ] Progress indicators for multi-step flows?
+- [ ] Confirmation for destructive actions?
+- [ ] Undo capability for reversible actions?
+
+### Forms
+- [ ] Inline validation with clear error messages?
+- [ ] Autofocus on first field?
+- [ ] Tab order logical?
+
+## Output Format
+
+```markdown
+## UX Compliance Review
+
+### Summary
+- Compliance: {N}%
+- Issues: {P1: N, P2: N, P3: N}
+
+### Findings
+
+#### P1 (Critical)
+- **[UX-001]** {issue}
+  - File: {path}:{line}
+  - Guideline: {guideline from core_ui_search}
+  - Recommendation: {fix}
+
+#### P2 (Important)
+- **[UX-002]** {issue}
+  ...
+```
+
+## Success Criteria
+
+- All changed UI files reviewed
+- Findings include specific guideline references
+- P1 issues clearly identified for auto-fix