Скиллы для интерфейсов Якуба Крехела
Interfaces skills
Скиллы для полировки интерфейса: типографика, цвет, сетка, доступность, продуктовые тексты и ревью по всем разделам
- 9 117 ★ репозитория
- Последний коммит
- MIT
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/interfaces-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 или папки скиллов из каталога скиллов агента.
Частые вопросы
Какие скиллы запускаются только вручную?
interface-review, explain-interface, break и variant.
Откуда правила?
Из статей автора на личном сайте и в его журнале о дизайн-инженерии Interfaces.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл запрещает агенту типовой интерфейс с плавающими карточками, градиентами и стеклом и задает обычные размеры, радиусы и тени как у Linear
Скилл для дизайна интерфейсов: три разных направления рядом, выбор одного и доводка по настоящим скриншотам в Claude Code, Codex и других агентах
Из блога
Коротко о README
README перечисляет одиннадцать скиллов с короткими описаниями тем, которые они покрывают, и отмечает, какие из них вызываются пользователем. Установка одной командой npx skills или как плагин Claude Code из маркетплейса interfaces. Лицензия MIT.
Бейдж для README
Исходный 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).