sxsphinxstack

Skills / Starter / Create a component inventory

Starter Design skill

Create a component inventory

Inventory repeated interface patterns, variants, states, implementations, and ownership.

Procedure

  1. Define products, platforms, repositories, routes, libraries, states, and date of observation.
  2. Collect components from code, design files, screenshots, rendered pages, and usage telemetry.
  3. Group by user purpose before visual similarity.
  4. Record name, source, owner, consumers, variants, states, behavior, accessibility, tokens, dependencies, and status.
  5. Preserve near-duplicates until behavior and contracts are compared.
  6. Flag orphaned, conflicting, inaccessible, unowned, deprecated, and one-off patterns.
  7. Link representative live examples and implementation references.
  8. Propose adopt, align, merge, replace, retire, exempt, or investigate with impact.
  9. Have design and engineering owners verify a sample and disputed groups.

Guardrails

  • Do not infer usage from design files alone.
  • Keep private routes and security-sensitive details restricted.
  • Similar appearance does not prove interchangeable behavior.

Related skills

  • Create a color palette — Create a role-based color palette with accessible contrast, state coverage, theme behavior, and reproducible tokens.
  • Define design principles — Turn product values and user evidence into testable design choices.
  • Choose a type scale — Choose a practical type scale for readable hierarchy across content, controls, breakpoints, zoom, and languages.