customware-support-widget
Customware React Router クライアント専用 SPA テンプレートにおいて、Customwareサポートチャットウィジェットの追加・配置・設定・修正を行う際に使用するスキル。root.tsx へのスクリプト読み込み、ルート／レイアウトへの配置、org/project ID の設定、バブルモードとフルモードの切り替え、メタデータやスタイルのオプション、ページ操作サポート、およびMITB形式のコード生成に関する制約までを網羅します。
description の原文を見る
Use this skill when adding, placing, configuring, or fixing the Customware support chat widget in the Customware React Router client-only SPA template. It covers root.tsx/root document script loading, route/layout placement, required org/project ids, bubble versus full mode, optional metadata and style options, page-operation support, and constraints for MITB-style code generation.
SKILL.md 本文
Customware Support Widget
Customware React Router クライアントオンリー SPA テンプレートに Customware サポートチャットエントリーポイントが必要な場合は、このスキルを使用します。
ウィジェットはサードパーティのブラウザカスタム要素です。このテンプレートでは、HTML ドキュメント構造が定義される root.tsx または同等の React Router ルートファイル/コンポーネントでウィジェットスクリプトを読み込み、サポートが表示されるべきルートまたはレイアウトでのみ <customware-chat> をレンダリングします。ウィジェットは Shadow DOM UI、チャットランタイム、サービス呼び出し、ツールバッジ、音声入力、およびページ操作動作を担当します。
すべての React コード例、スクリプト読み込みパターン、JSX タイピング、バブル/フルモード例、メタデータ、およびスタイルオプションについては、references/component-usage.md をご覧ください。
提供内容
<customware-chat>としてのサポートチャット UI。- フローティングランチャー/ダイアログのための
chat-bubbleモード。 - サイドバー、レール、ドロワー、またはスプリットペインチャット領域のための
fullモード。 metaDOM プロパティを通じたオプションの訪問者メタデータ。styleOptionsまたはstyle-optionsを通じたオプションのサイジング/カスタマイズ。- ツール backed サポート動作: ドメイン/コンテキストの読み取り、タスクのリスト化、タスク作成、および表示ページの操作。
- ページ操作: フォーム入力、オプション選択、ボタンクリック、値の置換、または表示 UI の送信などのユーザーリクエスト。
使用する場合
- Customware React Router クライアントオンリー SPA テンプレートにサポートチャットを追加する。
- フローティングサポートランチャーをアプリシェルに配置する。
- フルサポートチャットをレイアウト領域に埋め込みパネルとして配置する。
- サポートエージェントがフォーム記入など表示中のアプリ UI でユーザーをサポートできるようにする。
- 既存のサポートウィジェット配置またはスタイリングを更新する。
正確な React 実装パターンについては、references/component-usage.md を使用してください。
使用しない場合
- サーバーサイドレンダリング作業にはこのスキルを使用しないでください。対象テンプレートはクライアントのみの React Router SPA モードです。
- カスタムチャット UI を構築するためにこのスキルを使用しないでください。
- ウィジェットを iframe に埋め込むためにこのスキルを使用しないでください。
- サポートチャットエンドポイントを直接呼び出すためにこのスキルを使用しないでください。
- 明示的に要求されない限り、非テンプレート React アプリまたは非 React アプリにはこのスキルを使用しないでください。
orgIdまたはprojectIdを特定できない場合はこのスキルを使用しないでください。必要な Customware org/project id が見つからない明確な理由でタスクを失敗させてください。
譲れないポイント
- 常に実際のカスタム要素をレンダリングする:
<customware-chat>。 - 常に
org-idとproject-idの両方を渡す。 - どちらかの id が利用できない場合は、プレースホルダーをレンダリングしたり、フォローアップの質問をしたりするのではなく、明確な id 不足の理由でタスクを失敗させる。
https://app.customware.ai/support-widget/customware-chat.jsをroot.tsxまたはテンプレートの同等の React Router ルートドキュメントシェルから 1 回ロードする（既存のアプリレベルローダーがすでにこれを行っている場合を除く）。- タスク ID、ドメイン ID、ユーザー ID、API トークン、セッショントークン、認証クッキー、またはシークレットをコンポーネントに渡さない。
metaはオプションの訪問者識別情報にのみ使用する:emailおよび/またはname。- ラッパー CSS、
styleOptions、またはstyle-optionsをサイジングに使用する。ウィジェット設定として native DOMstyleプロパティを使用しない。 - ツール呼び出しはコンパクトなステータスバッジであり、ボタンではない。
- ページ操作はウィジェット内で処理される。カスタムのクリック/入力/ページ制御ハンドラーをその周囲に追加しない。
- ページ操作プロンプトまたは値をホストアプリにハードコードしない。ユーザーがウィジェットにリクエストを入力する必要があります。
実装ワークフロー
references/component-usage.mdを読む。- React アプリに
orgIdとprojectIdがあることを確認する。 - モードを選択する:
- フローティングサポートランチャー/ダイアログの場合は
chat-bubble。 - 埋め込みレール、ドロワー、スプリットペイン、または固定チャット領域の場合は
full。
- フローティングサポートランチャー/ダイアログの場合は
- スクリプトタグを
root.tsxまたは HTML ドキュメント<head>を定義する React Router ルートファイル/コンポーネントに追加する（既に存在しない場合）。 - テンプレートがまだ
<customware-chat>を認識していない場合、.d.tsファイルに JSX カスタム要素タイピングを追加する。 <customware-chat>をorg-idとproject-idを指定してサポートが必要な特定のルートまたはレイアウトでレンダリングする。- 必要に応じて、型付き React ref を通じてオプションの
metaとstyleOptionsを設定する。 - フルモードの場合、ラッパー/コンポーネントが具体的な高さを持ち、内部スクロールがウィジェットに属していることを確認する。
- バブルモードの場合、ラッパーがクリップされていないこと、および適切な
z-indexを持つことを確認する。 - 結果の React コードを構文的に、および利用可能な場合は
npm run checkで検証する。
各モードの完全なコード例については、references/component-usage.md を使用してください。
MITB エージェント制約
- Playwright、スクリーンショット、ブラウザ DevTools、または視覚的なテストへのアクセスを想定しない。
- ウィジェットが視覚的にテストされたと主張しない。
- 生成されたアプリ内にユーザー向けステータスレポートを書き込まない。
- コード検査、TypeScript/コンパイルチェック、および生成された React Router/Vite コードが
references/component-usage.mdの例に従っていることを確認することで検証する。 - 生成時にランタイム id が利用できない場合、明確な id 不足の理由でタスクを失敗させる。id がランタイムに非同期でロードされることが予想される場合、
orgId && projectIdの背後にコンポーネントをゲートして、プレースホルダーでレンダリングされることがないようにする。
してはいけないこと
- iframe 統合を作成しない。
- ウィジェット内部を React で再構築またはスタイル変更しない。
- Shadow DOM に到達したり、内部クラス名に依存したりしない。
- ツール呼び出しをクリック可能な UI コントロールとして公開しない。
- ホストアプリからサポートチャット API またはページ操作 API を直接呼び出さない。
- フォールバック埋め込みモードを追加しない。
- ウィジェット属性にシークレット、アクセストークン、プライベートペイロード、または認証/セッションデータを保存しない。
- 任意のユーザー/プロフィールオブジェクトを
metaに渡さない。オプションのemailとnameのみを渡す。 - 想像上の内部メッセージリストにのみ固定高さを設定しない。フル モード ホスト領域全体をサイズ変更する。
- クリップまたは変換されたコンテナ内にバブルモードを配置しない（その動作が意図的な場合を除く）。
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- customware-ai
- リポジトリ
- customware-ai/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/customware-ai/skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。