agentsclimarketplace

Design system contribution

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

Curated, auditable, benchmark-ready Agent Skills library for Claude Code, Codex, OpenCode, Cursor, and more.

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.

2 things to look at

  • 28 days oldThe repository was created 28 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 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 author says it does

Copied from the file, not written here

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.

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.

Gives 0 of the 12 instructions most design systems skills give in 299 tokens

Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06

  • create a custom theme if neededin 54 of 528, across 10 files
  • read the corresponding theme filein 54 of 528, across 10 files
  • ask which theme to applyin 53 of 528, across 9 files
  • show the theme showcasein 53 of 528, across 9 files
  • maintain visual identity across all slidesin 50 of 528, across 6 files
  • apply the specified colors and fontsin 47 of 528, across 3 files
  • get explicit confirmationin 45 of 528, across 1 file
  • Generate a design system before codingin 19 of 528, across 6 files
  • Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
  • Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
  • Check Python installation and install if missingin 17 of 528, across 4 files
  • Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files

Said here and by no other author read

  • Determine if a primitive is missing or composition is needed
  • Design component API before implementation
  • Avoid prop explosion
  • Use tokens instead of magic numbers
  • Ship accessibility with the component
  • Provide Storybook docs and examples

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 328,083. 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.