agentsclimarketplace
Sign in

Design system

Skill yigityildiz0/universal-ai-skill-library/skills/archive-variants/design-system

Design, implement, migrate, and validate scalable token and component systems with primitive, semantic, and component layers; themes; states; accessibility.From its SKILL.md

Install
npx -y skills add yigityildiz0/universal-ai-skill-library --skill design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.6 KB, 506 tokens by cl100k_base, as published. Nobody here has run it

Design System

Build a source of truth that connects brand decisions to implementable components. Resolve skill-dir to this folder before running bundled scripts.

Architecture

Use three layers:

  1. Primitive tokens: raw palette, type, spacing, radius, elevation, and motion scales.
  2. Semantic tokens: intent such as surface, text, border, action, success, warning, and danger.
  3. Component tokens: component/part/state decisions that reference semantic tokens.

Never make components depend directly on arbitrary raw values when a semantic role exists.

Workflow

  1. Inventory existing styles, tokens, components, platforms, and brand constraints.
  2. Define naming rules and ownership before generating files.
  3. Build primitives, then semantic roles, then component mappings.
  4. Define default, hover, focus, active, disabled, loading, selected, error, and success states.
  5. Create light/dark or product themes by remapping semantic tokens, not duplicating components.
  6. Document component anatomy, variants, content rules, keyboard behavior, and responsive behavior.
  7. Migrate incrementally and keep compatibility aliases only with an explicit removal plan.
  8. Validate contrast, missing references, cycles, invalid values, and raw-value leakage.

Read the matching reference only when needed:

  • references/token-architecture.md
  • references/primitive-tokens.md
  • references/semantic-tokens.md
  • references/component-tokens.md
  • references/component-specs.md
  • references/states-and-variants.md
  • references/tailwind-integration.md

Bundled tools

Use templates/design-tokens-starter.json as a starting structure, not unquestioned truth.

node "<skill-dir>/scripts/generate-tokens.cjs" --help
node "<skill-dir>/scripts/validate-tokens.cjs" <tokens-file>
python "<skill-dir>/scripts/html-token-validator.py" <html-file>

Run generators on a copy or preview path first. Inspect diffs before replacing user-owned token files.

Output contract

Provide token architecture, naming decisions, component/state coverage, migration impact, validation results, and remaining exceptions.

Guardrails

  • Do not hardcode brand values inside components.
  • Do not rename public tokens without a migration map.
  • Do not generate a parallel design system when a working source of truth exists.
  • Do not claim accessibility from token names alone; verify rendered combinations and states.
  • Do not bind instructions to a provider, model, or host-specific path.

What ships with it: 14 files

69.2 KB alongside SKILL.md, 5 of them executable

agents/

references/

scripts/

templates/

Keep looking

Skills are one crate of 625,857. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.