better-accessibility
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
Jakub Krehel
- 1.1K followers
- jakub.kr
A collection of agent skills that help you build great interfaces.
An agent skill that helps make your interface feel better.
An agent skill that helps you work with OKLCH colors.
better-colors
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
better-interface
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
better-layout
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
better-typography
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
better-ui
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
better-writing
Improve UX writing for interface labels, errors, empty states, settings, notifications, and product voice consistency.
break
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
build-design
Builds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.
explain-interface
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
interface-review
Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.
make-interfaces-feel-better
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
oklch-skill
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
state-machine
Renders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state.
teardown
Creates technical illustrations of physical objects and of how things work, such as display pixels or interface layers, with coherent views, fine linework and part fills.
variant
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.