Jakub Krehel's Interface Skills
Interfaces skills
Skills for interface polish: typography, color, layout, accessibility, product copy and a review across all of them
- 9,117 ★ on the repository
- Last commit
- MIT
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/interfaces-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills consist of rules and references
This is third-party code. Review the repository files before installing.
What it does
Design engineer Jakub Krehel's set is split by topic. better-ui handles concentric radii, optical alignment, hit areas and animation; better-typography covers type scale, wrapping and OpenType; better-colors builds palettes, semantic tokens and checks contrast. better-accessibility, better-layout and better-writing cover accessibility, grouping and reading order, and consistent copy, while better-interface runs them as one review. interface-review, explain-interface, break and variant are invoked by hand: a detailed review, explaining how a UI was built, stress-testing a component in every state, and building variants.
Who it is for. For frontend developers and designers polishing interfaces with an agent.
Good fit when
- You need a detailed interface review of typography, color, layout and accessibility
- You need to run a component through every state and find where it breaks
- You want several component variants quickly
Not a fit when
- You need to design a product from scratch rather than polish one
- Your project has no web interface
Example request
Run interface-review on the settings page and list findings by categoryLimitations
Rules target web interfaces. better-writing is geared to English copy. The README is brief; details live in each skill's SKILL.md and reference files.
How to disable. Uninstall the interfaces plugin via /plugin or delete the skill folders from the agent's skills directory.
FAQ
Which skills are manual only?
interface-review, explain-interface, break and variant.
Where do the rules come from?
From the author's articles on his site and his design engineering magazine, Interfaces.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A skill that bans the stock AI interface with floating cards, gradients and glass and sets plain sizes, radii and shadows like Linear
A UI design skill: three genuinely different directions side by side, one chosen and refined against real screenshots in agents like Claude Code
README in short
The README lists eleven skills with the topics each covers and marks which are user-invoked. Install with one npx skills command or as a Claude Code plugin from the interfaces marketplace. MIT licensed.
README badge
Original SKILL.md
--- name: better-accessibility description: Helps your project comply with accessibility standards and best practices. --- # Accessibility Most accessibility is free if you use the platform. Native elements ship with keyboard support, real labels announce themselves and a visible focus ring is one CSS rule. Write every fix in the project's styling system, and use the exact values below rather than familiar-looking substitutes. Reviewing means two walks. Keyboard-only, where every flow completes without a mouse. Then screen-reader, where every control announces a name, a role and its state. When unsure, take the platform default over a custom rebuild, and remove ARIA rather than add it. Contrast measurement and color fixes belong to `better-colors`. Text sizing and iOS input zoom belong to `better-typography`. Spatial RTL layout belongs to `better-layout`. ## Native elements first The first rule of ARIA: don't use ARIA when a native element exists. `<button>` for actions, `<a href>` for navigation, never `<div onClick>`. A real link must support Cmd/Ctrl/middle-click. No ARIA is better than bad ARIA. See [semantics-and-aria.md](semantics-and-aria.md) for landmarks, button-vs-link and disabled states. ## Visible focus rings Style `:focus-visible`, not bare `:focus`. Keyboard users get a ring and mouse users usually don't. Prefer the browser's unmodified indicator. A custom ring needs a project focus token or another explicit color. Verify the whole indicator against every adjacent color it crosses, `currentColor` included. Use at least a `2px` solid perimeter or an equivalent visible area. Never use `outline: none` without a verified replacement, and preserve system colors in forced-colors mode. Recipes are in [focus-and-keyboard.md](focus-and-keyboard.md).