b24-ui-nuxt

Bitrix24 UI

Reka UI + Tailwind CSS + Tailwind Variants を基盤とする Vue コンポーネントライブラリです。Nuxt、Vue（Vite）、Laravel（Vite + Inertia）、AdonisJS（Vite + Inertia）で動作します。

LLMs.txt

コンポーネントが何を受け取るのか、またはAPI がどのように動作するのか（props、slots、events、ドキュメント全体、例）を知りたい場合は、Bitrix24 UI ドキュメントを使用してください。まだ設定されていない場合は、追加してください。このスキルでは、どのコンポーネントをいつ使うか、適切に構築する方法を説明します。

基本ルール（常に適用）

1. アプリは必ず B24App でラップしてください — トースト、ツールチップ、プログラムによるオーバーレイに必要です。i18n 用の locale prop を受け取ります。
2. 必ずセマンティックカラーを使用してください — text-description、bg-elevated、border-muted などです。text-gray-500 のような Tailwind の生のパレットカラーは使用しないでください。
3. slot 名を確認するには、生成されたテーマファイルを読んでください — Nuxt の場合は .nuxt/b24ui/<component>.ts、Vue の場合は node_modules/.b24ui-nuxt/b24ui/<component>.ts です。これらのファイルには、各コンポーネントのすべての slot、variant、デフォルトのクラスが示されています。
4. 上書きの優先順位（上ほど優先）：b24ui prop / class prop → グローバル設定 → テーマのデフォルト値。
5. アイコンのガイドラインからアイコンを見つけてください — 通常の言葉でのリクエストを適切な import に対応づけています。

このスキルの使い方

タスクに応じて、コードを書く前に関連するリファレンスファイルを読み込んでください。すべてを読み込むのではなく、必要なものだけを読み込んでください。

リファレンスファイル

ガイドライン — デザイン上の判断と規約：

• design-system — セマンティックカラー、テーマ設定、ブランドのカスタマイズ、variant、b24ui prop
• component-selection — Modal と Slideover、Select と SelectMenu、Toast と Alert などを選ぶための判断基準
• conventions — コーディングパターン、slot の命名、items 配列、composable、キーボードショートカット
• forms — フォームの検証、フィールドのレイアウト、エラー処理、Standard Schema
• icons — アイコンの import と使用方法

レイアウト — ページ全体の構成パターン：

• landing — ランディングページ
• dashboard — サイドバーとパネルを備えた管理 UI

レシピ — よくあるタスクの完全なパターン：

• data-tables — フィルター、ページネーション、並べ替え、選択機能を備えたテーブル
• overlays — モーダル、スライドオーバー、ドロワー、コマンドパレット、情報ポップオーバー
• navigation — ヘッダー、サイドバー、パンくずリスト、タブ
• card-pickers — 設定のvariantを選択したり、機能を切り替えたりするための、アイコンと説明を備えたカードグリッド（B24PageCardGroup）
• settings — 設定画面のレイアウト：Switch、Radio、Checkbox、PageCardGroup の使い分けと、プレビュー画像、説明、「詳細を見る」リンクを含むリッチな card variant のレシピ
• detail-panel — エンティティ情報のサイドバー：メインビューの横に配置するメタデータ、切り替え可能な設定、グループ化されたコンテンツセクション
• task-form — B24Editor、担当者フィールド、日付ピッカー、折り返し可能な副次アクション行を組み合わせた、1 列のタスク／課題フォーム

クイックリファレンス：

• components — 適切なコンポーネント名を探すための、カテゴリ別コンポーネント一覧

ルーティングテーブル

タスク	読み込むリファレンス
Bitrix24 向けアプリケーション／ダッシュボード／管理 UI を構築する	conventions, component-selection, dashboard
ランディングページを作成する	design-system, conventions, landing
設定ページを追加する	conventions, forms, settings
各選択肢にプレビュー画像、複数行の説明、インラインの「詳細を見る」リンクが必要な場合に、1 つの選択肢を選ぶ／複数の選択肢を切り替える — レイアウト選択、スクリーンショット付きのプラン選択	conventions, settings
ログイン／サインアップフォームを作成する	conventions, forms, component-selection
データをテーブルに表示する	conventions, component-selection, data-tables
チャットインターフェースを追加する	conventions, components (§ Chat)
モーダル、スライドオーバー、またはドロワーを追加する	conventions, component-selection, overlays
サイトナビゲーションを構築する	conventions, component-selection, navigation
Markdown をレンダリングする	component-selection, components (§ Prose and § Content)
アイコンと一文が必要な少数の選択肢から、1 つを選ぶ（または複数を切り替える） — 設定のバリエーション、機能フラグ、「何を作成しますか？」ウィザードのステップ	conventions, component-selection, card-pickers
リッチテキストエディターを追加する	conventions, components (§ Editor)
リッチテキストの説明、担当者、期限を含むタスク／課題フォームを作成する	conventions, forms, task-form
エンティティ情報のサイドバーを構築する — チャンネル情報、CRM レコードの詳細、「この項目について」	conventions, component-selection, detail-panel
ボタン、項目、または空の状態に使うアイコンを見つける	icons
一般的な UI 作業	conventions, component-selection

インストール

Nuxt

pnpm add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css']
})

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

<template>
  <B24App>
    <NuxtPage />
  </B24App>
</template>

Vue (Vite)

pnpm add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite()
  ]
})

// src/main.ts
import './assets/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)
const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(b24UiPlugin)
app.mount('#app')

/* src/assets/css/main.css */
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

<template>
  <B24App>
    <RouterView />
  </B24App>
</template>

index.html のルート <div id="app"> に class="isolate" を追加してください。 Inertia の場合は、vite.config.ts で b24ui({ router: 'inertia' }) を使用してください。