Bitrix24 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

SkillOfficial

Low risk

We rate an entry low when it mostly gives the agent instructions and reference material.

Why this level

  • Runs on generated mock data by default, with no access to a real portal
  • When embedded in Bitrix24 it reads CRM data through B24 Frame within the app's granted scopes
All reasons and checks
Russian stack

bitrix24/templates-dashboard

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/nuxt-dashboard-template

Detects 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/templates-dashboard --skill b24-dashboard-template -a claude-code -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .claude/skills
cp -R "$tmp/skills/b24-dashboard-template" .claude/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add bitrix24/templates-dashboard --skill b24-dashboard-template -a cursor -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add bitrix24/templates-dashboard --skill b24-dashboard-template -a github-copilot -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .github/skills
cp -R "$tmp/skills/b24-dashboard-template" .github/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add bitrix24/templates-dashboard --skill b24-dashboard-template -a codex -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add bitrix24/templates-dashboard --skill b24-dashboard-template -a gemini-cli -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands 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/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .devin/skills
cp -R "$tmp/skills/b24-dashboard-template" .devin/skills/b24-dashboard-template

Commands 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/templates-dashboard --skill b24-dashboard-template -a cline -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .cline/skills
cp -R "$tmp/skills/b24-dashboard-template" .cline/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add bitrix24/templates-dashboard --skill b24-dashboard-template -a roo -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .roo/skills
cp -R "$tmp/skills/b24-dashboard-template" .roo/skills/b24-dashboard-template

Commands 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/templates-dashboard --skill b24-dashboard-template -a opencode -y

The 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 45762ea
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/bitrix24/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands 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/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands 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/templates-dashboard.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/b24-dashboard-template/
git -C "$tmp" checkout 45762ea267ddbbec181f16d6e9d9846494df59c6
mkdir -p .agents/skills
cp -R "$tmp/skills/b24-dashboard-template" .agents/skills/b24-dashboard-template

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 25, 2026, commit 45762ea.

Text for your agent

Clone bitrix24/templates-dashboard, run pnpm install and pnpm dev; the skills/b24-dashboard-template skill already ships with the project. Before the first task, ask whether the template targets Vibecoding or the REST API, and follow the semantic color and i18n rules.

Other ways from the author
git clone https://github.com/bitrix24/templates-dashboard.git <project-name>
cd <project-name>
pnpm install

The skills/b24-dashboard-template skill ships with the project, no separate install needed.

This is third-party code. Review the repository files before installing.

What it does

The repository is a Nuxt starter: a collapsible sidebar, light and dark themes, a command palette, multi-page structure, all built on @bitrix24/b24ui-nuxt components. It runs standalone on mock data and, once embedded in Bitrix24 as an app, reads CRM data through the B24 Frame SDK. The b24-dashboard-template skill teaches an agent to work inside this architecture: first ask what the template is for, Bitrix24 Vibecoding or the REST API, and set the project up differently for each, then follow four rules: semantic b24ui colors only, every string through i18n with English as the source, Bitrix24 access only via the useB24 hook, and thin pages with UI logic in app/components and data in composables.

Who it is for. For developers starting a new Bitrix24 dashboard app who want a ready architecture instead of a blank slate.

Good fit when

  • You are starting a new Nuxt Bitrix24 dashboard app with a sidebar and themes
  • You want to preview the UI on mock data before wiring up a real portal
  • You need an example of localizing across 19 languages and reading CRM data through B24 Frame

Not a fit when

  • You need the Vue version, not Nuxt: a separate templates-dashboard-vue repository covers that
  • Your project already has its own architecture and does not start from this template

Example request

Add a new page to the template with a CRM deals table, using mock data until the portal is connected

Limitations

The skill only describes this specific template's architecture, not Bitrix24 in general, and is useful only if the project starts from cloning this repository. For b24ui component APIs the skill points to the separate b24-ui-nuxt skill. The project is small and niche.

How to disable. Delete the skills/b24-dashboard-template folder from the project if it is no longer needed.

Security check

  • Runs on generated mock data by default, with no access to a real portal
  • When embedded in Bitrix24 it reads CRM data through B24 Frame within the app's granted scopes

README in short

The README covers a quick start via git clone and pnpm install, production environment variables, running without Bitrix24 on generated data, and the required crm, user_brief, tasks and entity permission scopes plus the steps for registering a local app in Bitrix24.

SKILL.md

---
name: b24-dashboard-template
description: Work on the Bitrix24 Nuxt Dashboard Template — a starter B24 app built with @bitrix24/b24ui-nuxt, running on mock data standalone and on CRM data when embedded in Bitrix24. Use when adding pages, components, composables, mock/real data, or localized strings to this template.
---

# Bitrix24 Nuxt Dashboard Template

A Nuxt 4 dashboard that ships as a browser-based Bitrix24 application. It works standalone on mock data and, once embedded in Bitrix24, reads CRM data through the B24 Frame SDK. Every screen is composed from @bitrix24/b24ui-nuxt components and @bitrix24/b24icons-vue icons, and every visible string is localized across 19 locales.

## Core rules (always apply)

1. Semantic colors only. Use b24ui tokens — never raw Tailwind palette.
2. No hard-coded user-facing strings. Everything goes through i18n, English source of truth first.
3. All B24 access through useB24(). Never new B24Frame() in a component.
4. Keep pages thin. Feature UI lives in app/components/<feature>/, data in app/composables/ or server/api/.
5. Mock first. New data must render standalone before it reads real CRM data.

FAQ

Do I need a Bitrix24 account to get started?

No, the template runs locally with pnpm dev and works on generated test data until it is embedded in a real portal.

What if the template targets Vibecoding rather than the REST API?

The skill points to a separate removal procedure for @bitrix24/b24jssdk in references/recipes/setup-target.md, specific to Vibecoding.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium riskNo VPN needed142.9KRepository stars
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium riskNo VPN needed124.8KRepository stars
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk72.1KRepository stars
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.7KRepository stars
Foxx AIBitrix24 Nuxt dashboard template skill

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.