AIKraft/Skills/coss-particles

coss-particles

Каталог UI-частиц COSS с готовыми компонентами на базе coss primitives. Полезен при разработке интерфейсов для быстрого внедрения готовых паттернов через JSON-URL.

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

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

Набор готовых UI-частиц (coss-particles) на базе coss primitives, доступных для копирования через JSON-манифесты. Позволяет быстро внедрять готовые визуальные паттерны интерфейсов, выбирая их по типу компонента и описанию.

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

  • Быстрое создание форм с валидацией, диалогов или вкладок с иконками.
  • Внедрение специфичных UI-элементов, таких как кастомные кнопки, аватары с бейджами или сложные списки выбора (combobox/autocomplete).
  • Адаптация готовых компонентов под нужды проекта путем загрузки исходного кода из JSON-URL.
  • Использование готовых паттернов для состояний загрузки, уведомлений (toast) или навигации.

Как работает

  1. Описать необходимый UI-элемент (например, «форма с валидацией» или «диалог с формой внутри»).
  2. Найти подходящую частицу в индексе по типу компонента и описанию.
  3. Получить JSON-URL манифеста частицы по шаблону https://coss.com/ui/r/<particle-name>.json.
  4. Загрузить полный исходный код частицы по полученной ссылке.
  5. Адаптировать полученный код под требования проекта.

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

Создай форму с валидацией, используя готовые UI-частицы COSS.
Найди и предоставь код для диалога, содержащего форму внутри.
Реализуй вкладки с иконками, используя компоненты из каталога coss-particles.

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

  • Доступ к репозиторию cosscom/coss для поиска частиц в apps/ui/registry/default/particles/.
  • Доступ к интернету для загрузки JSON-манифестов по URL с coss.com.
  • Среда выполнения Node.js для запуска скрипта генерации индекса (node apps/ui/scripts/generate-particle-index.cjs).

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

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

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

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