---

name: chatbot-component description: ChatBotプロジェクトに新しいUIコンポーネントを追加するためのスキル。コンポーネント作成手順、CSS構成ルール、イベントハンドリングパターンを提供します。新しいUIコンポーネントを作成する時、モーダルを追加する時、CSSスタイルを追加する時、UIイベントを処理する時に使用してください。

ChatBot コンポーネント追加スキル

このスキルはChatBotプロジェクトに新しいUIコンポーネントを追加する際のガイダンスを提供します。

コンポーネント作成手順

1. JavaScriptクラスの作成

app/public/js/components/{機能名}/{機能名}.js に配置：

class ComponentName {
    static #instance = null;

    constructor() {
        if (ComponentName.#instance) {
            return ComponentName.#instance;
        }
        ComponentName.#instance = this;
    }

    static get getInstance() {
        if (!ComponentName.#instance) {
            ComponentName.#instance = new ComponentName();
        }
        return ComponentName.#instance;
    }

    initialize() {
        this.#setupEventListeners();
    }

    #setupEventListeners() {
        // イベントリスナーの設定
    }
}

2. CSSスタイルの作成

app/public/css/components/{カテゴリ}/{ファイル名}.css に配置：

.component-name {
    background: var(--background-secondary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

.component-name__element {
    /* BEM命名規則 */
}

3. HTMLの追加

app/public/index.html の適切な位置に要素を追加。

4. スクリプト読み込み

app/public/index.html の末尾にscriptタグを追加。

CSS変数（必須使用）

色・間隔・サイズはすべてCSS変数で定義：

• 背景色: --background-primary, --background-secondary, --background-tertiary
• テキスト色: --text-primary, --text-secondary, --text-tertiary
• 間隔: --spacing-xs ~ --spacing-xl
• 角丸: --border-radius-sm ~ --border-radius-xl
• アニメーション: --transition-fast, --transition-normal

参考コンポーネント

• チャット系: chatRenderer.js, chatUI.js
• サイドバー: sidebar.js
• モーダル: apiSettingsModal.js, systemPromptModal.js

参照ファイル

詳細は以下のファイルを参照：

• references/component-template.md: コンポーネントテンプレート
• references/css-structure.md: CSS構成ルール
• references/event-handling.md: イベントハンドリングパターン