design-kit

Twelve agent skills for building interfaces, bundled so one install gets the whole chain: decide what the thing should look like, then execute it properly.

Credit. Eleven of these twelve skills are the work of Jakub Krehel — jakubkrehel/skills / interfaces.dev — included unmodified under the MIT license. They are the substance of this repository. The only thing added here is skills/basic-design/. If you want his suite on its own, and it is excellent on its own, install it directly: npx skills add jakubkrehel/skills

Install

Two routes. They install the same twelve skills but differ in what you type to run one, so pick a route and use its names.

CLI — recommended

Works in Claude Code, Codex, Opencode and other agents. Installs to ~/.claude/skills/, picked up immediately with no restart.

npx -y skills@latest add lucasness/design-kit -g -y -s '*'

-g installs at user level so the skills are available in every project. -y skips prompts. -s '*' takes all twelve. Drop -g to install into the current project instead.

The CLI writes one real copy to ~/.agents/skills/ and symlinks every agent directory to it, including ~/.claude/skills/. That is what you want: updating later touches one file rather than dozens. Avoid --copy unless you specifically need independent copies, and avoid -a '*' unless you actually run the other fifty-odd agents it targets.

You will see a few ✗ ... does not support global skill installation lines for agents you probably don't have. Ignore them; the install succeeds above the noise.

Skills installed this way keep their plain names, so the change review runs as /interface-review.

Updating

npx -y skills@latest update

Re-running the add command also works and overwrites in place.

Claude Code plugin

Installs everything together and updates in place. Run inside Claude Code:

/plugin marketplace add lucasness/design-kit
/plugin install design-kit@design-kit

Plugin skills are namespaced under the plugin, so the change review runs as /design-kit:interface-review and variants as /design-kit:variant. To update later, /plugin update design-kit@design-kit and restart.

Verify

ls ~/.claude/skills/

Expect twelve directories: basic-design, better-accessibility, better-colors, better-interface, better-layout, better-typography, better-ui, better-writing, break, explain-interface, interface-review, variant.

Why these are bundled

Execution skills all start downstream of the design decision. better-typography treats a typeface change as out of scope and names Inter as the default sans. better-colors begins at "a brand color arrives as one value." variant falls back to "neutral grays, one accent and the system font stack."

Each is right for its job. But point them at a fresh scaffold and you get a beautifully crafted, accessible, perfectly spaced Inter-on-gray-with-blue-buttons app — because nothing in the chain ever decides what the product should look like.

basic-design fills that gap and nothing else. It runs once, before any code, and writes a plan: treatment, typefaces, accent hue, structural idea, density. Then it hands off and stops designing.

The skills

Originate — runs first, before any code

Skill	Owns
basic-design	Treatment, typeface choice, accent hue, structural idea. Produces a written plan and hands off.

Execute — runs during the build

Skill	Owns
better-typography	Type scale, line-height, weight, wrapping, font loading
better-colors	Color ramps, primitive/semantic tokens, theming, contrast
better-layout	Spacing, grouping, alignment, breakpoints, RTL
better-ui	Radius, shadows, motion, icons, surfaces
better-accessibility	Focus, keyboard, ARIA, hit areas, form states
better-writing	Button labels, errors, empty states, settings copy

Review and explore — user-invoked

Skill	Does
/interface-review	Reviews uncommitted changes, a branch, or a PR against every skill above
better-interface	Holistic cross-discipline review of a screen or flow
/variant	Builds three genuinely different versions of one component behind a picker
/break	Renders a component in every state real use can produce
/explain-interface	Explains how an effect on a page or screenshot was built

Credit

Eleven of these twelve skills are the work of Jakub Krehel, from jakubkrehel/skills (interfaces.dev), used under the MIT license. They are unmodified. The original LICENSE is preserved in this repository.

The only addition here is skills/basic-design/.

If you want just his suite without the addition, install it directly — it is excellent on its own:

npx skills add jakubkrehel/skills

Staying current with upstream

This repository tracks jakubkrehel/skills. Because the only local change is an added directory, merges should stay conflict-free:

git remote add upstream https://github.com/jakubkrehel/skills.git
git fetch upstream
git merge upstream/main

The one file that can conflict is .claude-plugin/plugin.json, since the plugin was renamed from interfaces to design-kit. Keep the local version.

License

MIT. Original work © 2026 Jakub Krehel; see LICENSE.