Скилл Bitrix24 UI для Vue и Nuxt

Установка

npx skillfoxx add skills/bitrix24-ui

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .claude/skills
cp -R "$tmp/skills/b24-ui-nuxt" .claude/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .github/skills
cp -R "$tmp/skills/b24-ui-nuxt" .github/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .devin/skills
cp -R "$tmp/skills/b24-ui-nuxt" .devin/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .cline/skills
cp -R "$tmp/skills/b24-ui-nuxt" .cline/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .roo/skills
cp -R "$tmp/skills/b24-ui-nuxt" .roo/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/b24ui.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-ui-nuxt/
git -C "$tmp" checkout dbb17be0f8bd305117fadb52fc8673e13fcb419b
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-ui-nuxt" .agents/skills/b24-ui-nuxt

npx skills add bitrix24/b24ui

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

Что делает

Скилл b24-ui-nuxt учит агента строить интерфейсы на @bitrix24/b24ui-nuxt, библиотеке Vue-компонентов на Reka UI и Tailwind CSS для Nuxt, Vue, Laravel и AdonisJS. Он задает базовые правила: всегда оборачивать приложение в B24App, использовать только семантические цвета вроде text-description вместо сырых классов Tailwind, смотреть сгенерированные файлы темы для имен слотов. Дальше по таблице маршрутизации скилл подгружает только нужные справочники: выбор между похожими компонентами, конвенции кода, формы, иконки, готовые макеты дашборда и лендинга и рецепты вроде таблиц с фильтрами, оверлеев и форм настроек. За справкой по конкретным пропсам и слотам компонента скилл отправляет к llms.txt документации.

Для кого. Для фронтенд-разработчиков, которые строят Bitrix24-приложения или любой Vue-проект на компонентах b24ui.

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

Собери страницу настроек Bitrix24-приложения с переключателями и карточками вариантов на компонентах b24ui

Ограничения

Скилл описывает только когда и какой компонент использовать, а не полный API пропсов и слотов: для этого нужно отдельно подключить llms.txt документации. Требует установленный @bitrix24/b24ui-nuxt и Tailwind CSS в проекте.

Как отключить. Удалите скилл через настройки агента, например пункт Skills в Cursor, или сотрите папку скилла из .claude/skills.

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

• Только направляет генерацию UI-кода, не выполняет сетевые запросы и не трогает данные
• Использует семантические цвета и компоненты сторонней библиотеки, ошибка максимум ломает верстку

Коротко о README

Страница документации Skills описывает разницу между скиллами и MCP-серверами, перечисляет темы скилла: установка для Nuxt, Vue, Laravel и AdonisJS, теминг, более 130 компонентов, composables, формы и макет дашборда. Показаны установка через CLI skills.sh с флагом --agent, быстрая установка в Cursor через диплинк и ручная настройка по URL.

SKILL.md

---
name: b24-ui-nuxt
description: Build UIs with @bitrix24/b24ui-nuxt v2 — 130+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, building forms, or composing layouts for a Bitrix24 application.
---

# Bitrix24 UI

Vue component library built on Reka UI + Tailwind CSS + Tailwind Variants. Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).

## LLMs.txt

When you need to know what a component accepts or how its API works — props, slots, events, full documentation, examples — use the Bitrix24 UI documentation llms.txt; if it is not already configured, add it. This skill teaches when to use which component and how to build well.

## Core rules (always apply)

1. Always wrap the app in B24App — required for toasts, tooltips, and programmatic overlays. Accepts a locale prop for i18n.
2. Always use semantic colors — text-description, bg-elevated, border-muted, etc. Never use raw Tailwind palette colors like text-gray-500.
3. Read generated theme files for slot names — Nuxt: .nuxt/b24ui/<component>.ts, Vue: node_modules/.b24ui-nuxt/b24ui/<component>.ts.
4. Override priority (highest wins): b24ui prop / class prop -> global config -> theme defaults.
5. Find icons through the icons guideline — it maps a plain-language request to the right import.

Похожие