@su-record/vibe 2.9.18 → 2.9.20

package/skills/design-polish/rubrics/polish-checklist.md

@@ -1,68 +1,68 @@
-# Design Polish — Final Pass Checklist
-
-Detailed criteria for each polish category. Each item is binary: pass or fail with a file:line reference.
-
----
-
-## 1. Micro-Interactions
-
-| Item | Pass Criteria | Fail Signal |
-|------|--------------|-------------|
-| Button hover | Color or shadow change within 150–300ms | No change, or change > 500ms |
-| Button active/pressed | Slight scale-down (`scale(0.97)`) or color shift | No pressed state |
-| Link hover | Underline or color change on entry | No visual feedback |
-| Input focus | Border color change + visible focus ring | Ring missing or `outline: none` with no substitute |
-| Toggle/switch | Smooth slide transition (200ms) | Instant jump with no transition |
-| Checkbox/radio | Fill animation or check animation on select | Instant state change only |
-| Toast/notification | Fade-in entry, fade-out dismiss (200–300ms) | Instant appear/disappear |
-| Dropdown open | Fade + slight translate-y on open | No entry animation |
-
----
-
-## 2. Spacing & Alignment
-
-| Item | Pass Criteria | Fail Signal |
-|------|--------------|-------------|
-| Grid alignment | All elements snap to 4px or 8px grid | Arbitrary values like `13px`, `22px`, `37px` |
-| Section rhythm | Consistent vertical spacing between sections | Different gaps between visually equivalent sections |
-| Icon-text alignment | Icons vertically centered with adjacent text label | Icon top-aligned with multi-line text (unless intentional) |
-| Container padding | Symmetric horizontal padding unless intentional asymmetry | Left padding ≠ right padding without justification |
-| Card internal spacing | Same padding token used for all cards of same level | One card uses `p-4`, adjacent uses `p-6` |
-| List item gaps | Consistent gap between items | First item has different spacing than rest |
-
----
-
-## 3. Typography Refinements
-
-| Item | Pass Criteria | Fail Signal |
-|------|--------------|-------------|
-| No orphaned words | Last line of heading has ≥ 2 words | Single word dangling on its own line |
-| Capitalization | Consistent Title Case or sentence case per element type | Mix of styles on same element type |
-| No placeholder copy | All text is real content | "Lorem ipsum", "placeholder", "TODO", "test text" present |
-| Overflow truncation | Long text uses `text-overflow: ellipsis` with `overflow: hidden` | Text overflows container or wraps unpredictably |
-| Line length | Body text ≤ 75 characters wide | Wide blocks of text with no max-width constraint |
-| Heading hierarchy | Visual size matches semantic level (`h1` > `h2` > `h3`) | `h2` styled larger than `h1`, or heading levels skipped |
-
----
-
-## 4. Visual Consistency
-
-| Item | Pass Criteria | Fail Signal |
-|------|--------------|-------------|
-| Border radius | Same-level cards and inputs share identical radius token | Card uses `rounded-lg`, adjacent input uses `rounded-md` |
-| Shadow elevation | Shadow depth increases with z-index elevation | Modals (high elevation) have less shadow than cards |
-| Icon size | Icons within same context use one of: 16/20/24px | Mix of 14px, 18px, 22px icons in the same component |
-| Color semantics | Red = error/danger, Green = success, Yellow = warning consistently | Success toast is blue, error badge is orange |
-| Empty states | All empty states have an icon or illustration + message + CTA | Some empty states show only "No data" text |
-
----
-
-## 5. Code Cleanliness
-
-| Item | Pass Criteria | Fail Signal |
-|------|--------------|-------------|
-| No console.log | Zero `console.log` calls in UI files | Any `console.log` in production code paths |
-| No commented code | No commented-out JSX or HTML blocks | `{/* <OldButton /> */}` style remnants |
-| z-index discipline | No `z-index` > 100 without a comment explaining the reason | `z-index: 9999` or `z-index: 99999` |
-| No inline styles | Presentation values use classes or tokens | `style={{ color: '#3B82F6', padding: '16px' }}` on component |
-| No dead CSS | No class names defined but never applied | Classes in stylesheet with zero matches in templates |
+# Design Polish — Final Pass Checklist
+
+Detailed criteria for each polish category. Each item is binary: pass or fail with a file:line reference.
+
+---
+
+## 1. Micro-Interactions
+
+| Item | Pass Criteria | Fail Signal |
+|------|--------------|-------------|
+| Button hover | Color or shadow change within 150–300ms | No change, or change > 500ms |
+| Button active/pressed | Slight scale-down (`scale(0.97)`) or color shift | No pressed state |
+| Link hover | Underline or color change on entry | No visual feedback |
+| Input focus | Border color change + visible focus ring | Ring missing or `outline: none` with no substitute |
+| Toggle/switch | Smooth slide transition (200ms) | Instant jump with no transition |
+| Checkbox/radio | Fill animation or check animation on select | Instant state change only |
+| Toast/notification | Fade-in entry, fade-out dismiss (200–300ms) | Instant appear/disappear |
+| Dropdown open | Fade + slight translate-y on open | No entry animation |
+
+---
+
+## 2. Spacing & Alignment
+
+| Item | Pass Criteria | Fail Signal |
+|------|--------------|-------------|
+| Grid alignment | All elements snap to 4px or 8px grid | Arbitrary values like `13px`, `22px`, `37px` |
+| Section rhythm | Consistent vertical spacing between sections | Different gaps between visually equivalent sections |
+| Icon-text alignment | Icons vertically centered with adjacent text label | Icon top-aligned with multi-line text (unless intentional) |
+| Container padding | Symmetric horizontal padding unless intentional asymmetry | Left padding ≠ right padding without justification |
+| Card internal spacing | Same padding token used for all cards of same level | One card uses `p-4`, adjacent uses `p-6` |
+| List item gaps | Consistent gap between items | First item has different spacing than rest |
+
+---
+
+## 3. Typography Refinements
+
+| Item | Pass Criteria | Fail Signal |
+|------|--------------|-------------|
+| No orphaned words | Last line of heading has ≥ 2 words | Single word dangling on its own line |
+| Capitalization | Consistent Title Case or sentence case per element type | Mix of styles on same element type |
+| No placeholder copy | All text is real content | "Lorem ipsum", "placeholder", "TODO", "test text" present |
+| Overflow truncation | Long text uses `text-overflow: ellipsis` with `overflow: hidden` | Text overflows container or wraps unpredictably |
+| Line length | Body text ≤ 75 characters wide | Wide blocks of text with no max-width constraint |
+| Heading hierarchy | Visual size matches semantic level (`h1` > `h2` > `h3`) | `h2` styled larger than `h1`, or heading levels skipped |
+
+---
+
+## 4. Visual Consistency
+
+| Item | Pass Criteria | Fail Signal |
+|------|--------------|-------------|
+| Border radius | Same-level cards and inputs share identical radius token | Card uses `rounded-lg`, adjacent input uses `rounded-md` |
+| Shadow elevation | Shadow depth increases with z-index elevation | Modals (high elevation) have less shadow than cards |
+| Icon size | Icons within same context use one of: 16/20/24px | Mix of 14px, 18px, 22px icons in the same component |
+| Color semantics | Red = error/danger, Green = success, Yellow = warning consistently | Success toast is blue, error badge is orange |
+| Empty states | All empty states have an icon or illustration + message + CTA | Some empty states show only "No data" text |
+
+---
+
+## 5. Code Cleanliness
+
+| Item | Pass Criteria | Fail Signal |
+|------|--------------|-------------|
+| No console.log | Zero `console.log` calls in UI files | Any `console.log` in production code paths |
+| No commented code | No commented-out JSX or HTML blocks | `{/* <OldButton /> */}` style remnants |
+| z-index discipline | No `z-index` > 100 without a comment explaining the reason | `z-index: 9999` or `z-index: 99999` |
+| No inline styles | Presentation values use classes or tokens | `style={{ color: '#3B82F6', padding: '16px' }}` on component |
+| No dead CSS | No class names defined but never applied | Classes in stylesheet with zero matches in templates |

package/skills/design-polish/templates/polish-report.md

@@ -1,64 +1,64 @@
-# Design Polish Report: {{TARGET}}
-
-**Date**: {{DATE}}
-**Scope**: {{SCOPE_DESCRIPTION}}
-**Design Context**: {{CONTEXT_SOURCE}} (design-context.json / defaults)
-
----
-
-## Summary
-
-| Category | Checked | Auto-Fixed | Manual Review |
-|----------|---------|------------|---------------|
-| Micro-interactions | {{MI_CHECKED}} | {{MI_FIXED}} | {{MI_MANUAL}} |
-| Spacing & Alignment | {{SP_CHECKED}} | {{SP_FIXED}} | {{SP_MANUAL}} |
-| Typography | {{TY_CHECKED}} | {{TY_FIXED}} | {{TY_MANUAL}} |
-| Visual Consistency | {{VC_CHECKED}} | {{VC_FIXED}} | {{VC_MANUAL}} |
-| Code Cleanliness | {{CC_CHECKED}} | {{CC_FIXED}} | {{CC_MANUAL}} |
-| **Total** | **{{TOTAL_CHECKED}}** | **{{TOTAL_FIXED}}** | **{{TOTAL_MANUAL}}** |
-
-**Ship-ready**: {{SHIP_READY}}
-
----
-
-## Auto-Fixed
-
-{{#AUTO_FIXED}}
-- `{{FILE}}:{{LINE}}` — {{DESCRIPTION}}
-{{/AUTO_FIXED}}
-{{#NO_AUTO_FIXED}}
-- None
-{{/NO_AUTO_FIXED}}
-
----
-
-## Manual Review Required
-
-{{#MANUAL_REVIEW}}
-- `{{FILE}}:{{LINE}}` — {{DESCRIPTION}}
-  - Reason: {{REASON}}
-  - Suggested fix: {{SUGGESTION}}
-{{/MANUAL_REVIEW}}
-{{#NO_MANUAL_REVIEW}}
-- None
-{{/NO_MANUAL_REVIEW}}
-
----
-
-## Skipped Items
-
-{{#SKIPPED}}
-- {{ITEM}} — {{REASON}}
-{{/SKIPPED}}
-{{#NO_SKIPPED}}
-- None
-{{/NO_SKIPPED}}
-
----
-
-## Next Steps
-
-| Condition | Recommended Skill |
-|-----------|-------------------|
-| Design system gaps found | `/design-normalize` then re-run `/design-polish` |
-| All items pass | Ship ready |
+# Design Polish Report: {{TARGET}}
+
+**Date**: {{DATE}}
+**Scope**: {{SCOPE_DESCRIPTION}}
+**Design Context**: {{CONTEXT_SOURCE}} (design-context.json / defaults)
+
+---
+
+## Summary
+
+| Category | Checked | Auto-Fixed | Manual Review |
+|----------|---------|------------|---------------|
+| Micro-interactions | {{MI_CHECKED}} | {{MI_FIXED}} | {{MI_MANUAL}} |
+| Spacing & Alignment | {{SP_CHECKED}} | {{SP_FIXED}} | {{SP_MANUAL}} |
+| Typography | {{TY_CHECKED}} | {{TY_FIXED}} | {{TY_MANUAL}} |
+| Visual Consistency | {{VC_CHECKED}} | {{VC_FIXED}} | {{VC_MANUAL}} |
+| Code Cleanliness | {{CC_CHECKED}} | {{CC_FIXED}} | {{CC_MANUAL}} |
+| **Total** | **{{TOTAL_CHECKED}}** | **{{TOTAL_FIXED}}** | **{{TOTAL_MANUAL}}** |
+
+**Ship-ready**: {{SHIP_READY}}
+
+---
+
+## Auto-Fixed
+
+{{#AUTO_FIXED}}
+- `{{FILE}}:{{LINE}}` — {{DESCRIPTION}}
+{{/AUTO_FIXED}}
+{{#NO_AUTO_FIXED}}
+- None
+{{/NO_AUTO_FIXED}}
+
+---
+
+## Manual Review Required
+
+{{#MANUAL_REVIEW}}
+- `{{FILE}}:{{LINE}}` — {{DESCRIPTION}}
+  - Reason: {{REASON}}
+  - Suggested fix: {{SUGGESTION}}
+{{/MANUAL_REVIEW}}
+{{#NO_MANUAL_REVIEW}}
+- None
+{{/NO_MANUAL_REVIEW}}
+
+---
+
+## Skipped Items
+
+{{#SKIPPED}}
+- {{ITEM}} — {{REASON}}
+{{/SKIPPED}}
+{{#NO_SKIPPED}}
+- None
+{{/NO_SKIPPED}}
+
+---
+
+## Next Steps
+
+| Condition | Recommended Skill |
+|-----------|-------------------|
+| Design system gaps found | `/design-normalize` then re-run `/design-polish` |
+| All items pass | Ship ready |

package/skills/design-teach/SKILL.md

@@ -1,182 +1,182 @@
----
-name: design-teach
-tier: standard
-description: "Gather and store project design context — target audience, brand personality, aesthetic direction, constraints. Used by other design-* skills. Use when design-teach, design-setup, design-context."
-triggers: [design-teach, design-setup, design-context]
-priority: 50
----
-
-# Design Teach — Project Design Context Gathering
-
-Collect project-specific design context so all design-* skills produce tailored, brand-aware results. Saves to `.claude/vibe/design-context.json`.
-
-## Usage
-
-```
-/design-teach                  # Interactive context gathering
-/design-teach --update         # Update existing context
-```
-
-## Process
-
-### Step 1: Auto-Explore Codebase
-
-Before asking questions, automatically gather existing signals:
-
-| Signal | Where to Look |
-|--------|---------------|
-| CSS variables / tokens | `*.css`, `tailwind.config.*`, `theme.*` |
-| Color palette | Existing color definitions, brand assets |
-| Typography | Font imports, font-family declarations |
-| Component library | `package.json` dependencies (MUI, Chakra, shadcn, etc.) |
-| Design system | `.claude/vibe/design-system/*/MASTER.md` |
-| Existing context | `.claude/vibe/design-context.json` (if updating) |
-
-### Step 2: Ask Clarifying Questions
-
-Present findings from Step 1, then ask what's missing:
-
-**1. Target Audience**
-- Who are the primary users? (developers, consumers, enterprise, internal)
-- Technical sophistication? (tech-savvy, general public, mixed)
-- Usage context? (desktop office, mobile on-the-go, both)
-
-**2. Brand Personality**
-- How should the product feel? (professional, playful, minimal, bold, warm)
-- Reference products with similar feel? (e.g., "Linear-like", "Notion-like")
-- Any brand guidelines or style guide URL?
-
-**3. Aesthetic Direction**
-- Visual density preference? (spacious, balanced, dense)
-- Color mood? (warm, cool, neutral, vibrant)
-- Typography mood? (modern sans, classic serif, monospace-technical)
-
-**4. Constraints**
-- Accessibility requirements? (WCAG AA, AAA, specific needs)
-- Supported devices? (desktop-only, mobile-first, responsive)
-- Dark mode required?
-- Performance budget? (target LCP, bundle size limits)
-
-### Step 3: Save Context
-
-Write gathered context to `.claude/vibe/design-context.json` using the Write tool.
-
-**Schema (v1):**
-
-```json
-{
-  "$schema": "design-context-v1",
-  "createdAt": "ISO-8601",
-  "updatedAt": "ISO-8601",
-  "audience": {
-    "primary": "Description of target users",
-    "context": "Usage environment (desktop/mobile/mixed)",
-    "expertise": "Technical level (beginner/intermediate/expert)"
-  },
-  "brand": {
-    "personality": ["3-5 adjectives"],
-    "tone": "formal | casual | playful | professional (guideline, free text allowed)",
-    "existingAssets": "Path to existing brand guidelines (optional)"
-  },
-  "aesthetic": {
-    "style": "minimal | bold | elegant | playful | corporate (guideline, free text allowed)",
-    "colorMood": "warm | cool | neutral | vibrant | muted (guideline, free text allowed)",
-    "typographyMood": "modern | classic | geometric | humanist (guideline, free text allowed)",
-    "references": ["Reference site/app URLs"]
-  },
-  "constraints": {
-    "accessibility": "AA | AAA",
-    "performance": "core-web-vitals | balanced | unlimited",
-    "browsers": ["chrome", "safari", "firefox", "edge"],
-    "devices": ["mobile", "tablet", "desktop"]
-  },
-  "detectedStack": {
-    "framework": "Detected framework",
-    "componentLibrary": "Detected component library",
-    "styling": "Detected styling approach",
-    "fonts": ["Detected fonts"]
-  }
-}
-```
-
-> **Note**: `tone`, `style`, `colorMood`, `typographyMood` values are suggestions, not closed enums. Users can enter free text.
-
-> **Size limit**: design-context.json should not exceed 10KB. The `references` array is capped at 5 items.
-
-### Step 4: Rerun Semantics
-
-When `/design-teach` is run again and `design-context.json` already exists:
-
-1. Read the existing file with the Read tool
-2. **Show existing values as defaults** for each question ("Current: professional, clean — do you want to change this?")
-3. User replies "keep" or leaves blank → that field is preserved
-4. New value entered → only that field is replaced (**field-level replacement, not merge**)
-5. `createdAt` is always preserved; only `updatedAt` is updated to the current time
-
-### Step 5: Other Skills Reference This Context
-
-Each design-* skill does the following when it runs:
-
-```
-1. Read `.claude/vibe/design-context.json`
-2. File not found → print "Run /design-teach first for better results" → continue with defaults
-3. Parse failure (invalid JSON) → warn "design-context.json parse failed" + continue with defaults → recommend re-running /design-teach
-4. Success → apply context to analysis criteria
-```
-
-## Design Workflow Integration
-
-Design skills are integrated into 3 phases of the vibe workflow:
-
-```
-SPEC Phase:
-  ① Check design-context.json (recommend /design-teach if missing)
-  ② ui-industry-analyzer → ui-design-system-gen → ui-layout-architect
-
-REVIEW Phase:
-  ③ /design-audit (technical quality check)
-  ④ /design-critique (UX review)
-  ⑤ ui-antipattern-detector (AI slop + pattern detection)
-
-PRE-SHIP Phase:
-  ⑥ /design-normalize (design system alignment)
-  ⑦ /design-polish (final pass)
-```
-
-## How Other Skills Use This
-
-| Skill | Context Usage |
-|-------|---------------|
-| `/design-audit` | Weight findings by audience constraints (a11y level, devices) |
-| `/design-critique` | Adjust persona priorities by target audience |
-| `/design-polish` | Apply brand-appropriate micro-interactions |
-| `/design-normalize` | Use detected token system for replacement mapping |
-| `/design-distill` | Preserve brand-expressive elements based on personality |
-
-## Output Format
-
-```markdown
-## Design Context: {project}
-
-### Auto-Detected
-- Framework: Next.js 15
-- Styling: Tailwind CSS + shadcn/ui
-- Fonts: Inter (heading), Inter (body)
-- Tokens: 24 CSS variables found
-
-### User Provided
-- Audience: B2B SaaS, mixed technical level
-- Brand: Professional, clean (like Linear)
-- Density: Balanced
-- A11y: WCAG AA
-- Dark mode: Required
-
-### Saved
-✅ .claude/vibe/design-context.json updated
-```
-
-## Important
-
-- **Non-destructive**: Only creates/updates the context file. No code changes.
-- **Incremental**: Running `--update` preserves existing answers, only asks about gaps.
-- **Foundation**: Run this first before other design-* skills for best results.
+---
+name: design-teach
+tier: standard
+description: "Gather and store project design context — target audience, brand personality, aesthetic direction, constraints. Used by other design-* skills. Use when design-teach, design-setup, design-context."
+triggers: [design-teach, design-setup, design-context]
+priority: 50
+---
+
+# Design Teach — Project Design Context Gathering
+
+Collect project-specific design context so all design-* skills produce tailored, brand-aware results. Saves to `.claude/vibe/design-context.json`.
+
+## Usage
+
+```
+/design-teach                  # Interactive context gathering
+/design-teach --update         # Update existing context
+```
+
+## Process
+
+### Step 1: Auto-Explore Codebase
+
+Before asking questions, automatically gather existing signals:
+
+| Signal | Where to Look |
+|--------|---------------|
+| CSS variables / tokens | `*.css`, `tailwind.config.*`, `theme.*` |
+| Color palette | Existing color definitions, brand assets |
+| Typography | Font imports, font-family declarations |
+| Component library | `package.json` dependencies (MUI, Chakra, shadcn, etc.) |
+| Design system | `.claude/vibe/design-system/*/MASTER.md` |
+| Existing context | `.claude/vibe/design-context.json` (if updating) |
+
+### Step 2: Ask Clarifying Questions
+
+Present findings from Step 1, then ask what's missing:
+
+**1. Target Audience**
+- Who are the primary users? (developers, consumers, enterprise, internal)
+- Technical sophistication? (tech-savvy, general public, mixed)
+- Usage context? (desktop office, mobile on-the-go, both)
+
+**2. Brand Personality**
+- How should the product feel? (professional, playful, minimal, bold, warm)
+- Reference products with similar feel? (e.g., "Linear-like", "Notion-like")
+- Any brand guidelines or style guide URL?
+
+**3. Aesthetic Direction**
+- Visual density preference? (spacious, balanced, dense)
+- Color mood? (warm, cool, neutral, vibrant)
+- Typography mood? (modern sans, classic serif, monospace-technical)
+
+**4. Constraints**
+- Accessibility requirements? (WCAG AA, AAA, specific needs)
+- Supported devices? (desktop-only, mobile-first, responsive)
+- Dark mode required?
+- Performance budget? (target LCP, bundle size limits)
+
+### Step 3: Save Context
+
+Write gathered context to `.claude/vibe/design-context.json` using the Write tool.
+
+**Schema (v1):**
+
+```json
+{
+  "$schema": "design-context-v1",
+  "createdAt": "ISO-8601",
+  "updatedAt": "ISO-8601",
+  "audience": {
+    "primary": "Description of target users",
+    "context": "Usage environment (desktop/mobile/mixed)",
+    "expertise": "Technical level (beginner/intermediate/expert)"
+  },
+  "brand": {
+    "personality": ["3-5 adjectives"],
+    "tone": "formal | casual | playful | professional (guideline, free text allowed)",
+    "existingAssets": "Path to existing brand guidelines (optional)"
+  },
+  "aesthetic": {
+    "style": "minimal | bold | elegant | playful | corporate (guideline, free text allowed)",
+    "colorMood": "warm | cool | neutral | vibrant | muted (guideline, free text allowed)",
+    "typographyMood": "modern | classic | geometric | humanist (guideline, free text allowed)",
+    "references": ["Reference site/app URLs"]
+  },
+  "constraints": {
+    "accessibility": "AA | AAA",
+    "performance": "core-web-vitals | balanced | unlimited",
+    "browsers": ["chrome", "safari", "firefox", "edge"],
+    "devices": ["mobile", "tablet", "desktop"]
+  },
+  "detectedStack": {
+    "framework": "Detected framework",
+    "componentLibrary": "Detected component library",
+    "styling": "Detected styling approach",
+    "fonts": ["Detected fonts"]
+  }
+}
+```
+
+> **Note**: `tone`, `style`, `colorMood`, `typographyMood` values are suggestions, not closed enums. Users can enter free text.
+
+> **Size limit**: design-context.json should not exceed 10KB. The `references` array is capped at 5 items.
+
+### Step 4: Rerun Semantics
+
+When `/design-teach` is run again and `design-context.json` already exists:
+
+1. Read the existing file with the Read tool
+2. **Show existing values as defaults** for each question ("Current: professional, clean — do you want to change this?")
+3. User replies "keep" or leaves blank → that field is preserved
+4. New value entered → only that field is replaced (**field-level replacement, not merge**)
+5. `createdAt` is always preserved; only `updatedAt` is updated to the current time
+
+### Step 5: Other Skills Reference This Context
+
+Each design-* skill does the following when it runs:
+
+```
+1. Read `.claude/vibe/design-context.json`
+2. File not found → print "Run /design-teach first for better results" → continue with defaults
+3. Parse failure (invalid JSON) → warn "design-context.json parse failed" + continue with defaults → recommend re-running /design-teach
+4. Success → apply context to analysis criteria
+```
+
+## Design Workflow Integration
+
+Design skills are integrated into 3 phases of the vibe workflow:
+
+```
+SPEC Phase:
+  ① Check design-context.json (recommend /design-teach if missing)
+  ② ui-industry-analyzer → ui-design-system-gen → ui-layout-architect
+
+REVIEW Phase:
+  ③ /design-audit (technical quality check)
+  ④ /design-critique (UX review)
+  ⑤ ui-antipattern-detector (AI slop + pattern detection)
+
+PRE-SHIP Phase:
+  ⑥ /design-normalize (design system alignment)
+  ⑦ /design-polish (final pass)
+```
+
+## How Other Skills Use This
+
+| Skill | Context Usage |
+|-------|---------------|
+| `/design-audit` | Weight findings by audience constraints (a11y level, devices) |
+| `/design-critique` | Adjust persona priorities by target audience |
+| `/design-polish` | Apply brand-appropriate micro-interactions |
+| `/design-normalize` | Use detected token system for replacement mapping |
+| `/design-distill` | Preserve brand-expressive elements based on personality |
+
+## Output Format
+
+```markdown
+## Design Context: {project}
+
+### Auto-Detected
+- Framework: Next.js 15
+- Styling: Tailwind CSS + shadcn/ui
+- Fonts: Inter (heading), Inter (body)
+- Tokens: 24 CSS variables found
+
+### User Provided
+- Audience: B2B SaaS, mixed technical level
+- Brand: Professional, clean (like Linear)
+- Density: Balanced
+- A11y: WCAG AA
+- Dark mode: Required
+
+### Saved
+✅ .claude/vibe/design-context.json updated
+```
+
+## Important
+
+- **Non-destructive**: Only creates/updates the context file. No code changes.
+- **Incremental**: Running `--update` preserves existing answers, only asks about gaps.
+- **Foundation**: Run this first before other design-* skills for best results.