← ClaudeAtlas

ui_ux_masterylisted

UI/UX design governance — design systems, accessibility audits, performance budgets, agentic UX patterns.
jxoesneon/Ciel · ★ 1 · Web & Frontend · score 80
Install: claude install-skill jxoesneon/Ciel
# ui_ux_mastery Generate and audit UI/UX artifacts against the Design Council standards (`council/rubrics/UI_UX_MASTERY_STANDARDS.md`). ## Operations - `ui.design_system(spec)` — Tailwind v4 `@theme` tokens (base → semantic → component) and shadcn/ui component specs. - `ui.bento_grid(layout_schema)` — intent-based Bento Grid layout (Hero/Utility/Micro-Data tiers) via CSS Grid. - `ui.accessibility_audit(markup)` — WCAG 2.2 AA/AAA verification (9 new success criteria) with WCAG 3.0 forward readiness. - `ui.performance_budget()` — Core Web Vitals field data thresholds (INP ≤ 200ms, LCP ≤ 2.5s, CLS ≤ 0.1 at 75th percentile). - `ui.agentic_ux()` — 6-pattern control surface (Intent Preview, Autonomy Dial, Rationale, Confidence, Receipts, Audit Trail). - `ui.thumb_zone(layout)` — dominant-hand functional area placement; destructive actions outside easy reach. - `ui.recovery_pattern(action)` — select recovery pattern (confirmation dialog / undo window / soft delete) by reversibility. - `ui.loading_strategy(duration_ms)` — loading state by duration (nothing < 400ms, skeleton 400ms–3s, progress 3–10s, bar > 10s). - `ui.dark_mode()` — OKLCH four-surface luminance hierarchy (base → raised → overlay → nested). - `ui.micro_interaction(trigger)` — spring-physics feedback (mass, stiffness, damping) in 100–400ms range. - `ui.anti_slop_audit(markup)` — detect distributional convergence (centroid look: Inter, purple gradient, three cards, emoji icons) and flag AI slop patterns. - `ui.craft_s