| name | design-audit |
| description | Lightweight UI audit for UIKit-based apps focusing on design-token discipline, component-library correctness, functional UX quality, and practical remediation. |
UIKit Design Audit
Use this skill to run quick, repeatable audits on UIKit-based consumer app screens before implementation churn.
Scope
- Token-first: prioritize semantic token correctness over one-off values.
- Component-library-respecting: prefer improving usage of existing UIKit components and recipes.
- Lightweight and durable: keep audits practical, consistent, and easy to rerun.
Audit Dimensions
- Theming and tokens: detect hardcoded colors, spacing, radii, typography, or shadows that bypass semantic tokens.
- Component composition and state: verify UIKit primitives, slots, and state variants are used correctly.
- Functional UX flows: check affordances, feedback states, error handling, and interaction continuity.
- Accessibility basics: validate focus visibility, contrast basics, labels, and keyboard reachability.
- Responsive sanity: confirm behavior across representative breakpoints and density constraints.
- Iconography consistency: enforce
lucide-react usage and flag emoji or inline SVG icon drift.
Severity Rubric
- P0: Blocking regression or severe accessibility/functionality break.
- P1: High-impact quality issue likely to affect user confidence or task completion.
- P2: Moderate inconsistency or maintainability concern.
- P3: Minor polish opportunity with low risk.
Output Format
Produce:
- Scorecard by dimension (pass/warn/fail with short rationale).
- Prioritized fix list grouped by P0 to P3.
- Recommended implementation path that preserves token and component consistency.
Follow-up
- Use
live to iterate in situ on the highest-priority findings.
- After fixes, run a polish pass for spacing, typography rhythm, and state consistency.
- Re-audit the same screen to verify token integrity and functional improvements.
Icon policy guardrail
- Use Lucide icons from
lucide-react across stories and component surfaces.
- Treat emoji icons and custom inline SVG icon drawings as design-system violations unless explicitly required for charts/illustrations.
Charting guardrail
- Charts, graphs, and sparklines must come from the visx-backed, token-themed
@archon-research/charting package (see packages/charting/DESIGN.md and the charting skill).
- Flag as violations: hand-rolled SVG chart math, hardcoded chart colors instead of
--colors-chart-* tokens, a direct @visx/* dependency in a consumer, or a chart theme rebuilt at runtime rather than passed as var(...) tokens.
