UI System Governance

Use this skill once a UI system exists or starts evolving. Its job is to keep humans and agents aligned by documenting what exists, where it lives, what rules future UI must follow, and what inconsistencies need correction.

Process

1. Locate existing design documentation: DESIGN.md, AGENTS.md, Storybook docs, component READMEs, Figma handoff notes, or design-system pages.
2. Inventory tokens: colors, typography, spacing, radius, shadows, motion, breakpoints, and theme overrides.
3. Inventory primitives, composites, organisms/feature sections, and layout shells. Note source paths, variants, sizes, and intended use.
4. Audit for token drift: inline hex values, hardcoded pixels, arbitrary Tailwind values, unmatched dark-mode colors, and component-specific one-off styles.
5. Audit for component drift: duplicate buttons/inputs/cards, variant explosion, wrappers that do not add behavior, and feature components placed in primitive folders.
6. Audit for layout drift: duplicate dashboard shells, inconsistent max widths, mismatched header/sidebar dimensions, and page-specific gutters.
7. Audit for quality gaps: missing loading/empty/error states, weak focus states, poor responsive behavior, inaccessible interactions, and missing reduced-motion handling.
8. Generate or update DESIGN.md with the current source of truth, rules for future additions, and a change log of system decisions.
9. Propose fixes in priority order. Do not silently rewrite the design system without explaining the impact.

Output format