@su-record/vibe 3.2.64 → 4.0.1

package/skills/vibe.design-refine/templates/token-audit.md

@@ -1,89 +0,0 @@
-# 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-refine normalize`{{/HAS_SUGGESTED_TOKENS}}
-2. {{#HAS_HARDCODED}}Run `/design-refine normalize` to apply replacements{{/HAS_HARDCODED}}
-3. {{#ALL_TOKENIZED}}Token coverage complete — proceed to `/design-refine polish`{{/ALL_TOKENIZED}}

package/skills/vibe.design-review/SKILL.md

@@ -1,150 +0,0 @@
----
-name: vibe.design-review
-user-invocable: true
-invocation: [command, auto]
-tier: standard
-description: "Design quality review — technical audit (a11y, performance, responsive, theming, AI slop) + UX critique (Nielsen heuristics, persona red flags). Read-only report. Use when design-review, design-audit, ui-audit, a11y-check, ux-review."
-triggers: [design-review, design-audit, ui-audit, a11y-check, design-critique, ux-review]
-priority: 50
----
-
-# Design Review — Technical Audit + UX Critique
-
-## Done Criteria
-
-- [ ] review report가 지정 출력 경로에 존재한다.
-- [ ] 모든 finding에 severity와 파일·행 또는 화면 근거가 있다.
-- [ ] accessibility, responsive, performance, theming 검사가 판정되어 있다.
-- [ ] 발견된 P1 개수와 최종 판정이 보고서에 기록되어 있다.
-
-Read-only design quality review. Two modes selected by the first argument. No code modifications — report only.
-
-## Usage
-
-```
-/design-review <target>           # Both modes (audit + critique)
-/design-review audit <target>     # Technical quality audit only
-/design-review critique <target>  # UX critique only
-/design-review .                  # Review all changed UI files
-```
-
-## Shared Scoring Scale (0–4)
-
-| Score | Meaning |
-|-------|---------|
-| 0 | Violated / critical failures |
-| 1 | Major issues — degraded experience |
-| 2 | Moderate — functional but rough |
-| 3 | Good — minor friction/polish only |
-| 4 | Excellent — production ready |
-
-Detailed per-level criteria: `rubrics/scoring.md` (audit) · `rubrics/ux-heuristics.md` (critique).
-
----
-
-## Mode: audit — 5-Dimension Technical Quality
-
-### 1. Accessibility (a11y)
-- Interactive elements keyboard-reachable, visible focus indicator, focus order
-- ARIA roles/labels on custom widgets; inputs linked to `<label>` or `aria-label`
-- Color contrast ≥ 4.5:1 (text), ≥ 3:1 (large text, UI components)
-- Meaningful `alt` text; `aria-live` for dynamic content; skip-to-content link
-
-### 2. Performance
-- Images: `loading="lazy"` below fold, `srcset`, WebP/AVIF
-- Fonts: `font-display: swap`, ≤3 font files; no blocking scripts in `<head>`
-- Route-level code-splitting; explicit media `width`/`height` (no layout shift); no duplicate deps
-
-### 3. Responsive
-- Mobile-first `min-width` breakpoints (or consistent direction); no horizontal scroll
-- Touch targets ≥ 44×44px; typography scales (clamp or breakpoints)
-- `@container` where component-level responsiveness needed; navigation adapts on mobile
-
-### 4. Theming
-- Colors/spacing/radius/shadows via design tokens (CSS custom properties, not hardcoded)
-- Dark mode support or documented opt-out; variants via classes/data attributes, not inline styles
-
-### 5. AI Slop Detection (full pattern list: `rubrics/ai-slop-patterns.md`)
-- No cyan-on-dark / neon accents or purple-to-blue gradients without brand justification
-- No hero-metric template, identical icon+title+description card grids, gradient text on stats
-- No default glassmorphism, bounce/elastic easing on functional animations, lazy Inter/Roboto choice
-
-### Severity Tagging
-
-| Severity | Meaning | Example |
-|----------|---------|---------|
-| P0 | Blocker — breaks functionality | Missing focus trap on modal |
-| P1 | Critical — significant UX impact | No keyboard navigation |
-| P2 | Important — noticeable quality gap | Touch targets too small |
-| P3 | Minor — polish opportunity | Inconsistent border radius |
-
-Multi-agent orchestration (parallel dimension auditors): `orchestrator.md` + `agents/`. Frameworks: `frameworks/wcag-checklist.md`, `frameworks/core-web-vitals.md`.
-
----
-
-## Mode: critique — UX Review
-
-### Nielsen's 10 Heuristics (0–4 each; code-level evidence in `rubrics/ux-heuristics.md`)
-
-| # | Heuristic | What to Check |
-|---|-----------|---------------|
-| H1 | Visibility of system status | Loading indicators, progress, state feedback |
-| H2 | Match with real world | Natural language, familiar icons, logical groupings |
-| H3 | User control and freedom | Undo/redo, cancel, exit paths |
-| H4 | Consistency and standards | Same action = same pattern, platform conventions |
-| H5 | Error prevention | Confirmations, input constraints, disabled states |
-| H6 | Recognition over recall | Visible options, contextual help, breadcrumbs |
-| H7 | Flexibility and efficiency | Shortcuts, defaults, power-user paths |
-| H8 | Aesthetic and minimalist design | Signal-to-noise, essential info only |
-| H9 | Error recognition and recovery | Clear messages, suggested fixes |
-| H10 | Help and documentation | Tooltips, onboarding, contextual guidance |
-
-### 5-Persona Red Flag Analysis
-
-| Persona | Red-Flag Questions |
-|---------|-------------------|
-| Power User | Fast task completion? Shortcuts/bulk actions? Adequate density? |
-| First-Time User | Obvious entry point? Primary task without docs? Progressive disclosure? |
-| Accessibility-Dependent | Screen-reader navigation sane? Color not the only channel? Text resizable? |
-| Stressed / Distracted | Easy mistake recovery? Destructive actions guarded? Critical info scannable? |
-| Mobile-Only | Touch targets adequate? One-thumb reach? Minimal typing in forms? |
-
----
-
-## Platform Adaptation
-
-On mobile stacks (React Native, Flutter, iOS, Android): skip web-specific items (CSS variables, `@container`, `srcset`, `font-display`, breadcrumbs/URLs); evaluate against platform HIG / Material Design; adapt responsive checks (safe areas, orientation); focus on hierarchy, cognitive load, a11y, AI slop.
-
-## Preparation
-
-1. **Read** `.vibe/design-context.json`
-   - Missing → display "Run `/design-teach` first for better results" → proceed with defaults
-   - Parse error → warn → proceed with defaults → recommend `/design-teach`
-   - Present → weight audit findings by `audience.context` / `constraints.accessibility` / `brand.personality`; adjust critique persona priorities by `audience.primary` / `audience.expertise`
-2. **Read** `.vibe/design-system/*/MASTER.md` (if exists) for token reference
-
-## Output Format
-
-```markdown
-## Design Review: {target} (mode: {audit|critique|both})
-
-### Scores — | Dimension / Heuristic | Score | Key Issue | ... | **Overall N/M (NN%)** |
-### Findings — audit: P0→P3 with {file}:{line} · critique: persona red flags 🔴🟡🟢
-### Top Recommendations — priority-ordered actionable items
-```
-
-Full report templates: `templates/report.md` (audit) · `templates/critique-report.md` (critique).
-
-## Next Steps
-
-| If Result Shows | Recommended Next |
-|----------------|-----------------|
-| Visual complexity / clutter | `/design-refine distill` |
-| Token / design-system inconsistencies | `/design-refine normalize` |
-| Ship-ready or minor polish only | `/design-refine polish` |
-
-## Important
-
-- **Read-only**: produces a report. Does NOT modify code.
-- **Context-aware**: weighted by `.vibe/design-context.json` when present.
-- **Incremental**: on `.`, only reviews files in the current diff.

package/skills/vibe.design-review/agents/a11y-auditor.md

@@ -1,43 +0,0 @@
----
-name: design-a11y-auditor
-role: WCAG 2.1 AA compliance checker for UI components and pages
-tools: [Read, Grep, Glob]
----
-
-# Accessibility Auditor
-
-## Role
-Audits UI source code for WCAG 2.1 AA compliance violations. Examines markup, component props, color usage, keyboard interaction patterns, and ARIA usage to identify barriers that would prevent users with disabilities from accessing the interface.
-
-## Responsibilities
-- Check for missing or inadequate `alt` attributes on images and icon elements
-- Verify interactive elements have accessible names (aria-label, aria-labelledby, or visible text)
-- Detect color contrast issues by flagging hardcoded low-contrast color pairs
-- Check for keyboard accessibility: focus traps, missing tabIndex, onClick without onKeyDown
-- Validate semantic HTML usage: headings hierarchy, landmark regions, form label associations
-- Audit ARIA usage: no invalid roles, no aria-hidden on focusable elements
-
-## Input
-- Target file paths or glob pattern (e.g., `src/components/**/*.tsx`)
-- Optional: WCAG level to audit against (default: AA)
-
-## Output
-Findings grouped by WCAG criterion:
-```markdown
-### Accessibility Audit
-
-**Criterion 1.1.1 — Non-text Content (Level A)**
-- src/components/Avatar.tsx:12 — `<img>` missing alt attribute [FAIL]
-
-**Criterion 4.1.2 — Name, Role, Value (Level A)**
-- src/components/IconButton.tsx:8 — interactive element has no accessible name [FAIL]
-
-Score: {passed}/{total} criteria checked
-```
-
-## Communication
-- Reports findings to: `design-scorer`
-- Receives instructions from: design-review orchestrator (SKILL.md)
-
-## Domain Knowledge
-WCAG 2.1 AA criteria (critical subset): 1.1.1 Non-text Content, 1.3.1 Info and Relationships, 1.4.3 Contrast (4.5:1 normal text / 3:1 large text), 1.4.11 Non-text Contrast (3:1), 2.1.1 Keyboard, 2.4.3 Focus Order, 2.4.7 Focus Visible, 3.3.2 Labels or Instructions, 4.1.2 Name Role Value. ARIA 1.1 authoring practices for widget patterns.

package/skills/vibe.design-review/agents/performance-auditor.md

@@ -1,46 +0,0 @@
----
-name: design-performance-auditor
-role: Checks image optimization, font loading, and bundle size patterns for web performance
-tools: [Read, Grep, Glob]
----
-
-# Performance Auditor
-
-## Role
-Audits frontend code for performance anti-patterns that degrade Core Web Vitals scores. Focuses on image loading, font loading strategy, JavaScript bundle composition, and render-blocking patterns detectable through static analysis.
-
-## Responsibilities
-- Detect unoptimized image usage: missing `width`/`height`, missing `loading="lazy"` on off-screen images, no next/image or similar optimization wrapper
-- Check font loading strategy: render-blocking `@font-face` without `font-display`, self-hosted vs. third-party font tradeoffs
-- Identify large bundle contributors: wildcard imports (`import * as`), importing entire libraries for one function
-- Flag synchronous scripts in `<head>` without `defer` or `async`
-- Detect missing `preload` or `prefetch` hints for critical resources
-
-## Input
-- Target file paths or glob pattern
-- Optional: framework context (e.g., Next.js, Vite) to apply framework-specific rules
-
-## Output
-Performance findings by category:
-```markdown
-### Performance Audit
-
-**Images (LCP impact)**
-- src/pages/Home.tsx:23 — `<img>` missing explicit width/height (layout shift risk) [WARN]
-- src/pages/Home.tsx:45 — large hero image without loading="lazy" [WARN]
-
-**Fonts (FCP impact)**
-- src/styles/fonts.css:3 — @font-face missing font-display descriptor [FAIL]
-
-**Bundle Size**
-- src/utils/dates.ts:1 — `import * as dateFns from 'date-fns'` imports full library [WARN]
-
-Score: {passed}/{total} checks
-```
-
-## Communication
-- Reports findings to: `design-scorer`
-- Receives instructions from: design-review orchestrator (SKILL.md)
-
-## Domain Knowledge
-Core Web Vitals targets: LCP < 2.5s (good), FID/INP < 100ms, CLS < 0.1. Image optimization: WebP/AVIF preferred, explicit dimensions prevent CLS, lazy loading below fold. Font loading: `font-display: swap` prevents FOIT, `preload` for critical fonts. Bundle: code splitting, tree shaking, dynamic imports for route-level splitting.

package/skills/vibe.design-review/agents/responsive-auditor.md

@@ -1,46 +0,0 @@
----
-name: design-responsive-auditor
-role: Verifies breakpoint coverage, touch target sizes, and viewport-relative layout patterns
-tools: [Read, Grep, Glob]
----
-
-# Responsive Auditor
-
-## Role
-Audits CSS and component code for responsive design gaps. Checks that layouts work across standard breakpoints, touch targets meet minimum size requirements for mobile users, and that viewport-relative units are used appropriately. Detects fixed-width patterns that break on small screens.
-
-## Responsibilities
-- Detect fixed pixel widths on container elements that would overflow on mobile
-- Verify touch target minimum size (44x44px per WCAG 2.5.5, 24x24px minimum per 2.5.8)
-- Check for media query coverage across standard breakpoints (sm/md/lg/xl)
-- Flag viewport units (`vw`, `vh`) used without `svw`/`svh` fallback on mobile (URL bar issue)
-- Detect horizontal scrollbar triggers: `overflow-x: hidden` masking layout issues
-- Check text remains readable at 200% zoom (no `overflow: hidden` clipping on text containers)
-
-## Input
-- Target file paths or glob pattern (CSS, TSX, JSX)
-- Optional: design system breakpoints config
-
-## Output
-Responsive findings:
-```markdown
-### Responsive Audit
-
-**Touch Targets (Mobile)**
-- src/components/Pagination.tsx:15 — button estimated 24px — below 44px minimum [FAIL]
-
-**Fixed Widths (Small Screen)**
-- src/layouts/Sidebar.tsx:8 — `width: 280px` with no responsive override [WARN]
-
-**Breakpoint Coverage**
-- src/components/DataTable.tsx — no mobile breakpoint styles detected [WARN]
-
-Score: {passed}/{total} checks
-```
-
-## Communication
-- Reports findings to: `design-scorer`
-- Receives instructions from: design-review orchestrator (SKILL.md)
-
-## Domain Knowledge
-Standard breakpoints (Tailwind reference): sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. Mobile-first approach preferred. WCAG 2.5.5 (AA): pointer targets 44x44px. WCAG 2.5.8 (AA, 2.2): minimum 24x24px. Safe area insets required for notched devices. CSS logical properties preferred for RTL support.

package/skills/vibe.design-review/agents/scorer.md

@@ -1,47 +0,0 @@
----
-name: design-scorer
-role: Aggregates audit findings from all design agents and produces a final scored report
-tools: [Read]
----
-
-# Design Scorer
-
-## Role
-Collects findings from all four design audit agents and produces a unified score, priority ranking, and action plan. Weights issues by user impact and implementation effort to help the team focus on the highest-value improvements first.
-
-## Responsibilities
-- Collect and read findings from a11y-auditor, performance-auditor, responsive-auditor, and slop-detector
-- Calculate a score per category (0-100) based on fail/warn/pass ratio
-- Compute an overall design health score (weighted: a11y 35%, performance 30%, responsive 25%, quality 10%)
-- Rank all failures by impact × effort using a 2x2 matrix (high impact + low effort = do first)
-- Produce an actionable prioritized fix list with effort estimates
-- Generate a one-line status badge per category for quick reference
-
-## Input
-Findings markdown documents from all four audit agents.
-
-## Output
-Final scored report:
-```markdown
-## Design Audit Report
-
-| Category        | Score | Status  |
-|-----------------|-------|---------|
-| Accessibility   | 72/100 | Warning |
-| Performance     | 85/100 | Good    |
-| Responsive      | 60/100 | Needs Work |
-| Design Quality  | 90/100 | Good    |
-| **Overall**     | **76/100** | **Warning** |
-
-### Priority Fix List
-1. [High Impact, Low Effort] src/components/IconButton.tsx — add aria-label (5 min)
-2. [High Impact, Low Effort] src/styles/fonts.css — add font-display: swap (2 min)
-3. [High Impact, High Effort] Responsive table layout — needs full mobile redesign (2 hrs)
-```
-
-## Communication
-- Reports final report to: orchestrator / user
-- Receives findings from: a11y-auditor, performance-auditor, responsive-auditor, slop-detector
-
-## Domain Knowledge
-Issue weighting: WCAG A violations = Critical (blocks legal compliance); WCAG AA = High; Core Web Vitals failures = High (SEO impact); responsive failures on primary breakpoints = High; design quality = Medium. Effort estimates: attribute change = trivial, CSS addition = minor, component restructure = moderate, full redesign = major.

package/skills/vibe.design-review/agents/slop-detector.md

@@ -1,47 +0,0 @@
----
-name: design-slop-detector
-role: Detects AI-generated design anti-patterns — generic aesthetics, placeholder content, and low-polish UI
-tools: [Read, Glob, Grep]
----
-
-# Slop Detector
-
-## Role
-Identifies UI code patterns that suggest low-effort or AI-generated design: generic color palettes, Lorem Ipsum text, placeholder-style components, overuse of shadow-lg/rounded-lg, and other signals of "default aesthetic" that reduce product quality and distinctiveness.
-
-## Responsibilities
-- Detect Lorem Ipsum or generic placeholder text strings in rendered content
-- Flag generic Tailwind class overuse patterns: repeated `shadow-lg`, `rounded-xl`, `bg-gray-100` without custom design tokens
-- Identify "default card" patterns: white background + border + shadow + padding with no visual hierarchy
-- Check for excessive gradient overuse (more than 2-3 gradients in a component)
-- Detect icon-heavy UIs with no text labels (icon soup)
-- Flag `TODO: replace with real content` style comments in UI components
-
-## Input
-- Target file paths or glob pattern (TSX, JSX, HTML, CSS)
-- Optional: design token file to distinguish intentional use of shared classes
-
-## Output
-Slop findings report:
-```markdown
-### Design Quality Audit
-
-**Placeholder Content**
-- src/pages/Dashboard.tsx:34 — hardcoded "Lorem ipsum dolor sit amet" [FAIL]
-
-**Generic Aesthetics**
-- src/components/Card.tsx — shadow-lg + rounded-xl + bg-white pattern repeated 8× [WARN]
-- src/components/Hero.tsx:5 — gradient-to-r from-blue-500 to-purple-600 (default AI gradient) [WARN]
-
-**Missing Polish**
-- src/components/UserTable.tsx:12 — empty state uses generic "No data found" with no illustration or action [WARN]
-
-Score: {passed}/{total} checks
-```
-
-## Communication
-- Reports findings to: `design-scorer`
-- Receives instructions from: design-review orchestrator (SKILL.md)
-
-## Domain Knowledge
-AI-slop signals: purple-to-blue gradients, hero sections with "Transform your workflow" copy, cards with identical shadow/radius, no empty states, no loading skeletons, no error states. Nielsen's Heuristic 1 (visibility of system status) and Heuristic 8 (aesthetic and minimalist design) apply. Distinct design requires intentional deviation from framework defaults.

package/skills/vibe.design-review/frameworks/core-web-vitals.md

@@ -1,107 +0,0 @@
----
-name: core-web-vitals
-type: framework
-applies-to: [design-review]
----
-
-# Core Web Vitals — Reference Card
-
-## The Three Metrics
-
-| Metric | Measures | Good | Needs Improvement | Poor |
-|--------|----------|------|-------------------|------|
-| **LCP** — Largest Contentful Paint | Loading performance | ≤2.5s | 2.5s–4.0s | >4.0s |
-| **INP** — Interaction to Next Paint | Responsiveness (replaces FID) | ≤200ms | 200ms–500ms | >500ms |
-| **CLS** — Cumulative Layout Shift | Visual stability | ≤0.1 | 0.1–0.25 | >0.25 |
-
-> **INP replaced FID** as a Core Web Vital in March 2024.
-
-## LCP — Largest Contentful Paint
-
-**What triggers LCP**: `<img>`, `<video>` poster, background-image via CSS, block-level text.
-
-### Common Causes of Poor LCP
-
-| Cause | Fix |
-|-------|-----|
-| Render-blocking resources | Move scripts to `defer`/`async`, inline critical CSS |
-| Slow server response (TTFB >600ms) | CDN, edge caching, preconnect hints |
-| LCP image not preloaded | Add `<link rel="preload" as="image">` for hero image |
-| LCP image lazy-loaded | Remove `loading="lazy"` from above-fold images |
-| Large uncompressed images | Use WebP/AVIF, set `srcset`, compress ≤200KB for hero |
-
-```html
-<!-- Good: preload LCP image, no lazy loading above fold -->
-<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
-<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">
-```
-
-## INP — Interaction to Next Paint
-
-**What triggers INP**: Click, tap, keyboard input — measures time until next frame paint.
-
-### Common Causes of Poor INP
-
-| Cause | Fix |
-|-------|-----|
-| Long JS tasks (>50ms) blocking main thread | Break into chunks with `scheduler.yield()` |
-| Heavy event handlers | Debounce input, defer non-critical work |
-| Synchronous layout thrash | Batch DOM reads/writes, use `requestAnimationFrame` |
-| Large React re-renders on interaction | `useMemo`, `useCallback`, virtualize long lists |
-
-```ts
-// Good: yield back to browser between chunks
-async function processLargeList(items: Item[]): Promise<void> {
-  for (const chunk of chunkArray(items, 50)) {
-    processChunk(chunk);
-    await scheduler.yield(); // let browser paint between chunks
-  }
-}
-```
-
-## CLS — Cumulative Layout Shift
-
-**What causes shifts**: Elements inserted above existing content, images/iframes without dimensions, fonts swapping.
-
-### Common Causes of Poor CLS
-
-| Cause | Fix |
-|-------|-----|
-| Images without `width`/`height` | Always set explicit dimensions or `aspect-ratio` |
-| Dynamic content injection (ads, banners) | Reserve space with `min-height` placeholders |
-| Web fonts causing FOUT/FOIT | Use `font-display: swap` + preload key fonts |
-| Animations using `top`/`left`/`margin` | Use `transform` instead (compositor-only) |
-
-```css
-/* Good: reserve space before image loads */
-.hero-image {
-  aspect-ratio: 16 / 9;
-  width: 100%;
-}
-
-/* Good: compositor-only animation (no layout shift) */
-.slide-in {
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-}
-```
-
-## Measurement Tools
-
-| Tool | Purpose |
-|------|---------|
-| Chrome DevTools → Performance | Record and analyze LCP/CLS waterfall |
-| Lighthouse | Automated audit with recommendations |
-| PageSpeed Insights | Field data (CrUX) + lab data combined |
-| Web Vitals extension | Real-time metric overlay in browser |
-| `web-vitals` npm package | Measure in production JS |
-
-## Audit Checklist
-
-- [ ] LCP element identified (DevTools → Performance → Timings)
-- [ ] LCP image preloaded and not lazy-loaded
-- [ ] All images have explicit `width` + `height` (or `aspect-ratio`)
-- [ ] No layout-shifting animations using positional properties
-- [ ] Fonts preloaded with `font-display: swap`
-- [ ] No long tasks >50ms in interaction handlers
-- [ ] Third-party scripts loaded with `async`/`defer`

package/skills/vibe.design-review/frameworks/wcag-checklist.md

@@ -1,64 +0,0 @@
----
-name: wcag-checklist
-type: framework
-applies-to: [design-review]
-standard: WCAG 2.1 AA
----
-
-# WCAG 2.1 AA — Key Criteria Reference Card
-
-## Perceivable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 1.1.1 Non-text Content | A | All images have `alt` text | Check `<img>` for `alt` attribute |
-| 1.3.1 Info and Relationships | A | Structure conveyed via markup (headings, lists, labels) | Heading hierarchy is logical |
-| 1.3.3 Sensory Characteristics | A | Instructions don't rely on shape/color/location alone | "Click the red button" → add label |
-| 1.4.1 Use of Color | A | Color not the only means of conveying information | Error state uses icon + color |
-| 1.4.3 Contrast (Minimum) | AA | Text ≥ 4.5:1, large text ≥ 3:1 | Use contrast checker |
-| 1.4.4 Resize Text | AA | Text resizable to 200% without loss of content | Test at 200% browser zoom |
-| 1.4.10 Reflow | AA | Content reflows at 320px width without horizontal scroll | Test at 320px viewport |
-| 1.4.11 Non-text Contrast | AA | UI components ≥ 3:1 against adjacent colors | Buttons, inputs, focus rings |
-| 1.4.12 Text Spacing | AA | No content loss with: line-height 1.5, letter-spacing 0.12em | Apply via user stylesheet |
-| 1.4.13 Content on Hover | AA | Hover/focus content dismissible, hoverable, persistent | Tooltips must stay on hover |
-
-## Operable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 2.1.1 Keyboard | A | All functionality available via keyboard | Tab through all interactions |
-| 2.1.2 No Keyboard Trap | A | Focus not trapped (except modals — must have escape) | Press Escape in all overlays |
-| 2.4.1 Bypass Blocks | A | Skip-to-content link or landmark navigation | First focusable = skip link |
-| 2.4.3 Focus Order | A | Focus order preserves meaning and operability | Tab order matches visual flow |
-| 2.4.4 Link Purpose | A | Link purpose clear from link text or context | Avoid "click here", "read more" |
-| 2.4.6 Headings and Labels | AA | Headings and labels are descriptive | No generic "Section 1" headings |
-| 2.4.7 Focus Visible | AA | Keyboard focus indicator is visible | No `outline: none` without replacement |
-
-## Understandable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 3.1.1 Language of Page | A | `lang` attribute on `<html>` | Check `<html lang="en">` |
-| 3.2.1 On Focus | A | Focus doesn't trigger context change | No auto-submit on focus |
-| 3.2.2 On Input | A | Input change doesn't auto-navigate without warning | Select menus don't auto-submit |
-| 3.3.1 Error Identification | A | Errors identified and described in text | Not just red border — include message |
-| 3.3.2 Labels or Instructions | A | Labels or instructions for user input | All form fields labeled |
-| 3.3.3 Error Suggestion | AA | Suggest fixes when known (e.g., format hints) | "Use format MM/DD/YYYY" |
-| 3.3.4 Error Prevention | AA | Legal/financial submissions reversible or confirmable | Confirm before delete |
-
-## Robust
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 4.1.1 Parsing | A | Valid HTML (no duplicate IDs, proper nesting) | Run HTML validator |
-| 4.1.2 Name, Role, Value | A | UI components have accessible name, role, state | All custom widgets have ARIA |
-| 4.1.3 Status Messages | AA | Status messages programmatically determinable | `role="status"` or `aria-live` |
-
-## Quick Color Contrast Thresholds
-
-| Text Type | Minimum Ratio |
-|-----------|--------------|
-| Normal text (<18pt / <14pt bold) | 4.5:1 |
-| Large text (≥18pt / ≥14pt bold) | 3:1 |
-| UI components (borders, icons) | 3:1 |
-| Decorative / disabled elements | No requirement |