| 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.
Component API reference
This skill teaches how to build within this template. For the API of a
specific b24ui component (props, slots, events), use the Bitrix24 UI docs:
https://bitrix24.github.io/b24ui/llms.txt (skill b24-ui-nuxt). If it is not
configured, add it.
First step — pick the integration target
Before any feature work, ask the user how the app talks to Bitrix24 and set the
project up accordingly. This is the #1 convenience goal of the template — a
Vibecoding user should never have to rip out the SDK by hand.
If the user hasn't said, ask — don't assume.
Core rules (always apply)
- Semantic colors only. Use b24ui tokens (
text-description, bg-elevated,
border-muted, air-primary, …) — never raw Tailwind palette
(text-gray-500, bg-blue-600). This is a hard requirement inherited from
b24ui; see conventions.
- No hard-coded user-facing strings. Everything goes through i18n. Add keys
to
i18n/locales/en.json (the source of truth) first. See
i18n.
- All B24 access through
useB24(). Never new B24Frame() in a component.
See b24-integration.
- Keep pages thin. Feature UI lives in
app/components/<feature>/, data in
app/composables/ or server/api/. See architecture.
- Mock first. New data must render standalone (mock) before it reads real
CRM data. See data-layer.
How to use this skill
Load only the references the task needs — don't read everything.
Reference files
Guidelines — the requirements and patterns:
- architecture — stack, layers, data flow, where things live
- conventions — Vue/TS/ESLint conventions, b24ui usage requirements, semantic colors, icons
- i18n — locale files, keys,
useI18n, mirroring locales
- b24-integration —
useB24, B24Frame, jssdk, scopes, install flow
Recipes — step-by-step for common tasks:
- setup-target — do this first: configure the project for Vibecoding (remove JS SDK) or REST API (keep SDK)
- add-page — new route + sidebar entry + command palette + shortcut + i18n
- data-layer — mock endpoint → real B24 CRM data via a
useDealStats-style composable
Routing table
| Task | Load these references |
|---|
| First contact / project setup for a target | setup-target |
| Understand the project before changing anything | architecture |
| Add a new page / route | conventions, i18n, add-page |
| Build or edit a feature component | conventions, architecture |
| Add / change data (mock or CRM) | architecture, b24-integration, data-layer |
| Add or change any visible text | i18n |
| Wire something to Bitrix24 CRM | b24-integration, data-layer |
Known work / TODO
See AGENTS.md → "Known Work / TODO" for the live list. In short: a localization
pass across all pages is pending; and an AI anonymized feedback loop is under
development (delivery item, spec TBD). app/pages/install.vue now implements a
client-only install flow (its placement/userFields handlers are demo bindings).
Before you finish
Last reviewed: 2026-07-05.
