Bitrix24 UI skill for Vue and Nuxt
Bitrix24 UI
Bitrix24's official skill for its 130-plus b24ui-nuxt components: which component to reach for, semantic colors, forms and ready layouts
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- Only steers UI code generation, does not make network calls or touch data
- Relies on a third-party library's semantic colors and components, so a mistake at worst breaks the layout
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/bitrix24-uiDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add bitrix24/b24ui --skill b24-ui-nuxt -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit dbb17be
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
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-nuxtCommands for macOS and Linux, on Windows run them in Git Bash.
Install the b24-ui-nuxt skill with npx skills add bitrix24/b24ui and invoke it with /b24-ui-nuxt when working on a @bitrix24/b24ui-nuxt interface.
Other ways from the author
npx skills add bitrix24/b24uiInstalls the skill for every supported agent in the current project. The --agent cursor or --agent claude-code flag targets one agent only, and --global makes the skill available across all projects.
This is third-party code. Review the repository files before installing.
What it does
The b24-ui-nuxt skill teaches an agent to build UIs with @bitrix24/b24ui-nuxt, a Vue component library on Reka UI and Tailwind CSS for Nuxt, Vue, Laravel and AdonisJS. It sets base rules: always wrap the app in B24App, use only semantic colors like text-description instead of raw Tailwind classes, and read the generated theme files for slot names. From there a routing table loads only the references a task needs: choosing between similar components, coding conventions, forms, icons, ready dashboard and landing layouts, and recipes such as filterable tables, overlays and settings forms. For a component's exact props and slots the skill points to the llms.txt documentation.
Who it is for. For frontend developers building Bitrix24 applications or any Vue project on b24ui components.
Good fit when
- You are building a Bitrix24 app interface on Nuxt or Vue
- You need to decide between similar components: modal vs slideover, select vs select menu
- You want ready dashboard or landing page layouts built on b24ui
Not a fit when
- Your project does not use @bitrix24/b24ui-nuxt: the semantic color and slot rules are specific to this library
- You need documentation for a specific component prop: add the documentation's llms.txt separately rather than relying on the skill alone
Example request
Build a Bitrix24 app settings page with toggles and option cards using b24ui componentsLimitations
The skill only covers when and which component to use, not the full props and slots API: for that you need the documentation's llms.txt connected separately. Requires @bitrix24/b24ui-nuxt and Tailwind CSS installed in the project.
How to disable. Remove the skill via your agent's settings, for example the Skills section in Cursor, or delete the skill folder from .claude/skills.
Security check
- Only steers UI code generation, does not make network calls or touch data
- Relies on a third-party library's semantic colors and components, so a mistake at worst breaks the layout
README in short
The Skills documentation page explains the difference between skills and MCP servers, and lists the skill's topics: installation for Nuxt, Vue, Laravel and AdonisJS, theming, 130-plus components, composables, forms and dashboard layout. It shows installing via the skills.sh CLI with an --agent flag, a Cursor quick-install deeplink, and manual setup by 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.
FAQ
Does the skill replace the component docs?
No, it teaches when and which component to pick and how to build layouts, and points to the documentation's llms.txt for a component's exact props, slots and events.
Which agents does the install support?
The skills.sh CLI used to install it supports more than 35 agents, including Cursor, Claude Code, Codex, Windsurf and Cline.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys