sxsphinxstack

Skills / Working / Validate a design system component

Working Design skill

Validate a design system component

Validate a shared component across behavior, variants, accessibility, content, themes, and consumers.

Procedure

  1. Define component purpose, consumers, platforms, supported variants, non-goals, and owner.
  2. Review semantics, API, states, content, tokens, dependencies, and design references.
  3. Build representative stories for normal, disabled, loading, error, empty, long, localized, and permission states.
  4. Test keyboard, focus, screen reader, zoom, contrast, motion, touch, and high-contrast behavior.
  5. Test themes, responsive layout, nested use, composition, and consumer overrides.
  6. Verify events, form behavior, errors, asynchronous updates, and server-rendered use where applicable.
  7. Compare supported browsers, frameworks, and assistive technology defined by policy.
  8. Run visual, interaction, unit, accessibility, and consumer integration tests.
  9. Pilot with at least one real consumer and record migration friction.
  10. Release only with docs, examples, versioning, known limits, and rollback.

Guardrails

  • Automated accessibility checks do not replace human interaction tests.
  • Do not expose an unstable API as a silent breaking change.
  • Consumer overrides must not defeat required behavior.

Related skills

  • Synthesize design research — Turn research records into traceable, bounded design insights and decisions.
  • Write a creative brief — Translate a creative request into an aligned brief covering audience, outcome, message, constraints, deliverables, and approval.
  • Run a usability test — Plan and run task-based usability sessions, observe participant behavior without coaching, and turn evidence into prioritized design findings.