/skills

A collection of agent skills that help with various parts of building a great interface. From animation and UI polish to accessibility and product writing.

npx skills add jakubkrehel/skills
Skills (opens in a new tab)GitHub (opens in a new tab)

Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more. Based on the Details That Make Interfaces Feel Better article.

1,204
before
1,204
after

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

Interfere for Engineers

12,408

More time building, less time fixing.

Stop correlating bug reports across scattered tools. Interfere finds the root cause and owns the fix.

after

Helps convert your project to use OKLCH colors and answer anything about it. You can also convert colors, generate palettes, check contrast, clamp colors to a target gamut, set up fallbacks and more.

oklch
oklch
oklch
oklch
hsl
hsl
hsl
hsl
oklch(0.50 0.16 30)oklch(0.50 0.16 150)oklch(0.50 0.16 250)oklch(0.50 0.16 320)
hsl(30 100% 50%)hsl(150 100% 50%)hsl(250 100% 50%)hsl(320 100% 50%)
Lightness50%

Helps your project comply with accessibility standards and best practices.

before

Covers focus states, keyboard navigation, ARIA, forms, screen readers, hit areas and more.

before
after

Helps with grouping, alignment, reading order, progressive disclosure and other details that make layouts feel great in your project.

feat: add skill examples

Ready in 49s

JKjakubd32da51skills
before

Focuses on improving product copy in your project.

Are you sure?

This action cannot be undone. Please confirm to continue.

before

Delete Marketing site?

Deleting removes 24 pages. This can’t be undone.

after

Covers button labels, error messages, settings, onboarding and empty states while keeping voice and terminology consistent.

No results.

before

No projects yet

Projects keep your files, notes and tasks in one place.

after

Combines all of the /better-* skills into a single review across accessibility, layout, writing, typography, color and UI polish.

Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

Helps you figure out how something was built on the web. You can try something like /explain-interface how is the gradient on interfere.com built?.

Renders a component you choose in every state and scenario on a temporary page and stress tests it. It’s a great way to find issues in your design system that you might not be aware of.

Builds multiple variants of a component you’re working on and helps you iterate and pick one.