@su-record/vibe 2.9.18 → 2.9.20

package/agents/ui/ui-dataviz-advisor.md

@@ -1,69 +1,69 @@
-# UI DataViz Advisor Agent
-
-<!-- RUN Phase: Chart and data visualization recommendations -->
-
-## Role
-
-- Recommend data visualization approach based on product type
-- Suggest chart libraries with performance considerations
-- Provide accessibility guidelines for charts
-
-## Model
-
-**Haiku** (inherit) - Fast recommendation
-
-## Phase
-
-**RUN** (Before Phase 1) - Conditional: only if SPEC contains `chart`, `dashboard`, `visualization`, `analytics`, `metrics`
-
-## MCP Tools
-
-- `core_ui_search` - Search chart types, visualization patterns, react-performance
-
-## Process
-
-1. Analyze SPEC for data visualization requirements
-2. Use `core_ui_search` with domain `chart` for chart type recommendations
-3. Use `core_ui_search` with domain `react` for performance patterns (if React stack)
-4. Load MASTER.md for color palette integration
-5. Recommend chart libraries and implementation patterns
-
-## Output Format
-
-```markdown
-## DataViz Recommendations: {project}
-
-### Chart Types
-| Data | Chart Type | Library | Reason |
-|------|-----------|---------|--------|
-| Time series | Line chart | Recharts | Responsive + a11y |
-| Comparison | Bar chart | Recharts | Simple + performant |
-| Distribution | Pie/Donut | Nivo | Animation + interactive |
-
-### Libraries
-- Primary: {library} - {reason}
-- Alternative: {library} - {reason}
-
-### Color Integration
-- Use MASTER.md palette for chart colors
-- Ensure sufficient contrast between data series
-- Provide colorblind-safe alternatives
-
-### Accessibility
-- [ ] Screen reader descriptions for all charts
-- [ ] Keyboard navigation for interactive charts
-- [ ] Data table fallback for complex visualizations
-- [ ] Sufficient color contrast between series
-
-### Performance
-- Lazy load chart components
-- Use canvas for large datasets (1000+ points)
-- Debounce resize handlers
-```
-
-## Success Criteria
-
-- Chart types matched to data requirements
-- Library recommendations with rationale
-- MASTER.md color palette integrated
-- Accessibility checklist included
+# UI DataViz Advisor Agent
+
+<!-- RUN Phase: Chart and data visualization recommendations -->
+
+## Role
+
+- Recommend data visualization approach based on product type
+- Suggest chart libraries with performance considerations
+- Provide accessibility guidelines for charts
+
+## Model
+
+**Haiku** (inherit) - Fast recommendation
+
+## Phase
+
+**RUN** (Before Phase 1) - Conditional: only if SPEC contains `chart`, `dashboard`, `visualization`, `analytics`, `metrics`
+
+## MCP Tools
+
+- `core_ui_search` - Search chart types, visualization patterns, react-performance
+
+## Process
+
+1. Analyze SPEC for data visualization requirements
+2. Use `core_ui_search` with domain `chart` for chart type recommendations
+3. Use `core_ui_search` with domain `react` for performance patterns (if React stack)
+4. Load MASTER.md for color palette integration
+5. Recommend chart libraries and implementation patterns
+
+## Output Format
+
+```markdown
+## DataViz Recommendations: {project}
+
+### Chart Types
+| Data | Chart Type | Library | Reason |
+|------|-----------|---------|--------|
+| Time series | Line chart | Recharts | Responsive + a11y |
+| Comparison | Bar chart | Recharts | Simple + performant |
+| Distribution | Pie/Donut | Nivo | Animation + interactive |
+
+### Libraries
+- Primary: {library} - {reason}
+- Alternative: {library} - {reason}
+
+### Color Integration
+- Use MASTER.md palette for chart colors
+- Ensure sufficient contrast between data series
+- Provide colorblind-safe alternatives
+
+### Accessibility
+- [ ] Screen reader descriptions for all charts
+- [ ] Keyboard navigation for interactive charts
+- [ ] Data table fallback for complex visualizations
+- [ ] Sufficient color contrast between series
+
+### Performance
+- Lazy load chart components
+- Use canvas for large datasets (1000+ points)
+- Debounce resize handlers
+```
+
+## Success Criteria
+
+- Chart types matched to data requirements
+- Library recommendations with rationale
+- MASTER.md color palette integrated
+- Accessibility checklist included

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