AIKraft/AI/Войти
AIKraft/Skills/coss

coss

Помогает корректно использовать UI-компоненты coss (кнопки, диалоги, формы и др.), мигрировать с shadcn/Radix на coss/Base UI и настраивать доступность. Применяется при разработке интерфейсов, стилизации через Tailwind и отладке компонентов.

COcosscom official Разработка ★ 10.6k

Что делает навык

Навык помогает корректно использовать UI-компоненты coss (на базе Base UI), выбирать правильные примитивы и писать код с учетом их API. Он также обеспечивает корректную миграцию с shadcn/Radix, настройку доступности и стилизацию через Tailwind CSS v4.

Когда применять

  • Выбор подходящих примитивов coss для конкретной UI-задачи и написание кода с правильными импортами и композицией.
  • Миграция существующих компонентов с shadcn или Radix на coss/Base UI с учетом специфических паттернов и избеганием ошибок.
  • Отладка и проверка доступности (a11y) компонентов, таких как диалоги, меню, формы и тосты, согласно документации coss.
  • Использование готовых паттернов из каталога particles для создания production-подобных интерфейсов.

Как работает

  1. Определить намерение пользователя (одиночный примитив, составной поток, форма, оверлей или обратная связь).
  2. Обратиться к реестру компонентов (component-registry.md) для выбора подходящих примитивов coss.
  3. Изучить документацию примитивов и примеры particles (p-*.tsx) для выявления правильных паттернов композиции.
  4. Написать минимальный код, строго следуя API, именам и правилам импорта из документации coss.
  5. Провести самопроверку на соответствие структуре композиции, доступности и инвариантам (особенно для SSR и клавиатурной навигации).
  6. При необходимости указать все требуемые зависимости и локальные файлы для ручной установки.

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

Как правильно реализовать диалог с формой внутри, используя примитивы coss и обеспечив доступность?
Мигрируй компонент меню с shadcn на coss, сохранив поведение подменю и чекбоксов.
Напиши код для компонента Select с группами элементов и объектными значениями, следуя best practices coss.

Что понадобится

  • Установленный coss UI и Tailwind CSS v4.
  • Доступ к документации coss (docs) и реестру particles.
  • Знание структуры импортов и алиасов в целевом приложении.

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «coss» из репозитория: # https://github.com/cosscom/coss
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r coss/ ~/.claude/skills/coss/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.