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
- 44 ★ on the repository
- Last commit
- MIT
Minimal access
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
- Works in
- Services
Manual install
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.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- 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
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.
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.
Discussion
No questions or reviews yet.
Related
All Bitrix24 toolsBitrix24 Nuxt dashboard template skill
Nuxt Dashboard Template
Bitrix24's official Nuxt dashboard starter built on b24ui, shipped with mock data and a skill that guides development inside the template's architecture
The @bitrix24/b24jssdk skill set
@bitrix24/b24jssdk skills
Seven official Bitrix24 skills for the JS/TS SDK: picking B24Hook, B24Frame or B24OAuth, REST calls, filters, iframe managers and 12 ready mini-apps
Bitrix24 app development skill pack
bitrix24-skills-emcsoft
Four skills for Bitrix24 apps: install and OAuth, a batching REST client, events and iframe placements, CRM business processes and calendar
A skill for administering, diagnosing and developing boxed Bitrix24 and Bitrix Framework, built from official documentation
Bitrix24 MCP server template
bx24-template-mcp
Bitrix24's official MCP server template on Nuxt: ready tools for tasks and users, three deployment options
A CLI that scaffolds a new Bitrix24 app from ready Angular or Vue templates paired with the author's own API libraries
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.
README badge
Original 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.