claude-code-workflow 7.2.27 → 7.2.28

package/.claude/skills/team-uidesign/specs/anti-patterns.md

@@ -0,0 +1,211 @@
+# AI Slop Detection Catalog
+
+20 anti-patterns that signal AI-generated or low-effort design. Reference this during research (visual quality baseline), design (avoidance), review (scoring), and implementation (validation).
+
+## Severity Guide
+
+| Severity | Meaning | Scoring Impact |
+|----------|---------|----------------|
+| P1 | Major -- immediately recognizable as AI slop | Dimension score capped at 1 |
+| P2 | Minor -- common AI default, degrades quality | Dimension score capped at 2 |
+| P3 | Polish -- subtle tell, acceptable in early iterations | Dimension score capped at 3 |
+
+---
+
+## 1. AI Color Palette -- P1
+
+**Pattern**: Cyan-on-dark, purple-blue gradients, neon accent colors against dark backgrounds. The "AI dashboard" look.
+
+**Detection**: Check for `oklch(... 250-280)` as primary + dark background, or gradient from purple to cyan/blue. Check for saturated neon accents (`chroma > 0.25`) on `lightness < 0.15` backgrounds.
+
+**Fix**: Use brand-derived colors. Reduce chroma. Apply 60-30-10 rule. Tint neutrals toward brand hue.
+
+---
+
+## 2. Gradient Text for Impact -- P1
+
+**Pattern**: `background-clip: text` with gradient fills on headings for visual flair.
+
+**Detection**: Search for `background-clip: text` or `-webkit-background-clip: text` in stylesheets.
+
+**Fix**: Use solid color with proper contrast. If emphasis needed, use weight or size, not gradient text.
+
+---
+
+## 3. Default Dark Mode with Glowing Accents -- P2
+
+**Pattern**: Dark background as default with glowing/neon UI elements. No light mode alternative.
+
+**Detection**: Check if dark theme is the only theme defined. Look for `box-shadow` with saturated colors (`0 0 Npx oklch(... 0.2+ ...)`).
+
+**Fix**: Design light mode first. Dark mode as opt-in. Use subtle elevation shadows, not glows.
+
+---
+
+## 4. Glassmorphism Everywhere -- P1
+
+**Pattern**: `backdrop-filter: blur()` on more than 2 components. Frosted glass effect as default surface treatment.
+
+**Detection**: Count `backdrop-filter: blur` occurrences. Flag if > 2 distinct components use it.
+
+**Fix**: Reserve glass effect for 1-2 overlay/modal surfaces max. Use solid or semi-transparent backgrounds elsewhere.
+
+---
+
+## 5. Hero Metric Layout -- P2
+
+**Pattern**: Big number + small label arranged in rows/grids. The "SaaS dashboard hero" pattern with 3-4 metric cards.
+
+**Detection**: Look for repeated pattern of large font-size number + small label in card grids at page top.
+
+**Fix**: Show metrics in context of their meaning. Use sparklines with real data, comparisons, or trends instead of isolated numbers.
+
+---
+
+## 6. Identical Card Grids -- P2
+
+**Pattern**: 3+ cards with identical dimensions, same padding, same shadow, same structure. No visual hierarchy.
+
+**Detection**: Count card components with identical styling. Flag if 3+ share exact same dimensions and no hierarchy differentiation.
+
+**Fix**: Vary card sizes by importance. Use a featured/primary card. Apply visual hierarchy through size or position.
+
+---
+
+## 7. Nested Cards -- P2
+
+**Pattern**: Card inside card -- border/shadow inside border/shadow. Creates visual clutter.
+
+**Detection**: Check for components with `border`/`box-shadow` containing child components that also have `border`/`box-shadow`.
+
+**Fix**: Flatten hierarchy. Use spacing and subtle dividers instead of nested containers.
+
+---
+
+## 8. Generic Fonts -- P2
+
+**Pattern**: Inter, Roboto, Open Sans, Lato, Montserrat, or Arial as the primary font. Zero typographic identity.
+
+**Detection**: Check `font-family` declarations for the generic font list.
+
+**Fix**: Choose from recommended fonts: Instrument Sans, Plus Jakarta Sans, DM Sans, Space Grotesk, Fraunces.
+
+---
+
+## 9. Rounded Rectangles + Generic Drop Shadows -- P3
+
+**Pattern**: More than 5 elements with identical `border-radius` and generic `box-shadow` (e.g., `0 1px 3px rgba(0,0,0,0.1)`).
+
+**Detection**: Count elements sharing identical `border-radius` + `box-shadow` values. Flag if > 5.
+
+**Fix**: Vary border-radius by component type (buttons vs cards vs modals). Use layered shadows with tinted colors.
+
+---
+
+## 10. Large Icons Above Every Heading -- P2
+
+**Pattern**: Decorative icon placed above every section heading. Adds visual noise without meaning.
+
+**Detection**: Check for repeated icon + heading pattern across 3+ sections.
+
+**Fix**: Use icons sparingly and only where they add meaning. Prefer inline icons at heading size, not oversized decorative ones.
+
+---
+
+## 11. One-Side Border Accent -- P3
+
+**Pattern**: `border-left: 3px solid var(--accent)` on cards or sections as the sole visual treatment.
+
+**Detection**: Search for one-sided border declarations on 3+ components.
+
+**Fix**: Use spacing, background tinting, or typography to create differentiation instead.
+
+---
+
+## 12. Decorative Sparklines -- P2
+
+**Pattern**: Tiny charts with no axis labels, no data context, no interactivity. Pure decoration.
+
+**Detection**: Check for chart/sparkline components without accessible labels, axis values, or data source.
+
+**Fix**: Either make charts meaningful (labels, context, interaction) or remove them. No decorative data visualization.
+
+---
+
+## 13. Bounce/Elastic Easing -- P2
+
+**Pattern**: Bounce or elastic easing on UI transitions. Feels toylike and unprofessional.
+
+**Detection**: Search for `bounce`, `elastic`, `cubic-bezier` with values > 1.0 in the second or fourth parameter.
+
+**Fix**: Use ease-out-quart `cubic-bezier(0.25, 1, 0.5, 1)` as default. See design-standards.md Motion section.
+
+---
+
+## 14. Redundant Copy -- P3
+
+**Pattern**: Heading restated in the body text immediately below. "Our Features" followed by "Here are our features."
+
+**Detection**: Compare heading text to first sentence of body. Flag if > 60% word overlap.
+
+**Fix**: Body text should expand on the heading, not repeat it. Each element earns its space.
+
+---
+
+## 15. All Buttons Primary -- P1
+
+**Pattern**: Every button is the same filled/primary style. No visual hierarchy between actions.
+
+**Detection**: Count button variants. Flag if > 80% of buttons share the same style (all filled, all same color).
+
+**Fix**: 1 primary CTA per viewport. Secondary = outline. Tertiary = text link. See design-standards.md Visual Hierarchy.
+
+---
+
+## 16. Everything Centered -- P2
+
+**Pattern**: Body text, lists, and form labels all center-aligned. Looks "designed" but kills readability.
+
+**Detection**: Check for `text-align: center` on body text, lists, or form elements (not just headings).
+
+**Fix**: Left-align body text. Center only headings, hero text, and short labels. Reading follows left edge.
+
+---
+
+## 17. Same Spacing Everywhere -- P2
+
+**Pattern**: More than 70% of spacing values are identical. No rhythm variation.
+
+**Detection**: Audit spacing tokens usage. Flag if > 70% of `gap`, `padding`, `margin` values use the same token.
+
+**Fix**: Apply rhythm: tight (4-8px) within groups, comfortable (16-24px) between items, generous (48-96px) between sections.
+
+---
+
+## 18. Monospace as Tech Aesthetic -- P3
+
+**Pattern**: Monospace font used on non-code content (headings, labels, body text) for "techy" feel.
+
+**Detection**: Check for monospace `font-family` on elements that are not `code`, `pre`, `kbd`, or `samp`.
+
+**Fix**: Reserve monospace for code. Use Space Grotesk or similar geometric sans if tech aesthetic is desired.
+
+---
+
+## 19. Modal Overuse -- P3
+
+**Pattern**: More than 3 modals in a flow for non-critical actions. Interrupts flow unnecessarily.
+
+**Detection**: Count modal/dialog components. Flag if > 3 modals exist for non-destructive actions.
+
+**Fix**: Use inline expansion, drawers, or page navigation. Reserve modals for confirmations and critical decisions.
+
+---
+
+## 20. Pure Black or Pure White -- P1
+
+**Pattern**: Using `#000000` or `#ffffff` (or `rgb(0,0,0)` / `rgb(255,255,255)`). Harsh contrast, unnatural.
+
+**Detection**: Search for `#000`, `#fff`, `#000000`, `#ffffff`, `rgb(0,0,0)`, `rgb(255,255,255)` in stylesheets and tokens.
+
+**Fix**: Use tinted neutrals. Darkest: `oklch(0.08 0.010 <hue>)`. Lightest: `oklch(0.98 0.005 <hue>)`.

package/.claude/skills/team-uidesign/specs/design-standards.md

@@ -0,0 +1,329 @@
+# Impeccable Design Standards
+
+Reference spec for all roles. Every design decision must trace back to these standards.
+
+---
+
+## Color (OKLCH)
+
+OKLCH for perceptually uniform palettes. All color tokens MUST use OKLCH notation.
+
+### Token Hierarchy
+
+primitive -> semantic -> component
+
+```
+/* Primitives */
+--color-primary          oklch(0.55 0.2 250)
+--color-primary-light    oklch(0.70 0.15 250)
+--color-primary-dark     oklch(0.40 0.22 250)
+
+/* Tinted neutrals (chroma 0.005-0.01, brand hue) */
+--color-neutral-50       oklch(0.98 0.005 250)  /* brand tinted */
+--color-neutral-100      oklch(0.95 0.006 250)
+--color-neutral-200      oklch(0.90 0.007 250)
+--color-neutral-300      oklch(0.82 0.007 250)
+--color-neutral-400      oklch(0.70 0.008 250)
+--color-neutral-500      oklch(0.55 0.008 250)
+--color-neutral-600      oklch(0.45 0.009 250)
+--color-neutral-700      oklch(0.35 0.009 250)
+--color-neutral-800      oklch(0.25 0.010 250)
+--color-neutral-900      oklch(0.15 0.010 250)
+--color-neutral-950      oklch(0.08 0.010 250)
+
+/* Semantic */
+--color-success          oklch(0.65 0.18 145)
+--color-warning          oklch(0.75 0.15 85)
+--color-error            oklch(0.55 0.22 25)
+--color-info             oklch(0.60 0.18 250)
+```
+
+### Rules
+
+- **60-30-10 rule**: 60% neutral, 30% secondary, 10% accent
+- **Never pure black** (`#000`) or **pure white** (`#fff`) -- use tinted neutrals
+- **Tinted neutrals**: chroma 0.005-0.01, hue matching brand primary
+- **Text on colored backgrounds**: use `color-mix(in oklch, ...)` not gray
+
+### Dark Mode Rules
+- Dark mode is NOT inverted light mode. It requires deliberate design:
+  - Use **lighter surfaces** for elevation/depth (not darker)
+  - **Reduce font weight** by 1 step (600→500, 500→400) — light text on dark looks heavier
+  - **Desaturate accent colors** — saturated colors vibrate on dark backgrounds
+  - Surface hierarchy: `oklch(0.15 ...)` base → `oklch(0.20 ...)` raised → `oklch(0.25 ...)` overlay
+- Never: pure black `#000` background (too harsh). Use `oklch(0.10 0.01 <hue>)` minimum
+- Test: all contrast ratios must meet WCAG AA in BOTH themes
+
+### Dangerous Color Combinations
+| Combination | Problem | Fix |
+|-------------|---------|-----|
+| Gray text on colored background | Looks washed out, low contrast | Use shade of bg color or white/dark with transparency |
+| Red + Green (adjacent) | 8% male color blindness | Add icons/patterns, not just color |
+| Yellow text on white | Near-invisible | Use dark amber instead |
+| Thin light text on images | Unpredictable contrast | Add text shadow or semi-transparent overlay |
+| Saturated colors on dark bg | Visual vibration | Desaturate: reduce OKLCH chroma by 0.05-0.10 |
+
+- **WCAG AA contrast**:
+  - Normal text: 4.5:1
+  - Large text (>= 18px bold or >= 24px): 3:1
+  - UI components and graphical objects: 3:1
+  - Focus indicators: 3:1
+
+---
+
+## Typography
+
+### Font Selection
+
+**Avoid** (overused defaults): Inter, Roboto, Open Sans, Lato, Montserrat, Arial
+
+**Recommended**: Instrument Sans, Plus Jakarta Sans, DM Sans, Space Grotesk, Fraunces
+
+### Modular Scale
+
+Choose one ratio for the project:
+
+| Name | Ratio | Use Case |
+|------|-------|----------|
+| Major Second | 1.125 | Dense UI, dashboards |
+| Minor Third | 1.200 | General purpose |
+| Major Third | 1.250 | Marketing, editorial |
+| Perfect Fourth | 1.333 | Bold, expressive |
+
+### Fluid Sizing
+
+Use `clamp()` for display and heading sizes:
+
+```css
+--text-sm:      clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
+--text-base:    clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
+--text-lg:      clamp(1.05rem, 0.95rem + 0.35vw, 1.125rem);
+--text-xl:      clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
+--text-2xl:     clamp(1.5rem, 1.25rem + 0.75vw, 1.875rem);
+--text-3xl:     clamp(1.875rem, 1.5rem + 1.1vw, 2.25rem);
+--text-display: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
+```
+
+### Line Height
+
+- Body text: 1.5
+- Headings: 1.2
+- Small / caption text: 1.6
+
+### Reading Width
+
+`max-width: 65ch` (acceptable range: 45-75ch)
+
+### Font Loading
+
+`font-display: swap` with fallback metrics:
+
+```css
+@font-face {
+  font-family: 'Plus Jakarta Sans';
+  font-display: swap;
+  size-adjust: 102%;
+  ascent-override: 95%;
+}
+```
+
+---
+
+## Spacing (4pt Base)
+
+### Scale
+
+```
+0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96 px
+```
+
+Map to tokens:
+
+```
+--space-0:   0px;
+--space-1:   4px;    /* 0.25rem */
+--space-2:   8px;    /* 0.5rem */
+--space-3:   12px;   /* 0.75rem */
+--space-4:   16px;   /* 1rem */
+--space-5:   20px;   /* 1.25rem */
+--space-6:   24px;   /* 1.5rem */
+--space-8:   32px;   /* 2rem */
+--space-10:  40px;   /* 2.5rem */
+--space-12:  48px;   /* 3rem */
+--space-16:  64px;   /* 4rem */
+--space-24:  96px;   /* 6rem */
+```
+
+### Rhythm
+
+| Context | Spacing | Tokens |
+|---------|---------|--------|
+| Tight (within groups) | 4-8px | space-1, space-2 |
+| Comfortable (between items) | 16-24px | space-4 to space-6 |
+| Generous (between sections) | 48-96px | space-12 to space-24 |
+
+### Layout Rules
+
+- Use `gap` not `margin` for sibling spacing
+- Cards only for distinct actionable content -- flatten nested cards
+- Container queries for component-level responsive behavior
+- Touch targets: **44x44px minimum**, 8px gap between adjacent targets
+
+---
+
+## Motion
+
+### Animatable Properties (ONLY these)
+
+transform, opacity, clip-path, background-color, color, border-color, box-shadow, filter
+
+### NEVER Animate (layout triggers)
+
+width, height, top, left, margin, padding
+
+### Easing
+
+Default: ease-out-quart `cubic-bezier(0.25, 1, 0.5, 1)`
+
+NEVER use: `ease`, `linear`, `bounce`, `elastic`
+
+### Duration Scale
+
+| Token | Duration | Use |
+|-------|----------|-----|
+| --duration-instant | 100ms | Toggles, checkboxes |
+| --duration-fast | 150ms | Feedback, micro-interactions |
+| --duration-normal | 250ms | Standard transitions |
+| --duration-slow | 400ms | Panels, drawers |
+| --duration-entrance | 500ms | Page/section entrance |
+| --duration-complex | 800ms | Multi-step orchestration |
+
+- Exit duration = 75% of entrance
+- Feedback animations: 100-150ms max
+
+### Stagger
+
+- Max 10 items in stagger group
+- Max 500ms total stagger duration
+- Formula: `calc(var(--index) * 50ms)`
+
+### Reduced Motion (REQUIRED)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### will-change
+
+Add via JS on `pointerenter`, remove on `animationend`/`transitionend`. Never set permanently in CSS.
+
+---
+
+## Interaction States (8 Required)
+
+Every interactive component MUST define all 8 states:
+
+| State | CSS | Visual Treatment |
+|-------|-----|------------------|
+| Default | -- | Base appearance |
+| Hover | `:hover` (wrap in `@media(hover:hover)`) | Subtle bg shift or opacity change |
+| Focus | `:focus-visible` | 2px solid accent, offset 2px |
+| Active | `:active` | `scale(0.97)` or darker background |
+| Disabled | `[disabled], [aria-disabled="true"]` | opacity 0.5, `cursor: not-allowed` |
+| Loading | `[aria-busy="true"]` | Spinner or skeleton placeholder |
+| Error | `[aria-invalid="true"]` | Red border + error message |
+| Success | custom attribute | Green check + success message |
+
+### Focus Ring Spec
+
+```css
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: inherit;
+}
+```
+
+---
+
+## Visual Hierarchy
+
+### Squint Test
+
+Blur the page -- you should immediately identify the top 2 elements and groupings.
+
+### Tools
+
+Size (3:1 ratio between primary and body), weight (max 2 weights per page), color, space, position, contrast.
+
+### CTA Hierarchy
+
+- **1 primary CTA per viewport** -- filled button
+- Secondary -- outline button
+- Tertiary -- text link
+
+### Progressive Disclosure
+
+Reveal complexity gradually. Default to the simplest view.
+
+---
+
+## Responsive
+
+### Breakpoints (mobile-first)
+
+```
+640px, 768px, 1024px, 1280px, 1536px
+```
+
+### Fluid Design
+
+Prefer `%`, `vw`, `fr`, `min()`, `max()`, `clamp()` over fixed `px`.
+
+### Mobile Requirements
+
+- Minimum 14px text
+- 44px touch targets
+- No horizontal scroll at 320px viewport
+- Adapt layout, don't hide content
+
+---
+
+## Elevation & Z-Index
+
+### Semantic Z-Index Scale
+```css
+--z-dropdown:       100;
+--z-sticky:         200;
+--z-fixed:          300;
+--z-modal-backdrop: 400;
+--z-modal:          500;
+--z-popover:        600;
+--z-toast:          700;
+--z-tooltip:        800;
+```
+
+- Never use arbitrary z-index values (z-index: 9999)
+- Each level has clear semantic meaning
+- Modal backdrop + modal are separate layers (backdrop catches clicks)
+- Toast above modal (error during modal interaction must be visible)
+
+---
+
+## UX Writing
+
+Reference: [specs/ux-writing.md](ux-writing.md) for full guidelines.
+
+Key rules for design token and component spec work:
+- Button labels: verb + object ("Save changes" not "Submit")
+- Error messages: what + why + fix
+- Empty states: acknowledge + explain value + action
+- Destructive actions: name the destruction + show count
+- Never "OK/Cancel" — use specific action names

package/.claude/skills/team-uidesign/specs/scoring-guide.md

@@ -0,0 +1,114 @@
+# 8-Dimension Quality Scoring Rubric
+
+Score each dimension 0-4. Total: 0-32.
+
+## Dimensions
+
+### 1. Anti-AI-Slop (Weight: 10%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | 4+ P1 anti-patterns present |
+| 1 | 2-3 P1 anti-patterns present |
+| 2 | 1 P1 or 3+ P2 anti-patterns present |
+| 3 | 1-2 P2 or 2+ P3 anti-patterns only |
+| 4 | Zero P1/P2 anti-patterns, at most 1 P3 |
+
+### 2. Color Quality (Weight: 15%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | No color system; hex/rgb throughout; pure black/white used |
+| 1 | Some tokens but not OKLCH; no tinted neutrals; contrast failures |
+| 2 | OKLCH used partially; tinted neutrals attempted; most contrast passes |
+| 3 | Full OKLCH; tinted neutrals; 60-30-10 applied; all WCAG AA passes; semantic tokens present |
+| 4 | Score-3 plus: primitive->semantic->component hierarchy; color-mix usage; light/dark themes complete |
+
+### 3. Typography Quality (Weight: 15%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | System/generic font only; no scale; no fluid sizing |
+| 1 | Generic font (Inter/Roboto/etc); basic size scale; no clamp() |
+| 2 | Distinctive font chosen; modular scale present; no fluid sizing |
+| 3 | Distinctive font; modular scale with clamp(); proper line-height; reading width constrained |
+| 4 | Score-3 plus: font-display swap with fallback metrics; caption/body/heading line-heights differentiated |
+
+### 4. Spacing & Layout (Weight: 12.5%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | Arbitrary spacing; no system; nested cards |
+| 1 | Some consistent spacing but not 4pt scale; margin-heavy |
+| 2 | 4pt scale used; mostly gap over margin; some rhythm variation |
+| 3 | Full 4pt scale; gap throughout; rhythm variation (tight/comfortable/generous); touch targets met |
+| 4 | Score-3 plus: container queries used; no nested cards; 8px adjacent target gaps |
+
+### 5. Motion & Animation (Weight: 10%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | Layout property animations; no easing system; no reduced-motion |
+| 1 | Some transform/opacity; default ease/linear; no reduced-motion |
+| 2 | Transform/opacity only; custom easing present; reduced-motion exists but incomplete |
+| 3 | All animations on safe properties; ease-out-quart default; duration tokens; complete reduced-motion |
+| 4 | Score-3 plus: stagger system; will-change managed via JS; exit = 75% entrance |
+
+### 6. Interaction States (Weight: 15%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | Only default state; no hover/focus/disabled |
+| 1 | 2-3 states (e.g., default + hover + disabled) |
+| 2 | 5 states (default/hover/focus/active/disabled) but missing loading/error/success |
+| 3 | All 8 states defined; :focus-visible used; hover in @media(hover:hover) |
+| 4 | Score-3 plus: focus ring spec (2px solid + offset 2px); active scale(0.97); ARIA attributes on all states |
+
+### 7. Visual Hierarchy (Weight: 10%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | Everything same size/weight; no CTA hierarchy; all centered |
+| 1 | Some size variation; multiple primary CTAs per viewport |
+| 2 | Clear heading hierarchy; CTA levels present but inconsistent |
+| 3 | Passes squint test; single primary CTA per viewport; 3:1 size ratio; max 2 weights |
+| 4 | Score-3 plus: progressive disclosure; clear information density gradient |
+
+### 8. Responsive Design (Weight: 12.5%)
+
+| Score | Criteria |
+|-------|----------|
+| 0 | Fixed widths; breaks below 768px; content hidden on mobile |
+| 1 | Some media queries; horizontal scroll at 320px; small touch targets |
+| 2 | Mobile-first breakpoints; fluid widths; 14px min text; some issues at 320px |
+| 3 | Full breakpoint coverage; fluid design (clamp/vw/fr); 44px targets; no 320px scroll |
+| 4 | Score-3 plus: container queries; adapt-don't-hide approach; fluid typography |
+
+---
+
+## Rating Bands
+
+| Score | Band | Meaning |
+|-------|------|---------|
+| 28-32 | Excellent | Production-ready, Impeccable quality |
+| 22-27 | Good | Minor polish needed, shippable |
+| 16-21 | Acceptable | Needs revision, core structure sound |
+| 10-15 | Poor | Significant rework required |
+| 0-9 | Critical | Fundamental issues, restart design phase |
+
+## Severity Mapping
+
+| Severity | Dimension Score | Action |
+|----------|----------------|--------|
+| P0 Blocking | Dimension = 0 | Must fix before any progress |
+| P1 Major | Dimension = 1 | Fix in current iteration |
+| P2 Minor | Dimension = 2 | Fix in next iteration |
+| P3 Polish | Dimension = 3 | Track for future improvement |
+
+## Signal Determination
+
+| Condition | Signal | Action |
+|-----------|--------|--------|
+| Score >= 26 AND no P0 (no dim at 0) | `audit_passed` (GC CONVERGED) | Unblock downstream |
+| Score >= 20 AND no P0 | `audit_result` (REVISION NEEDED) | Create fix task |
+| Score < 20 OR any P0 | `fix_required` (CRITICAL) | Urgent fix task |

package/.claude/skills/team-uidesign/specs/team-config.json

@@ -23,7 +23,7 @@
     "reviewer": {
       "task_prefix": "AUDIT",
       "additional_prefixes": [],
-      "responsibility": "Design consistency audit, accessibility compliance, visual review",
+      "responsibility": "8-dimension Impeccable-aligned audit (anti-slop, color, typography, spacing, motion, interaction, hierarchy, responsive)",
       "message_types": ["audit_result", "audit_passed", "fix_required", "error"]
     },
     "implementer": {