スキル building-chat-interfaces

📦

building-chat-interfaces

Name: building-chat-interfaces
Author: Asmayaseen

コンテンツリビジョン r2 高リスク ⚙️ 外部コマンド🔑 環境変数🌐 ネットワークアクセス

ChatKit でチャットインターフェースを構築

チームには、UI、認証、バックエンドエージェント、コンテキストをつなぐ安全な AI チャットが必要です。このスキルは、React、Next.js、Python バックエンド、cookie プロキシフロー向けの ChatKit パターンを提供します。

対応: Claude Codex Code(CC)

⚠️ 38 不十分

インストール前に停止して確認を求めてください。

計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "building-chat-interfaces" from https://skillstore.io/skills/asmayaseen-building-chat-interfaces.md and its manifest at https://skillstore.io/api/skills/asmayaseen-building-chat-interfaces/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/asmayaseen-building-chat-interfaces.md 署名済み manifest GET /api/skills/asmayaseen-building-chat-interfaces/manifest 署名済み lockfile GET /api/skills/asmayaseen-building-chat-interfaces/lockfile

テストする

「building-chat-interfaces」を使用しています。ユーザーとページコンテキストをエージェントに送信する React チャット UI が必要です。

期待される結果:

カスタム fetch インターセプター、メタデータ挿入ポイント、ログインチェック、バックエンド抽出手順を含む ChatKit 統合計画。

「building-chat-interfaces」を使用しています。私のアプリは httpOnly cookies を使用しており、ブラウザーから token を読み取れません。

期待される結果:

サーバー側で cookie を読み取り、Authorization を ChatKit に転送し、ストリーミング応答を保持する Next.js プロキシ設計。

「building-chat-interfaces」を使用しています。デプロイ後、最初の ChatKit リクエストが遅いです。

期待される結果:

データベース接続のウォームアップ、プールのヘルスチェック、リクエストパス検証を扱うバックエンド永続化チェックリスト。

セキュリティ監査

高リスク

v9 • 2026/7/23 バージョン別レポートを開く

All 52 static findings are false positives caused by Markdown fences, JavaScript template literals, expected network calls, and normal environment configuration. Semantic review found three high-severity design risks involving untrusted prompt content, access tokens in model instructions, and client-controlled identity forwarding.

スキャンされたファイル

690

解析済み行数

レビュー項目

誤検知を無視

確認済みのセキュリティ上の懸念 (3)

高

SKILL.md:61-80

Untrusted Conversation History Becomes Agent Instructions

Previous message content is concatenated into the Agent instructions string without role separation or delimiting. A malicious message can inject instructions and influence tool behavior.

The sample directly joins stored message content and places it in the privileged instructions field. No trust boundary or prompt-injection defense is shown.

高

SKILL.md:287-307

Access Token Exposed to Model and MCP Tools

The guidance inserts an access token into model instructions and says to include it when calling any MCP tool. This can disclose credentials to untrusted tools.

The sample explicitly formats access_token into SYSTEM_PROMPT and directs the agent to pass it to ANY MCP tool. The exposure is direct and unambiguous.

高

references/nextjs-httponly-proxy.md:29-56

Client-Controlled User Identity Forwarded by Proxy

The authenticated proxy forwards X-User-ID directly from the incoming request. A caller can spoof another user if the backend relies on this header.

The proxy reads an authentication cookie but copies X-User-ID from request.headers instead of deriving identity from the verified token.

リスク要因

⚙️ 外部コマンド (29)

🔑 環境変数 (11)

references/chatkit-integration-patterns.md:40 references/chatkit-integration-patterns.md:114 references/chatkit-integration-patterns.md:114 references/chatkit-integration-patterns.md:114 references/chatkit-integration-patterns.md:119 references/nextjs-httponly-proxy.md:27 references/nextjs-httponly-proxy.md:27 SKILL.md:95 SKILL.md:95 SKILL.md:95 SKILL.md:96

🌐 ネットワークアクセス (7)

references/nextjs-httponly-proxy.md:46 references/nextjs-httponly-proxy.md:119 references/nextjs-httponly-proxy.md:27 references/nextjs-httponly-proxy.md:148 SKILL.md:152 SKILL.md:239 SKILL.md:275

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/asmayaseen-building-chat-interfaces/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/asmayaseen-building-chat-interfaces/security.svg)](https://skillstore.io/skills/asmayaseen-building-chat-interfaces?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/asmayaseen-building-chat-interfaces?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-building-chat-interfaces/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/asmayaseen-building-chat-interfaces.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

Asmayaseen. (2026). building-chat-interfaces security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-building-chat-interfaces/audits/9

BibTeX形式の引用

@techreport{asmayaseen-asmayaseen-building-chat-interfaces-2026,
  author = {Asmayaseen},
  title = {building-chat-interfaces security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/asmayaseen-building-chat-interfaces/audits/9},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "building-chat-interfaces security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Asmayaseen"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/asmayaseen-building-chat-interfaces/audits/9"
identifiers:
  - type: other
    value: "skillstore:asmayaseen-building-chat-interfaces:audit:9"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 中

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

認証済みチャット UI を追加

ログインチェック、ユーザーメタデータ、ページコンテキストを備えた React アプリに ChatKit を統合します。

カスタムチャットバックエンドを構築

Python エージェント、会話履歴、データベース永続化を使って ChatKitServer を拡張します。

Cookie ベースのチャットリクエストをプロキシ

httpOnly cookies を読み取り、ストリーミング ChatKit 応答を転送する Next.js ルートを作成します。

これらのプロンプトを試す

基本的な ChatKit 統合を計画

このスキルを使って、私の React アプリ向けに基本的な ChatKit 統合を計画してください。バックエンド、フロントエンド、認証、必要な構成手順を含めてください。

コンテキストと認証を追加

このスキルを使って、既存の ChatKit UI にログイン強制、ユーザーメタデータ、ページコンテキストを追加してください。各変更をどこに入れるべきか説明してください。

Next.js Cookie プロキシを設計

このスキルを使って、ChatKit 向けの Next.js httpOnly cookie プロキシを設計してください。ストリーミング動作、バックエンドルーティング、失敗時の処理を含めてください。

本番チャットアーキテクチャをレビュー

このスキルを使って、バックエンド永続化、認証境界、コンテキスト処理、スクリプト読み込み、本番リスクの観点から私の ChatKit アーキテクチャをレビューしてください。

ベストプラクティス

認証チェックはサーバー側に置き、クライアント側のチェックはユーザー体験のためだけに使用します。
エージェントに送信するコンテキストを最小限にし、送信前に機密性の高いページデータを削除します。
依存する React コンポーネントをレンダリングする前に、ChatKit web components を読み込みます。

回避

長期間有効なアクセストークンをプロンプトやモデルから見えるツール指示に入れないでください。
ブラウザー側のコードでプライベートな環境変数を読み取らないでください。
ストリーミング ChatKit 応答を JSON 専用の応答ヘルパー経由でプロキシしないでください。

よくある質問

このスキルは何の構築に役立ちますか？

カスタムバックエンド、認証、コンテキスト挿入、Next.js プロキシパターンを備えた ChatKit ベースの AI チャットインターフェース構築を支援します。

完全なアプリケーションは含まれていますか？

いいえ。アプリケーションに合わせて適用する実装パターンと例を提供します。

httpOnly cookie 認証をサポートできますか？

はい。cookies を読み取り、認証済みチャットリクエストを転送するためのサーバー側 Next.js プロキシパターンを示します。

データベース永続化を扱っていますか？

はい。ChatKit ストア構成、データベース URL 設定、接続プールのウォームアップガイダンスが含まれています。

MCP token プロンプトパターンは安全ですか？

いいえ。token-in-prompt パターンは、本番利用前にサーバー側認可へ置き換えるべきです。

このスキルを使用できるツールはどれですか？

レポートでは Claude、Codex、Claude Code のサポートが記載されています。

開発者情報

作成者

Asmayaseen

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-chat-interfaces

参照

89edfdc710d0846129dcee6a929477b04f08052c

メンテナンスの新しさ

2026/7/25

利用状況

8 ダウンロード · 193 閲覧

ファイル構成

📁 references/

📄 chatkit-integration-patterns.md

📄 nextjs-httponly-proxy.md

📁 scripts/

📄 verify.py

Webアプリのローカライゼーションを自動化

作成者 DNYoussef

多言語対応を追加すると、文字列、ルーティング、メタデータ、ロケールファイルがコードベース全体に散在しがちです。このスキルは、翻訳、検証、ドキュメントを含むi18nセットアップを計画し、実装します。

コーディング＆開発表示

building-chat-interfaces

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

確認済みのセキュリティ上の懸念 (3)

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

認証済みチャット UI を追加

カスタムチャットバックエンドを構築

Cookie ベースのチャットリクエストをプロキシ

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

Asmayaseen のその他のスキル

tool-design

systematic-debugging

operating-production-services

styling-with-shadcn

streaming-llm-responses

context-degradation

関連スキル

senior-fullstack

vercel-react-view-transitions

senior-frontend

nextjs-optimization

vercel-react-best-practices

i18n-automation