implementing-command-palettes
React コマンドパレットを構築する
コマンドパレットは、フォーカスのバグ、古いリスナー、不安定なコマンド参照によって失敗しがちです。このスキルは、信頼性の高いキーボード操作型パレットのための実践的な React パターンを提供します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "implementing-command-palettes" from https://skillstore.io/skills/agentworkforce-implementing-command-palettes.md and its manifest at https://skillstore.io/api/skills/agentworkforce-implementing-command-palettes/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「implementing-command-palettes」を使用しています。 開発者が、ArrowDown でページがスクロールし、選択中のコマンドが一貫せずに移動する理由を尋ねています。
期待される結果:
回答では、preventDefault 処理の欠落を特定し、入力のフォーカスを維持したまま window keydown リスナーを使用することを推奨し、焦点を絞ったテストチェックリストを含めます。
「implementing-command-palettes」を使用しています。 チームが、各コマンドにアイコンを追加した後にコマンド登録が繰り返されると報告しています。
期待される結果:
回答では、不安定な React 要素とハンドラーについて説明し、安定した定数、メモ化されたコールバック、ラベルベースの変更検出を推奨します。
「implementing-command-palettes」を使用しています。 プロダクト UI で、g d が Go to dashboard コマンドに一致するショートカットが必要です。
期待される結果:
回答では、ショートカットの正規化、クエリのトリミング、ラベルマッチング、フィルター変更時の選択インデックスのリセットを提案します。
セキュリティ監査
安全All 51 static findings are false positives caused by Markdown backticks, TypeScript template literals, and ordinary words such as key and command. SKILL.md contains instructional React examples only, with no shell execution, secret access, reconnaissance, network calls, or prompt injection.
リスク要因
⚙️ 外部コマンド (48)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/agentworkforce-implementing-command-palettes/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/agentworkforce-implementing-command-palettes?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/agentworkforce-implementing-command-palettes?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/agentworkforce-implementing-command-palettes/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/agentworkforce-implementing-command-palettes.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形式の引用
AgentWorkforce. (2026). implementing-command-palettes security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/agentworkforce-implementing-command-palettes/audits/9BibTeX形式の引用
@techreport{agentworkforce-agentworkforce-implementing-command-palettes-2026,
author = {AgentWorkforce},
title = {implementing-command-palettes security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/agentworkforce-implementing-command-palettes/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: "implementing-command-palettes security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "AgentWorkforce"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/agentworkforce-implementing-command-palettes/audits/9"
identifiers:
- type: other
value: "skillstore:agentworkforce-implementing-command-palettes:audit:9"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
プロダクト用コマンドパレットを追加する
フォーカスやスクロール位置を失わずに、ナビゲーション、検索、アクションのためのキーボードパレットを構築します。
キーボード操作のバグを修正する
矢印キーの移動、Escape 処理、Enter 実行、選択中アイテムの表示に関する問題を診断します。
コマンド登録を安定化する
参照の変化によって発生する、繰り返しのコマンド登録や maximum update depth エラーを防ぎます。
これらのプロンプトを試す
このスキルを使用して、入力フォーカス、矢印ナビゲーション、Enter 実行、Escape で閉じる動作を備えた基本的な React Cmd+K コマンドパレットを設計してください。
このスキルを使用して、ラベル、g d のようなショートカット、番号付きアイテムが予測可能なユーザークエリに一致するように、コマンドフィルタリングを改善してください。
このスキルを使用して、長いフィルタ済みリストにおけるコマンドパレットのフォーカス、選択インデックスのリセット、scrollIntoView の動作をレビューしてください。
このスキルを使用して、不安定なアイコン、ハンドラー、オブジェクト参照、リスナー依存関係の誤りについて、React のコマンド登録ロジックを監査してください。
ベストプラクティス
- コマンドパレットのコンテンツは、開いている間だけレンダリングし、効果がきれいにマウントおよびアンマウントされるようにします。
- 入力のフォーカスを維持し、スコープされた window keydown リスナーを通じてナビゲーションを処理します。
- コマンドを登録する前に、アイコンと無効化されたアクションを安定した参照として定義します。
回避
- キーボードリスナーを登録する効果の後に、閉じた状態の return を置かないでください。
- メモ化せずに、毎回のレンダーでコマンドアイコンやアクション関数を再作成しないでください。
- 無効化されたコマンドに対して、安定した no-op ハンドラーの方が安全な場合に undefined アクションを使用しないでください。
よくある質問
このスキルはどのような問題を解決しますか？
完全なコンポーネントは含まれていますか？
なぜラッパーコンポーネントを使用するのですか？
ショートカットのマッチングはどのように処理しますか？
Claude、Codex、Claude Code はこれを使用できますか？
外部コマンドを実行しますか？
開発者情報
作成者
AgentWorkforceライセンス
MIT
Skillstore リビジョン
r2
バージョンに関する注意
作者はバージョンを宣言していません。
リポジトリ
https://github.com/AgentWorkforce/relay/tree/main/.claude/skills/implementing-command-palettes参照
31bc7611b504c197d3e993aef7943461c871616f
メンテナンスの新しさ
2026/7/28
利用状況
7 ダウンロード · 343 閲覧
ファイル構成
📄 SKILL.md