frontend-components
再利用可能なフロントエンドコンポーネントの構築
フロントエンドチームには、フレームワークをまたいだ一貫したコンポーネント構造が必要です。このスキルは、Claude、Codex、Claude Code が焦点の明確な再利用可能な UI コンポーネントを設計できるように支援します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-components" from https://skillstore.io/skills/eis-its-frontend-components.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-components」を使用しています。 React アプリケーション向けの再利用可能な modal コンポーネントを設計する。
期待される結果:
open state、title、content、actions、close behavior、focus handling、composition slots の props を含むコンポーネント計画。
「frontend-components」を使用しています。 表示、データ読み込み、アクションが混在している大規模な Vue card コンポーネントをリファクタリングする。
期待される結果:
表示、データ所有権、アクション制御を、明確な interface を持つ焦点の明確なコンポーネントに分離するリファクタリング提案。
「frontend-components」を使用しています。 デザインシステムに追加する前に、Svelte form コンポーネントをレビューする。
期待される結果:
prop 名、event contract、バリデーションの所有権、アクセシビリティ上の期待事項、ドキュメントの不足を扱うレビュー。
セキュリティ監査
安全The single static finding is a Markdown link to repository documentation outside the skill directory. I found no evidence of executable filesystem access, prompt injection, data exfiltration, or malicious instructions in SKILL.md.
リスク要因
📁 ファイルシステムへのアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/eis-its-frontend-components/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/eis-its-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形式の引用
EIS-ITS. (2026). frontend-components security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-components/audits/9BibTeX形式の引用
@techreport{eis-its-eis-its-frontend-components-2026,
author = {EIS-ITS},
title = {frontend-components security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/eis-its-frontend-components/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: "frontend-components security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/eis-its-frontend-components/audits/9"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-components:audit:9"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
新しい共有コンポーネントを作成する
再利用可能な UI 要素について、props、state の境界、composition、ドキュメント作成を通じてエンジニアをガイドします。
大規模な UI ファイルをリファクタリングする
複雑なコンポーネントを、より明確な interface と削減されたローカル state を持つ小さな単位に分割するのを支援します。
コンポーネントライブラリの変更をレビューする
新しいコンポーネント API が、再利用、命名、カプセル化に関するプロジェクト標準に従っているかを確認します。
これらのプロンプトを試す
この UI 要件に対応する再利用可能なコンポーネントを作成してください。明確な props を定義し、state を最小限に保ち、コンポーネントの境界を説明してください。
このコンポーネントを、より小さく焦点の明確なコンポーネントにリファクタリングしてください。挙動を維持し、prop の所有権を明確にし、移動すべき state があれば特定してください。
このコンポーネントの公開 API を設計してください。props、events または callbacks、composition points、アクセシビリティ上の期待事項、使用上の注意を含めてください。
これらのコンポーネントについて、再利用性、カプセル化、state 管理、パフォーマンスリスク、ドキュメントの不足をレビューしてください。具体的な修正を優先してください。
ベストプラクティス
- 対象フレームワークと周辺のコンポーネントコンテキストを提供してください。
- 明示的な props、state の所有権、composition の境界を求めてください。
- 生成されたコンポーネントは、テスト、アクセシビリティチェック、デザインシステムレビューで検証してください。
回避
- 1 つのコンポーネントに、無関係なビジネスロジックとプレゼンテーション上の関心事を所有させないでください。
- 親が所有した方が挙動が明確になる場合は、隠れた state を受け入れないでください。
- 使用例と文書化された prop contract なしにコンポーネントを公開しないでください。