Jakub Krehel's Interface Skills

Install

npx skills add jakubkrehel/skills

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.

Example request

Run interface-review on the settings page and list findings by category

Limitations

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.

Security check

• The skills consist of rules and references

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.

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).

Related