ux-harness

Check components for accessibility compliance — aria labels, keyboard navigation, contrast, focus management, and semantic HTML.

Extract repeated UI patterns from page components into reusable, tiered Storybook components following UX Harness conventions.

Convert raw Tailwind color and spacing classes to semantic design tokens in assigned files. Owns a specific file set and migrates class by class.

Write and update component tests for migrated or newly built components, ensuring visual regression coverage and semantic token assertions.

Scan codebase for raw Tailwind color and spacing classes vs. semantic token usage. Reports adoption percentage and violation list with file:line references.

Scan a component, page, feature area, or the entire codebase and produce a health report against the UX Harness standard. Reports on file health, type health, style health, architecture health, test health, and Storybook health. Produces a scorecard with overall compliance percentage, per-rule breakdown, top 10 worst offenders, and trend comparison. Saves reports to ai_docs/audits/. The macro lens — for individual file checks use ux-guard. Works on any React/Tailwind frontend codebase. Triggers on: "ux-audit", "audit this page", "codebase health check", "how healthy is this", "how far are we from the standard", "compliance report", or any broad quality assessment request.

Scaffold a new component following the UX Harness standard. Calls ux-prime first to search Storybook for existing components (reduce, reuse, recycle). If a new component is needed, scaffolds: test file FIRST (TDD), component file (150-line cap, Tailwind only, strong types), types file, and hook for business logic. All files reference design system tokens. Optionally promotes to Storybook via ux-story-writer. Works on any React/Tailwind frontend codebase. Triggers on: "build a component", "create a component", "scaffold a component", "new component", "ux-component-builder", or any request to create UI elements.

Review new or modified files against the 8 UX Harness rules. Checks file length, Tailwind-only styling, strong types, Component → Hook → Service → API layering, design system token usage, test file existence, and Storybook duplication. Outputs a violation report with severity and fix suggestions. The micro lens — checks individual files. For codebase-wide health reports use ux-audit. Works on any React/Tailwind frontend codebase. Triggers on: "ux-guard", "check this against the standard", "review this file", "does this pass the harness", or before any PR or commit.

Plan and execute a full-page or feature-area migration to the UX Harness standard. Scans an entire page directory, produces a migration plan with file-by-file target states and extraction order, writes characterization tests for the whole page, then orchestrates multiple ux-refactor calls incrementally. Produces a before/after migration report. For single-file cleanup use ux-refactor. Works on any React/Tailwind frontend codebase. Triggers on: "migrate this page", "ux-migrate", "bring this page up to standard", "decompose this feature", or any multi-file tech debt request targeting an entire page or feature area.

Verify migrated or newly built components match Storybook's established style and organizational structure. Checks against all four Storybook sections — Foundations (colors, typography, icons, spacing, borders), Components (buttons, inputs, cards, tabs, badges), Widget Garage (composed widgets), and Page Examples (layout conventions) — not just individual token matches. Primary goal is reuse from Storybook; secondary is style consistency for genuinely new code. Run after any migration, refactor, or build to catch drift before it ships. Triggers on: "ux-polish", "does this match storybook", "style check", "polish this", "does this look right", "visual check", or after any ux-migrate/ux-refactor/ ux-component-builder completes.