UI Design Theme

When to use this skill

Use when colors/fonts need a shared contract, when exploring a new visual direction, or when applying an already selected theme to new artifacts. This is a color/typography theme library, not a complete component design system.

How to use this skill

1. Read the canonical task, current brand/design-system sources and any explicit theme choice. Reuse an applicable choice without asking again. Conflicting approved sources require a decision; do not silently replace them.
2. If no theme has been selected, present applicable options using theme-showcase.pdf and the bundled theme files, or propose a custom theme based on actual requirements. A proposed theme remains proposed until selected or authorized; unavailable preview tools must be reported honestly.
3. Read the selected theme file. Produce a theme contract containing theme_id, version, source, maturity (proposed/selected/approved), colors, typography, fallback fonts, contrast checks, allowed overrides and unresolved decisions. Do not infer approval from file existence.
4. Write or reference the contract in the canonical design package. ui-design-spec includes its identity/version in the design task; ui-design-continuity fixes the permitted variations; ui-design-visual applies it; ui-design-review checks actual use. Do not create duplicate task status or dispatch a new run.
5. For a standalone apply request, style the requested artifact within scope and return the contract plus changed artifacts. Inside a Harness task, return the bounded result/evidence to its caller, without launching another workflow.

Best Practices