jakubkrehel/skills

Worth a try if you already drive a coding agent on frontend work and keep getting competent-but-generic interfaces back. This is a set of written skills, not a library, so its value depends on how well a skill file steers your agent rather than on anything it executes.

The problem

You finish a feature and ask the agent to "make it look good" or "check accessibility"; it produces plausible markup that misses focus rings, has no visible hierarchy, truncates labels badly or writes error copy that says nothing actionable. You then either review it yourself against a half-remembered WCAG checklist or send it back for another vague round. With these skills installed, the agent follows a written procedure with exact values and named checks, and returns a structured report or a specific fix rather than free-form suggestions.

What's different

The design here is separation of concerns. Each skill owns one narrow area: better-typography covers type scale, spacing, wrapping and font features; better-colors generates palettes, names semantic tokens and measures contrast; better-accessibility checks keyboard and focus behaviour, ARIA, accessible names, forms and motion against WCAG 2.2; better-layout handles grouping, reading order and room for translated text. Two skills aggregate: better-interface returns one ranked report across all areas, and interface-review scopes the review to a branch, PR or uncommitted change so you see what a diff introduced.

A second group changes what the agent can author rather than check. better-ui gives exact values for border radius, optical alignment, shadows, icon states and animation. build-design builds UI from a Figma file or design image using the project's existing tokens and components. break and state-machine render a chosen component under every reachable scenario or state on a temporary page so you can work through edge cases; variant builds several versions to compare; teardown turns an object into a configurable SVG, PNG or PDF illustration; explain-interface works backwards from a live URL or screenshot to describe how it was built.

The trade-off is that several of these are user-invoked and some create temporary pages. That means the workflow changes: you need to decide when to call them, and you need to be comfortable with the agent writing throwaway files into your project. Everything is Markdown, so you can read a skill before installing it and see exactly what instructions the agent will receive — a real advantage over opaque tooling, but also the limit: quality is bounded by the prose, and there is no test suite that tells you a skill works on your stack.

Who should try it

Good fit: a developer who ships frontend with a coding agent and wants consistent review criteria across accessibility, type, colour and copy, especially teams that keep repeating the same design feedback. Also useful if you receive Figma designs and want the agent to respect existing tokens instead of inventing styles. Poor fit: someone wanting an automated linter or CI check — these are prompt-level skills with no enforcement mechanism. Also poor fit if your project has no design system or component conventions, since skills like build-design assume existing tokens and components to work from.

Requirements and limitations

The primary path is npx skills add jakubkrehel/skills; Claude Code users can instead add the repository as a plugin marketplace and install interfaces@interfaces (see install instructions). Both routes assume an agent that reads skill files and can act on them, and the Claude Code option ties you to that tool's plugin mechanism. Nothing here is a runtime dependency, so removal is a matter of removing the skill files, but ongoing upkeep is on you: when your design tokens, framework or component patterns change, the instructions the agent follows may need revisiting, and there is no versioning scheme described in the README.

Coverage is also uneven by nature. Typography, colour and accessibility have concrete measurable checks; layout and writing are more judgement-based, so results will vary more. The component-level skills that render temporary pages and stress-test states depend on your project actually being renderable in the agent's environment — a constraint worth checking before relying on break, state-machine or variant.

HotRepo's take

HotRepo recorded +746 stars and #10 on the weekly all-languages board on 2026-10-28, a single dated snapshot for a repository created 2026-07-10. With one recorded date and no daily-board history, persistence cannot be judged. Before adopting, open one skill file that matches your biggest pain point and check whether its instructions name your framework and component conventions.