frontend-components
再利用可能なフロントエンドコンポーネントを構築する
大規模なフロントエンドコンポーネントは、再利用、テスト、保守が困難です。このスキルは Claude、Codex、Claude Code が、明確な props と state の境界を持つ、責務を絞った React コンポーネントを作成できるように導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-components" from https://skillstore.io/skills/devanb-frontend-components.md and its manifest at https://skillstore.io/api/skills/devanb-frontend-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-components」を使用しています。 success、warning、error メッセージ用の再利用可能な alert コンポーネントを作成してください。
期待される結果:
variant props、アクセシブルなラベル、composition に関するメモ、推奨ファイル配置を含む、焦点を絞った alert コンポーネント計画。
「frontend-components」を使用しています。 フォームフィールド、バリデーション、レイアウトが混在する大規模な settings panel をリファクタリングしてください。
期待される結果:
フォームセクション、フィールドコンポーネント、バリデーションヘルパー、親 state の所有権に関する推奨事項への分解。
「frontend-components」を使用しています。 ダッシュボード全体で使用される共有 card コンポーネントをレビューしてください。
期待される結果:
一貫したダッシュボード利用のための具体的な prop API 改善、composition の変更、ドキュメント化すべき点。
セキュリティ監査
安全Two external command findings are false positives caused by markdown inline code examples. The path traversal finding is confirmed because SKILL.md directs the assistant to load guidance through a ../../../ relative link outside the skill directory.
機能レビュー項目 (1)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
リスク要因
⚙️ 外部コマンド (2)
📁 ファイルシステムへのアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/devanb-frontend-components/audits/11?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/devanb-frontend-components?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/devanb-frontend-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/devanb-frontend-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/devanb-frontend-components.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形式の引用
DevanB. (2026). frontend-components security audit report (audit version 11) [Author version unspecified]. Skillstore. https://skillstore.io/skills/devanb-frontend-components/audits/11BibTeX形式の引用
@techreport{devanb-devanb-frontend-components-2026,
author = {DevanB},
title = {frontend-components security audit report (audit version 11)},
institution = {Skillstore},
year = {2026},
number = {11},
url = {https://skillstore.io/skills/devanb-frontend-components/audits/11},
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: "frontend-components security audit report (audit version 11)"
version: "unspecified"
type: report
authors:
- name: "DevanB"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/devanb-frontend-components/audits/11"
identifiers:
- type: other
value: "skillstore:devanb-frontend-components:audit:11"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
共有 UI コンポーネントを作成する
このスキルを使用して、責務が明確な再利用可能なボタン、カード、モーダル、フォーム、レイアウトコンポーネントを設計します。
大規模コンポーネントをリファクタリングする
このスキルを使用して、モノリシックな React コンポーネントを、焦点を絞った API とより明確な state 所有権を持つ小さなコンポーネントに分割します。
コンポーネント API を標準化する
このスキルを使用して、共有コンポーネントディレクトリ全体で prop の命名、TypeScript 型、composition パターンを揃えます。
これらのプロンプトを試す
この UI ニーズに対応する再利用可能な React コンポーネントを作成してください。責務を 1 つに絞り、明確な props とシンプルな local state を保ってください。
このコンポーネント API をレビューしてください。公開インターフェースを小さく保ちながら、より明確な prop 名、TypeScript 型、デフォルト値を提案してください。
この大規模コンポーネントを、より小さな React コンポーネントにリファクタリングしてください。動作を維持し、新しい所有権の境界を説明してください。
この機能の共有コンポーネントパターンを設計してください。composition の選択、state の配置、ファイル構成、使用ガイダンスを含めてください。
ベストプラクティス
- 各コンポーネントは 1 つの責務に集中させます。
- 隠れた結合よりも明示的な prop インターフェースを優先します。
- 共有コンポーネントには、想定される使用方法と境界を文書化します。
回避
- 関連のないレイアウト、データ取得、ビジネスロジックを 1 つのコンポーネントに入れないでください。
- 内部実装の詳細を漏らすような広範な props を公開しないでください。
- 再利用要件が明確になる前に共有コンポーネントを作成しないでください。