agentsclimarketplace
Sign in

Design system contribution

Skill shinzoxD/knackbox/skills/coding/design-system-contribution

Guide contributions to a design system — component API, accessibility, tokens, and docs. Use whenever the user adds a design-system component, variants, design tokens, Storybook docs, or asks how to version UI primitives safely.From its SKILL.md

Install
npx -y skills add shinzoxD/knackbox --skill design-system-contribution

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

One thing to look at

  • 0 stars0 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.

What its file declares

Copied from the file, not written here

The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

1.8 KB, 299 tokens by cl100k_base, as published. Nobody here has run it

Design System Contribution

Design systems succeed on consistency and safe evolution. Components need a stable API, a11y, tokens, and docs — not one-off CSS.

Workflow

  1. Problem: which user/product need; is a primitive missing or a composition?
  2. API: props, variants, slots/composition; avoid prop explosion.
  3. Tokens: color/space/type via tokens, not magic numbers.
  4. A11y: keyboard, name/role, focus, contrast baselines.
  5. Docs: examples, do/don't, accessibility notes, Storybook stories.
  6. Versioning: additive changes preferred; breaking changes flagged.

Output format

## DS contribution: <component>

### API proposal
…

### Tokens
…

### A11y requirements
…

### Docs / stories
…

### Migration / versioning
…

Rules

  1. Prefer composition over mega-components.
  2. Do not invent brand tokens; use or extend the system’s token names.
  3. Ship accessibility with the component, not as follow-up.
  4. Public API needs explicit default and controlled/uncontrolled behavior.
  5. Visual QA across themes/densities when those exist.
  6. Coordinate with product one-offs: promote only when reused.

Edge cases

  • Icons: sizing, aria-hidden vs labeled buttons.
  • Forms: label association and error text.
  • Breaking visual change: major version or explicit migration.

What ships with it: 1 file

1.4 KB alongside SKILL.md

benchmarks/

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.