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
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
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/nuxt-dashboard-templateDetects 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 -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 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-templateCommands 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 -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 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-templateCommands 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 -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 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-templateCommands 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 -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 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-templateCommands 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 -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 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-templateCommands 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-templateCommands 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 -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 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-templateCommands 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 -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 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-templateCommands 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 -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 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-templateCommands 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-templateCommands 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-templateCommands for macOS and Linux, on Windows run them in Git Bash.
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 installThe 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 connectedLimitations
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.
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