@su-record/vibe 2.8.24 → 2.8.25

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

@@ -0,0 +1,86 @@
+# Design Critique: {{TARGET}}
+
+**Date**: {{DATE}}
+**Scope**: {{SCOPE_DESCRIPTION}}
+**Design Context**: {{CONTEXT_SOURCE}} (design-context.json / defaults)
+**Audience**: {{AUDIENCE_PRIMARY}} — {{AUDIENCE_EXPERTISE}}
+
+---
+
+## Heuristic Scores
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| H1 | Visibility of system status | {{H1_SCORE}}/4 | {{H1_ISSUE}} |
+| H2 | Match between system and real world | {{H2_SCORE}}/4 | {{H2_ISSUE}} |
+| H3 | User control and freedom | {{H3_SCORE}}/4 | {{H3_ISSUE}} |
+| H4 | Consistency and standards | {{H4_SCORE}}/4 | {{H4_ISSUE}} |
+| H5 | Error prevention | {{H5_SCORE}}/4 | {{H5_ISSUE}} |
+| H6 | Recognition rather than recall | {{H6_SCORE}}/4 | {{H6_ISSUE}} |
+| H7 | Flexibility and efficiency | {{H7_SCORE}}/4 | {{H7_ISSUE}} |
+| H8 | Aesthetic and minimalist design | {{H8_SCORE}}/4 | {{H8_ISSUE}} |
+| H9 | Help recognize and recover from errors | {{H9_SCORE}}/4 | {{H9_ISSUE}} |
+| H10 | Help and documentation | {{H10_SCORE}}/4 | {{H10_ISSUE}} |
+| **Total** | | **{{TOTAL_SCORE}}/40** | **{{TOTAL_PCT}}%** |
+
+---
+
+## Persona Red Flags
+
+### Power User — {{POWER_STATUS}}
+{{#POWER_ISSUES}}
+- {{ISSUE}}
+{{/POWER_ISSUES}}
+{{#POWER_CLEAR}}
+- No red flags
+{{/POWER_CLEAR}}
+
+### First-Time User — {{FIRST_TIME_STATUS}}
+{{#FIRST_TIME_ISSUES}}
+- {{ISSUE}}
+{{/FIRST_TIME_ISSUES}}
+{{#FIRST_TIME_CLEAR}}
+- No red flags
+{{/FIRST_TIME_CLEAR}}
+
+### Accessibility-Dependent User — {{A11Y_STATUS}}
+{{#A11Y_ISSUES}}
+- {{ISSUE}}
+{{/A11Y_ISSUES}}
+{{#A11Y_CLEAR}}
+- No red flags
+{{/A11Y_CLEAR}}
+
+### Stressed / Distracted User — {{STRESSED_STATUS}}
+{{#STRESSED_ISSUES}}
+- {{ISSUE}}
+{{/STRESSED_ISSUES}}
+{{#STRESSED_CLEAR}}
+- No red flags
+{{/STRESSED_CLEAR}}
+
+### Mobile-Only User — {{MOBILE_STATUS}}
+{{#MOBILE_ISSUES}}
+- {{ISSUE}}
+{{/MOBILE_ISSUES}}
+{{#MOBILE_CLEAR}}
+- No red flags
+{{/MOBILE_CLEAR}}
+
+---
+
+## Top Recommendations
+
+{{#RECOMMENDATIONS}}
+{{INDEX}}. **[{{HEURISTIC}}]** {{RECOMMENDATION}}
+{{/RECOMMENDATIONS}}
+
+---
+
+## Next Steps
+
+| Condition | Recommended Skill |
+|-----------|-------------------|
+| Visual complexity / clutter noted | `/design-distill` |
+| Token inconsistencies noted | `/design-normalize` |
+| Good overall, minor polish needed | `/design-polish` |

package/skills/design-distill/templates/design-system.md

@@ -0,0 +1,132 @@
+# Design System Summary: {{PROJECT_NAME}}
+
+**Generated**: {{DATE}}
+**Version**: {{VERSION}}
+**Source**: {{SOURCE}} (distilled from codebase / design-context.json / MASTER.md)
+
+---
+
+## Brand Identity
+
+| Attribute | Value |
+|-----------|-------|
+| Personality | {{BRAND_PERSONALITY}} |
+| Tone | {{BRAND_TONE}} |
+| Style | {{AESTHETIC_STYLE}} |
+| Color Mood | {{COLOR_MOOD}} |
+| Typography Mood | {{TYPOGRAPHY_MOOD}} |
+| Reference Products | {{REFERENCES}} |
+
+---
+
+## Color Palette
+
+### Primary
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-primary` | {{PRIMARY_VALUE}} | Primary actions, links |
+| `--color-primary-hover` | {{PRIMARY_HOVER_VALUE}} | Hover state |
+| `--color-secondary` | {{SECONDARY_VALUE}} | Secondary actions |
+
+### Surfaces
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-surface` | {{SURFACE_VALUE}} | Page background |
+| `--color-surface-raised` | {{SURFACE_RAISED_VALUE}} | Cards |
+| `--color-surface-overlay` | {{SURFACE_OVERLAY_VALUE}} | Modals |
+| `--color-border` | {{BORDER_VALUE}} | Borders |
+
+### Semantic
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-text` | {{TEXT_VALUE}} | Body text |
+| `--color-text-muted` | {{TEXT_MUTED_VALUE}} | Secondary text |
+| `--color-error` | {{ERROR_VALUE}} | Errors |
+| `--color-success` | {{SUCCESS_VALUE}} | Success |
+| `--color-warning` | {{WARNING_VALUE}} | Warnings |
+
+---
+
+## Typography
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| Heading font | {{HEADING_FONT}} | All headings |
+| Body font | {{BODY_FONT}} | Body text |
+| Mono font | {{MONO_FONT}} | Code, technical |
+
+### Scale
+
+| Token | Size | Weight | Line Height | Use |
+|-------|------|--------|-------------|-----|
+| `--text-xs` | {{XS_SIZE}} | {{XS_WEIGHT}} | {{XS_LH}} | Captions |
+| `--text-sm` | {{SM_SIZE}} | {{SM_WEIGHT}} | {{SM_LH}} | Labels |
+| `--text-base` | {{BASE_SIZE}} | {{BASE_WEIGHT}} | {{BASE_LH}} | Body |
+| `--text-lg` | {{LG_SIZE}} | {{LG_WEIGHT}} | {{LG_LH}} | Subheading |
+| `--text-2xl` | {{2XL_SIZE}} | {{2XL_WEIGHT}} | {{2XL_LH}} | Section heading |
+| `--text-4xl` | {{4XL_SIZE}} | {{4XL_WEIGHT}} | {{4XL_LH}} | Hero |
+
+---
+
+## Spacing
+
+Base unit: {{SPACING_BASE}} ({{SPACING_SYSTEM}})
+
+| Token | Value | Common Use |
+|-------|-------|------------|
+| `--space-1` | {{S1}} | Tight internal gap |
+| `--space-2` | {{S2}} | Icon-text spacing |
+| `--space-4` | {{S4}} | Component padding |
+| `--space-6` | {{S6}} | Section internal gap |
+| `--space-8` | {{S8}} | Section separation |
+| `--space-12` | {{S12}} | Large section gap |
+
+---
+
+## Shape & Elevation
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--radius-sm` | {{RADIUS_SM}} | Badges, tags |
+| `--radius-md` | {{RADIUS_MD}} | Inputs, buttons |
+| `--radius-lg` | {{RADIUS_LG}} | Cards |
+| `--radius-full` | 9999px | Pills |
+| `--shadow-sm` | {{SHADOW_SM}} | Subtle lift |
+| `--shadow-md` | {{SHADOW_MD}} | Cards |
+| `--shadow-lg` | {{SHADOW_LG}} | Dropdowns |
+| `--shadow-xl` | {{SHADOW_XL}} | Modals |
+
+---
+
+## Motion
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--duration-fast` | 150ms | Micro-interactions |
+| `--duration-normal` | 200ms | State transitions |
+| `--duration-slow` | 300ms | Page transitions |
+| `--ease-default` | {{EASE_DEFAULT}} | Standard transitions |
+| `--ease-enter` | {{EASE_ENTER}} | Elements entering |
+| `--ease-exit` | {{EASE_EXIT}} | Elements leaving |
+
+---
+
+## Component Patterns Preserved
+
+The following elements were identified as brand-expressive and preserved during distillation:
+
+{{#PRESERVED_PATTERNS}}
+- **{{NAME}}**: {{DESCRIPTION}}
+{{/PRESERVED_PATTERNS}}
+{{#NO_PRESERVED_PATTERNS}}
+- None identified — all patterns are functional
+{{/NO_PRESERVED_PATTERNS}}
+
+---
+
+## Notes
+
+{{ADDITIONAL_NOTES}}

package/skills/design-normalize/rubrics/token-naming.md

@@ -0,0 +1,117 @@
+# Design Token Naming Conventions
+
+Reference for evaluating and creating design tokens. Consistent naming prevents duplication and aids discovery.
+
+---
+
+## Naming Structure
+
+```
+--{category}-{scale-or-variant}[-{modifier}]
+```
+
+Examples: `--color-primary`, `--space-4`, `--radius-md`, `--shadow-lg-hover`
+
+---
+
+## Color Tokens
+
+### Semantic over descriptive
+
+| Preferred | Avoid | Reason |
+|-----------|-------|--------|
+| `--color-primary` | `--color-blue` | Blue may change; "primary" is stable |
+| `--color-surface` | `--color-white` | White fails in dark mode |
+| `--color-border` | `--color-gray-200` | Ties to a specific shade, not intent |
+| `--color-error` | `--color-red` | Semantic meaning is the point |
+| `--color-text-muted` | `--color-gray-500` | Describes role, not value |
+
+### Required color token set
+
+| Token | Purpose |
+|-------|---------|
+| `--color-primary` | Primary brand action color |
+| `--color-primary-hover` | Hover state of primary |
+| `--color-secondary` | Secondary action color |
+| `--color-surface` | Default background surface |
+| `--color-surface-raised` | Cards, elevated surfaces |
+| `--color-surface-overlay` | Modals, popovers |
+| `--color-border` | Default border |
+| `--color-border-focus` | Focus ring color |
+| `--color-text` | Primary body text |
+| `--color-text-muted` | Secondary/subdued text |
+| `--color-error` | Error states |
+| `--color-success` | Success states |
+| `--color-warning` | Warning states |
+
+---
+
+## Spacing Tokens
+
+Use a numeric scale tied to a base unit (4px or 8px).
+
+| Token | 4px base | 8px base | Use |
+|-------|----------|----------|-----|
+| `--space-1` | 4px | 8px | Tight gaps |
+| `--space-2` | 8px | 16px | Icon-text gap |
+| `--space-3` | 12px | 24px | Input padding |
+| `--space-4` | 16px | 32px | Card padding |
+| `--space-6` | 24px | 48px | Section gap |
+| `--space-8` | 32px | 64px | Large section |
+| `--space-12` | 48px | 96px | Hero spacing |
+
+---
+
+## Typography Tokens
+
+| Token | Purpose |
+|-------|---------|
+| `--text-xs` | Caption, footnote |
+| `--text-sm` | Secondary labels |
+| `--text-base` | Body text (≥16px on mobile) |
+| `--text-lg` | Emphasized body |
+| `--text-xl` | Subheading |
+| `--text-2xl` | Section heading |
+| `--text-3xl` | Page heading |
+| `--text-4xl` | Hero heading |
+| `--font-normal` | 400 weight |
+| `--font-medium` | 500 weight |
+| `--font-semibold` | 600 weight |
+| `--font-bold` | 700 weight |
+| `--leading-tight` | 1.2 (headings) |
+| `--leading-normal` | 1.5 (body) |
+| `--leading-relaxed` | 1.75 (long-form) |
+
+---
+
+## Border Radius Tokens
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `--radius-sm` | 4px | Tags, badges |
+| `--radius-md` | 6–8px | Inputs, buttons |
+| `--radius-lg` | 12px | Cards |
+| `--radius-xl` | 16px | Large panels |
+| `--radius-full` | 9999px | Pills, avatars |
+
+---
+
+## Shadow Tokens
+
+| Token | Use |
+|-------|-----|
+| `--shadow-sm` | Subtle card lift |
+| `--shadow-md` | Default card shadow |
+| `--shadow-lg` | Popovers, dropdowns |
+| `--shadow-xl` | Modals, floating panels |
+
+---
+
+## Anti-Patterns
+
+| Pattern | Problem | Fix |
+|---------|---------|-----|
+| `--blue-500` | Descriptive, breaks dark mode | Use `--color-primary` |
+| `--margin-top-16` | Property-specific; use spacing scale | Use `--space-4` |
+| `--button-text-color` | Component-scoped; can't be shared | Use `--color-text` or `--color-primary` |
+| `--size-large` | Ambiguous category | Specify: `--text-lg`, `--radius-lg`, `--space-lg` |

package/skills/design-normalize/templates/token-audit.md

@@ -0,0 +1,89 @@
+# Design Token Consistency Audit: {{TARGET}}
+
+**Date**: {{DATE}}
+**Token Source**: {{TOKEN_SOURCE}} (MASTER.md / design-context.json / auto-detected)
+**Scope**: {{SCOPE_DESCRIPTION}}
+
+---
+
+## Token Coverage Summary
+
+| Category | Total Found | Tokenized | Hardcoded | Coverage % |
+|----------|-------------|-----------|-----------|------------|
+| Colors | {{COLOR_TOTAL}} | {{COLOR_TOKEN}} | {{COLOR_HARD}} | {{COLOR_PCT}}% |
+| Typography sizes | {{TYPO_TOTAL}} | {{TYPO_TOKEN}} | {{TYPO_HARD}} | {{TYPO_PCT}}% |
+| Spacing | {{SPACE_TOTAL}} | {{SPACE_TOKEN}} | {{SPACE_HARD}} | {{SPACE_PCT}}% |
+| Border radius | {{RADIUS_TOTAL}} | {{RADIUS_TOKEN}} | {{RADIUS_HARD}} | {{RADIUS_PCT}}% |
+| Shadows | {{SHADOW_TOTAL}} | {{SHADOW_TOKEN}} | {{SHADOW_HARD}} | {{SHADOW_PCT}}% |
+| **Overall** | **{{GRAND_TOTAL}}** | **{{GRAND_TOKEN}}** | **{{GRAND_HARD}}** | **{{GRAND_PCT}}%** |
+
+---
+
+## Hardcoded Values Found
+
+### Colors
+
+| File | Line | Value | Nearest Token | Action |
+|------|------|-------|---------------|--------|
+{{#COLOR_FINDINGS}}
+| `{{FILE}}` | {{LINE}} | `{{VALUE}}` | `{{TOKEN}}` | {{ACTION}} |
+{{/COLOR_FINDINGS}}
+{{#NO_COLOR_FINDINGS}}
+| — | — | None found | — | — |
+{{/NO_COLOR_FINDINGS}}
+
+### Typography
+
+| File | Line | Value | Nearest Token | Action |
+|------|------|-------|---------------|--------|
+{{#TYPO_FINDINGS}}
+| `{{FILE}}` | {{LINE}} | `{{VALUE}}` | `{{TOKEN}}` | {{ACTION}} |
+{{/TYPO_FINDINGS}}
+{{#NO_TYPO_FINDINGS}}
+| — | — | None found | — | — |
+{{/NO_TYPO_FINDINGS}}
+
+### Spacing
+
+| File | Line | Value | Nearest Token | Action |
+|------|------|-------|---------------|--------|
+{{#SPACE_FINDINGS}}
+| `{{FILE}}` | {{LINE}} | `{{VALUE}}` | `{{TOKEN}}` | {{ACTION}} |
+{{/SPACE_FINDINGS}}
+{{#NO_SPACE_FINDINGS}}
+| — | — | None found | — | — |
+{{/NO_SPACE_FINDINGS}}
+
+---
+
+## New Tokens Suggested
+
+These values appear 3+ times with no matching token. Candidates for addition to MASTER.md.
+
+| Suggested Token Name | Value | Usage Count | Category |
+|----------------------|-------|-------------|----------|
+{{#SUGGESTED_TOKENS}}
+| `{{NAME}}` | `{{VALUE}}` | {{COUNT}} | {{CATEGORY}} |
+{{/SUGGESTED_TOKENS}}
+{{#NO_SUGGESTED_TOKENS}}
+| — | — | — | — |
+{{/NO_SUGGESTED_TOKENS}}
+
+---
+
+## Skipped (Intentional / Not Replaceable)
+
+{{#SKIPPED}}
+- `{{FILE}}:{{LINE}}` — `{{VALUE}}` — {{REASON}}
+{{/SKIPPED}}
+{{#NO_SKIPPED}}
+- None
+{{/NO_SKIPPED}}
+
+---
+
+## Next Steps
+
+1. {{#HAS_SUGGESTED_TOKENS}}Add suggested tokens to MASTER.md, then re-run `/design-normalize`{{/HAS_SUGGESTED_TOKENS}}
+2. {{#HAS_HARDCODED}}Run `/design-normalize` to apply replacements{{/HAS_HARDCODED}}
+3. {{#ALL_TOKENIZED}}Token coverage complete — proceed to `/design-polish`{{/ALL_TOKENIZED}}

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

@@ -0,0 +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 |

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

@@ -0,0 +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 |

package/skills/design-teach/rubrics/brand-personality.md

@@ -0,0 +1,73 @@
+# Brand Personality Assessment Framework
+
+Use this rubric to evaluate whether the current UI implementation reflects the stated brand personality. Score each axis 0–4.
+
+---
+
+## Personality Axes
+
+### Axis 1: Formality (Casual ↔ Professional)
+
+| Score | Indicators |
+|-------|------------|
+| **4** | Typography is structured, spacing generous, copy is precise; no playful shapes or informal microcopy |
+| **3** | Mostly formal with 1–2 informal touches (e.g., friendly empty state copy) |
+| **2** | Mixed signals: formal layout but casual copy, or vice versa |
+| **1** | Predominantly informal when brand requires professional tone |
+| **0** | Completely misaligned (e.g., bounce animations and emoji icons on a financial compliance tool) |
+
+### Axis 2: Energy (Calm ↔ Bold)
+
+| Score | Indicators |
+|-------|------------|
+| **4** | Color saturation, animation speed, and typographic weight all consistent with stated energy level |
+| **3** | One outlier element (e.g., a single high-saturation call-to-action in an otherwise calm palette) |
+| **2** | Energy inconsistent across pages or components |
+| **1** | Dominant energy contradicts brand intent |
+| **0** | Extreme mismatch (e.g., muted monochrome palette on an "energetic, vibrant" brand) |
+
+### Axis 3: Warmth (Cold/Technical ↔ Warm/Human)
+
+| Score | Indicators |
+|-------|------------|
+| **4** | Color temperature, illustration style, and copy voice all aligned to warmth target |
+| **3** | Mostly aligned; one section feels tonally off |
+| **2** | Neutral — neither warm nor cold, no clear personality signal |
+| **1** | Opposite of intended (e.g., cool blues throughout a "warm and approachable" consumer product) |
+| **0** | Severely misaligned — creates user trust issues or tonal dissonance |
+
+### Axis 4: Complexity (Minimal ↔ Rich)
+
+| Score | Indicators |
+|-------|------------|
+| **4** | Visual density, number of elements per screen, and information hierarchy match stated style |
+| **3** | Correct overall density with 1–2 overcrowded or overly sparse areas |
+| **2** | Inconsistent density — some screens minimal, others overwhelming |
+| **1** | Density clearly wrong for product type (e.g., a consumer app with an enterprise-dense layout) |
+| **0** | Completely unrelated to brand intent |
+
+---
+
+## Reference: Personality → Design Signal Mapping
+
+| Personality Word | Typography | Color | Spacing | Motion |
+|-----------------|------------|-------|---------|--------|
+| Professional | Geometric sans, weight contrast | Desaturated, cool neutrals | Generous, consistent | Subtle, linear ease |
+| Playful | Rounded, variable weight | High saturation, warm | Tight or expressive | Bouncy, spring ease |
+| Minimal | Single typeface, tight scale | Monochromatic or 2-color | Very generous | None or fade only |
+| Bold | High contrast, expressive display | Primary-heavy, high contrast | Dramatic gaps | Fast, snappy |
+| Warm | Humanist typeface | Warm neutrals, amber/terracotta | Comfortable | Gentle, ease-in-out |
+| Technical | Monospace or geometric | Low saturation, functional | Dense, structured | None or immediate |
+
+---
+
+## Overall Brand Alignment Score
+
+Average the four axis scores. Thresholds:
+
+| Average | Assessment |
+|---------|------------|
+| 3.5–4.0 | Strong brand alignment — personality comes through clearly |
+| 2.5–3.4 | Adequate — personality visible but inconsistent in places |
+| 1.5–2.4 | Weak — personality signals mixed or absent in key areas |
+| 0–1.4 | Misaligned — redesign brand expression before shipping |

package/skills/design-teach/templates/design-context.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "design-context-v1",
+  "createdAt": "{{ISO_DATE}}",
+  "updatedAt": "{{ISO_DATE}}",
+  "audience": {
+    "primary": "B2B SaaS — product managers and engineers at mid-size tech companies",
+    "context": "desktop",
+    "expertise": "intermediate"
+  },
+  "brand": {
+    "personality": ["professional", "clean", "trustworthy", "efficient"],
+    "tone": "professional",
+    "existingAssets": ".claude/vibe/brand/brand-guide.pdf"
+  },
+  "aesthetic": {
+    "style": "minimal",
+    "colorMood": "cool",
+    "typographyMood": "modern",
+    "references": [
+      "https://linear.app",
+      "https://vercel.com"
+    ]
+  },
+  "constraints": {
+    "accessibility": "AA",
+    "performance": "core-web-vitals",
+    "browsers": ["chrome", "safari", "firefox", "edge"],
+    "devices": ["desktop", "tablet"]
+  },
+  "detectedStack": {
+    "framework": "Next.js 15",
+    "componentLibrary": "shadcn/ui",
+    "styling": "Tailwind CSS",
+    "fonts": ["Inter"]
+  }
+}