Repolode
jakubkrehel

jakubkrehel/skills

Набор навыков для AI-агентов, помогающих создавать более качественные интерфейсы: доступность, компоновка, типографика, цвет, тексты и полировка UI.

Звёзды
8,038
Форки
307
Открытые issues
5
Последний коммит
8 дней назад

Что это?

В репозитории собраны навыки для AI-агентов — переиспользуемые наборы инструкций, которые агенты для написания кода могут загружать, чтобы улучшить работу над интерфейсами. Навыки охватывают доступность, компоновку, типографику, цвет, тексты интерфейса и полировку UI. Каждый навык можно использовать отдельно или объединить с остальными с помощью единого навыка для ревью.

Навыки проверяют отдельные аспекты интерфейса. better-accessibility оценивает работу клавиатуры и фокуса, ARIA, формы и объявления для скринридеров на соответствие WCAG 2.2. better-typography отвечает за шкалу размеров шрифта, его функции, переносы и обрезку текста, а better-colors генерирует палитры, задаёт семантические токены и измеряет контрастность. better-writing и better-layout помогают проработать подписи, сообщения об ошибках, пустые состояния и адаптивную структуру.

Помимо навыков для ревью, есть инструменты для создания UI по файлу Figma или изображению дизайна, проверки ветки или pull request на регрессии интерфейса, отображения компонента со всеми его состояниями или граничными сценариями на временной странице и генерации нескольких вариантов компонента для сравнения. Установка выполняется с помощью npx skills add или плагина Claude Code.

Ключевые возможности

  • 01Объединяет проверки доступности, компоновки, текстов, типографики, цвета и UI в одном ревью.
  • 02Проверяет клавиатуру, фокус, ARIA и формы на соответствие WCAG 2.2.
  • 03Генерирует цветовые палитры, задаёт семантические токены и измеряет контрастность.
  • 04Создаёт UI по файлу Figma или изображению дизайна, используя существующие токены и компоненты проекта.
  • 05Отображает компонент со всеми его состояниями на временной странице для стресс-тестирования.

Сценарии использования

  • Проверка pull request на регрессии интерфейса перед слиянием.
  • Аудит существующего приложения на проблемы с навигацией с клавиатуры и скринридерами.
  • Настройка цветовой системы с семантическими токенами и проверками контрастности.
  • Преобразование дизайна из Figma в код, соответствующий дизайн-системе.

Быстрый старт

  1. 1

    Установите коллекцию skills

    npx skills add jakubkrehel/skills
  2. 2

    Или добавьте маркетплейс плагинов Claude Code

    /plugin marketplace add jakubkrehel/skills
  3. 3

    Затем установите плагин

    /plugin install interfaces@interfaces

Что важно знать

  • Коллекция состоит из навыков агента в формате Markdown, поэтому для работы с ней нужен совместимый ИИ-агент для программирования.

Темы

Частые вопросы

Что такое skills?
Набор навыков для AI-агентов, помогающих создавать более качественные интерфейсы: доступность, компоновка, типографика, цвет, тексты и полировка UI. В репозитории собраны навыки для AI-агентов — переиспользуемые наборы инструкций, которые агенты для написания кода могут загружать, чтобы улучшить работу над интерфейсами. Навыки охватывают доступность, компоновку, типографику, цвет, тексты интерфейса и полировку UI. Каждый навык можно использовать отдельно или объединить с остальными с помощью единого навыка для ревью.
skills можно использовать бесплатно? Какая у него лицензия?
skills распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
skills всё ещё поддерживается?
Активно поддерживается. Последний коммит в skills — 13 окт. 2026 г..
Для чего можно использовать skills?
Проверка pull request на регрессии интерфейса перед слиянием. Аудит существующего приложения на проблемы с навигацией с клавиатуры и скринридерами. Настройка цветовой системы с семантическими токенами и проверками контрастности. Преобразование дизайна из Figma в код, соответствующий дизайн-системе.
Как установить skills?
Установите коллекцию skills: npx skills add jakubkrehel/skills Или добавьте маркетплейс плагинов Claude Code: /plugin marketplace add jakubkrehel/skills Затем установите плагин: /plugin install interfaces@interfaces
Где скачать skills?
Исходный код и инструкции по установке — на GitHub: https://github.com/jakubkrehel/skills

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

Набор инструкций и знаний, который помогает Claude и другим coding agents стать экспертами по UX/UI-дизайну: DTCG-токены, спецификации компонентов, 138 дизайн-систем и 52 объективные проверки.

2,4 тыс.253JavaScriptMITОбновлён вчера