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

These skills are contain topics that I write about on my personal website and my design engineering magazine, Interfaces.

Skills that help build great interfaces

• better-interface: Combines all of the better-* skills into a single review.
• better-ui: Improves UI in your project across the board. Covers things like concentric border radius, optical alignment, contextual icons, hit areas, animation and more.
• better-typography: Improves type in your project. Covers type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and more.
• better-colors: Helps you build a color system and answer anything about color in your project. You can generate palettes, use semantic tokens, convert between formats, check contrast and more.
• better-accessibility: Helps your project comply with accessibility standards and best practices.
• better-layout: Helps with grouping, alignment, reading order and other details that make a great layout.
• better-writing: Focuses on improving and product copy in your project and making it consistent.
• interface-review: Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings. User-invoked.
• explain-interface: Helps you figure out how an animation, design or a piece of UI was built on the web. User-invoked.
• break: Renders a component you choose in every state and scenario on a temporary page and stress tests it. User-invoked.
• variant: Builds multiple variants of a component you're working on and helps you iterate. User-invoked.

Install

npx skills add jakubkrehel/skills

Claude Code plugin

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