Скиллы для интерфейсов Якуба Крехела

Установка

npx skills add jakubkrehel/skills

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Набор дизайн-инженера Якуба Крехела разбит по темам. better-ui занимается радиусами вложенных скруглений, оптическим выравниванием, зонами клика и анимацией, better-typography шкалой шрифтов, переносами и OpenType, better-colors палитрами, семантическими токенами и контрастом. better-accessibility, better-layout и better-writing отвечают за доступность, группировку и порядок чтения, согласованность текстов, а better-interface объединяет их в одну проверку. Скиллы interface-review, explain-interface, break и variant вызываются вручную: подробный разбор, объяснение устройства чужого интерфейса, стресс-тест компонента во всех состояниях и сборка вариантов.

Для кого. Для фронтендеров и дизайнеров, которые доводят интерфейс до аккуратного состояния с помощью агента.

Пример запроса к агенту

Сделай interface-review страницы настроек и распиши найденные проблемы по разделам

Ограничения

Правила рассчитаны на веб-интерфейсы. Скилл better-writing ориентирован на английские тексты. README краткий, подробности в SKILL.md и справочных файлах каждого скилла.

Как отключить. Удалите плагин interfaces через /plugin или папки скиллов из каталога скиллов агента.

Проверка безопасности

• Скиллы состоят из правил и справочников

Коротко о README

README перечисляет одиннадцать скиллов с короткими описаниями тем, которые они покрывают, и отмечает, какие из них вызываются пользователем. Установка одной командой npx skills или как плагин Claude Code из маркетплейса interfaces. Лицензия MIT.

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

Похожие