yenhao-huang Design System
Use this skill to turn an established visual direction into stable, maintainable frontend rules. It governs implementation mechanics; it does not choose a product's brand or aesthetic direction by itself.
Workflow
- Read
STATE.md. Reset it fromreferences/template/STATE.template.mdfor a new run, then mark the active stepin_progress. - Read
references/rules/env.mdbefore assuming a framework, package manager, browser target, font source, or component library. - Inspect the existing UI, tokens, components, accessibility constraints, and loading behavior before proposing changes.
- Read
references/design-system-rules.mdand define the smallest coherent token, typography, surface, semantic-color, data, and motion contracts. - If the UI includes meaningful navigation, list changes, reveals, or shared
elements, also read
references/motion-choreography.md. - Implement within the target project's conventions. Prefer additions and migrations over breaking token or component changes.
- Validate responsive behavior, keyboard access, contrast, reduced motion, loading states, and layout stability in proportion to the change.
- Record concrete validation evidence in
STATE.mdbefore handoff.
Rules
- Use semantic tokens; do not scatter raw colors, spacing, radii, or timings.
- Keep persistent chrome stable while data, errors, and loading states change.
- Use tabular numerals for metrics, identifiers, timestamps, and aligned data.
- Motion must communicate state or spatial relationships and honor
prefers-reduced-motion. - Treat upstream examples as guidance, not as permission to override the local product, accessibility, performance, or dependency constraints.
- Do not add packages, hosted fonts, or external services without confirming the target project's environment rules and user authority.
Provenance
This maintained adaptation is derived from
connerkward/ckw-design-skill/design-system through the
sickn33/agentic-awesome-skills catalog. See references/provenance.md and
references/LICENSE.txt.