Jakub Krehel's Interface Skills
A-rankUnlike collections where one skill handles the whole interface, this splits the work so each area gets its own skill: seven `better-*` skills covering accessibility, colours, interface, layout, typography, UI, and writing, alongside `interface-review`, `explain-interface`, `variant`, and `break`. Each declares where its responsibility ends, so they compose instead of overlapping — install only the concerns you actually want the agent to own.
Install This Skill
npx skills add jakubkrehel/skills# Download SKILL.md and place in your agent's skills folder
curl -o SKILL.md https://github.com/jakubkrehel/skills/raw/main/SKILL.md/skill add jakubkrehel/jakub-krehel-skillsSkill bundle — 11 sub-skills
upstream is a skill bundleThis catalog entry is a skill bundle that ships 11 individual SKILL.md files. Each one is listed below — click through to read the full markdown on GitHub.
better-accessibility
Accessibility engineering for product interfaces. Use when building or reviewing UI components and custom widgets, or when the user reports a keyboard or screen-reader problem. Triggers on accessibility, a11y, WCAG, aria, focus ring, focus trap, keyboard navigation, tabindex, screen reader, sr-only, alt text, hit area, hover on touch, prefers-reduced-motion, autoplay, skip link, semantic HTML, form errors, disabled buttons, "not keyboard accessible".
skills/better-accessibilitybetter-colors
Color systems for digital products. Use when creating or extending a palette, theming light and dark appearances, or auditing the colors in a codebase. Triggers on color palette, palette generation, color ramp, brand color, accent color, gray palette, status colors, color tokens, token naming, theming, dark mode colors, contrast ratio, APCA, gamut, display p3, oklch, color conversion, gradients, color meaning, increased contrast.
skills/better-colorsbetter-interface
>- Cross-discipline interface review. Routes a screen, flow, or feature to every `better-*` domain skill and consolidates one ranked verdict. Use when asked for a holistic review rather than a single domain and when `interface-review` hands up a change to route. Triggers on better-interface, holistic interface review, review the whole screen.
skills/better-interfacebetter-layout
Layout structure for web interfaces. Use when structuring a page or component, deciding what collapses at small sizes, or reviewing frontend code for layout. Triggers on layout, spacing, alignment, grouping, whitespace, visual hierarchy, reading order, progressive disclosure, breakpoints, container queries, safe area, full-bleed, layout margins, RTL layout, logical properties.
skills/better-layoutbetter-typography
Web typography. Use when picking or pairing typefaces, setting up a type scale, or styling and truncating text in components. Triggers on typography, font loading, woff2, variable fonts, opentype features, type scale, heading hierarchy, line-height, letter-spacing, measure, text-wrap, truncation, tabular numbers, underlines, text selection, iOS input zoom, font smoothing, smart punctuation, text-box, drop cap.
skills/better-typographybetter-ui
Design engineering principles for making interfaces feel polished. Use when building UI components, implementing animations or hover states, or doing any visual detail work. Triggers on UI polish, "feels off", stagger animations, enter animations, theme switch transitions, border radius, optical alignment, image outlines, box shadows, icons, icon stroke weight, motion restraint.
skills/better-uibetter-writing
>- UX writing and interface copy. Use when writing or reviewing any user-facing text. Triggers on UX writing, microcopy, button labels, link text, error messages, empty states, placeholder text, settings labels, capitalization, sentence case, voice and tone.
skills/better-writingbreak
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.
skills/breakexplain-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.
skills/explain-interfaceinterface-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.
skills/interface-reviewvariant
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.
skills/variant