Skip to content

Latest commit

 

History

95 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

interfaces.dev

skills.sh

A collection of agent skills that help you build a great interface. They cover UI, typography, colors, accessibility, layout, product writing and more.

Skills

  • better-interface: A cross-discipline interface review that coordinates every skill below.
  • interface-review: A review of your uncommitted changes, current branch or a pull request against every skill below. User-invoked.
  • variant: Builds several genuinely different versions of one piece of UI behind a picker, so you can flip between them in the real page and promote the one that wins. User-invoked.
  • break: Renders one component on a page in every state real use can put it in and hands that page over as a visual report of what broke. User-invoked.
  • explain-interface: Ask how something was built. Point it at a URL or a screenshot, name the thing you're curious about, and it finds the layers behind the effect and explains what each one does. User-invoked.
  • better-ui: Design engineering details that make interfaces feel polished: border radius, shadows, animations and micro-interactions.
  • better-typography: Choosing and pairing typefaces, type scales, spacing, wrapping and truncation.
  • better-colors: Color systems: building and naming palettes, applying color with meaning, contrast and theming.
  • better-accessibility: Focus states, keyboard support, ARIA, forms, screen readers, hit areas and motion.
  • better-layout: Layout structure, grouping, alignment, reading order, progressive disclosure and adaptive breakpoints.
  • better-writing: UX writing and interface copy, from button labels to errors, settings and empty states.

Install

Both methods install the same skills. They differ in what you type to run one, so pick a method and use its names.

CLI

Works in Claude Code, Codex, Opencode and other agents. You can choose which skills to install or install all of them.

npx skills add jakubkrehel/skills

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

Claude Code plugin

Installs every skill in this repository together and updates in place. Run these inside Claude Code:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

Plugin skills are namespaced under the plugin, so the change review runs as /interfaces:interface-review and variants as /interfaces:variant.

To update later, run /plugin update interfaces@interfaces and restart.

About

A collection of agent skills that help you build a great interface.

Resources

Stars

4.3k stars

Watchers

19 watching

Forks

Releases

Packages

Contributors

Languages