majiayu000 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: イベントハンドリングパターン