スキル react-components
📦
react-components
コンテンツリビジョン r1 高リスク ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス
StitchデザインをReactコンポーネントに変換
Stitchデザインを保守しやすいReactコードに変換する作業は、時間がかかり、一貫性を保ちにくい場合があります。このスキルは、Claude、Codex、またはClaude Codeに対して、取得、コンポーネント構造、トークンマッピング、検証をガイドします。
対応: Claude Codex Code(CC)
インストール前に停止して確認を求めてください。
計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
エージェントリクエスト
Review the Skillstore skill "react-components" from https://skillstore.io/skills/google-labs-code-react-components.md and its manifest at https://skillstore.io/api/skills/google-labs-code-react-components/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「react-components」を使用しています。 StitchのアクティビティフィードカードをReactに変換する。
期待される結果:
- 型付きpropsを持つ再利用可能なアクティビティカードコンポーネント。
- モックコンテンツを別のデータレイヤーに移動。
- props構造と色の使用に関する検証メモ。
「react-components」を使用しています。 Stitchダッシュボード画面からViteコンポーネントシステムを作成する。
期待される結果:
- 責務ごとに整理された小さなダッシュボードコンポーネント群。
- 色、タイポグラフィ、余白に関するテーママッピングのガイダンス。
- 構造、検証、視覚的レビューに関するチェックリストの要約。
「react-components」を使用しています。 生成されたコンポーネントのアーキテクチャ上の問題をレビューする。
期待される結果:
- 不足しているprops、ハードコードされたスタイル、肥大化したファイルの簡潔なリスト。
- プロジェクト構造を維持する修正案。
- レビューした各コンポーネントの最終検証ステータス。
セキュリティ監査
高リスクv4 • 2026/7/5 バージョン別レポートを開く
Most static findings are false positives caused by Markdown code spans, JSX template literals, Apache license URLs, and ordinary relative imports. The confirmed risks are the intentional Bash and npm workflow, an unconstrained curl download helper, and validator file reads from CLI-supplied paths. No prompt injection attempt was found in the reviewed files.
10
スキャンされたファイル
374
解析済み行数
7
レビュー項目
0
誤検知を無視
確認済みのセキュリティ上の懸念 (2)
高
Unvalidated External Download and File Write
SKILL.md instructs agents to run a Bash helper with htmlCode.downloadUrl, and scripts/fetch-stitch.sh passes URL and OUTPUT arguments directly to curl. The helper lacks scheme, domain, and output path restrictions.
The Bash workflow and curl command are explicit, and both URL and output path come from script arguments. The expected Stitch source is legitimate, but no allowlist or path guard is present.
中
Broad Agent Tool Permissions
The skill declares Bash, Read, Write, and web_fetch access for a design conversion workflow. These broad permissions increase impact if design metadata or prompt content is hostile.
The allowed-tools block explicitly grants broad execution, file, and network capabilities. This is not malicious by itself, but it expands the trust boundary for a community skill.
機能レビュー項目 (7)
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
中
Unix shell invocation
#!/bin/bash
This is an executable Bash helper that the skill instructs agents to run. In context it invokes curl with caller-provided URL and output arguments.
中
Node.js fs operations
const code = fs.readFileSync(filePath, 'utf-8');
The validator reads a CLI-supplied file path without restricting it to project component files. This is legitimate validation, but unsafe arguments could read arbitrary local files.
中
Synchronous file operations
const code = fs.readFileSync(filePath, 'utf-8');
The same readFileSync call performs local file reads from an unconstrained argument. The synchronous API is not itself malicious, but the path handling is a real filesystem exposure.
中
Ruby/shell backtick execution
- Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.ht
The skill directs the agent to use Bash to run scripts/fetch-stitch.sh with a metadata URL. That is real shell and network execution, even though the command is specific.
中
Ruby/shell backtick execution
1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation t
The skill asks the agent to run npm install when dependencies are missing. npm install fetches packages and may run lifecycle scripts in the target project.
中
Ruby/shell backtick execution
* Run `npm run validate <file_path>` for each component.
The skill instructs agents to run npm run validate with a component path. This launches local Node code that reads the provided file path.
中
Ruby/shell backtick execution
* Start the dev server with `npm run dev` to verify the live result.
The skill instructs agents to start the dev server with npm run dev. This executes project scripts and opens a local service as part of the workflow.
リスク要因
⚙️ 外部コマンド (24)
examples/gold-standard-card.tsx:49 examples/gold-standard-card.tsx:50 examples/gold-standard-card.tsx:58-59 resources/component-template.tsx:31 scripts/fetch-stitch.sh:1 scripts/validate.js:41 scripts/validate.js:51 scripts/validate.js:52 SKILL.md:17 SKILL.md:18 SKILL.md:20 SKILL.md:22 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:31 SKILL.md:32 SKILL.md:36 SKILL.md:37 SKILL.md:38 SKILL.md:39 SKILL.md:41 SKILL.md:42 SKILL.md:43
🌐 ネットワークアクセス (4)
監査者: codex 監査履歴を表示 →
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/google-labs-code-react-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/google-labs-code-react-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/google-labs-code-react-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形式の引用
google-labs-code. (2026). react-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/google-labs-code-react-components/audits/4BibTeX形式の引用
@techreport{google-labs-code-google-labs-code-react-components-2026,
author = {google-labs-code},
title = {react-components security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/google-labs-code-react-components/audits/4},
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: "react-components security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "google-labs-code"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/google-labs-code-react-components/audits/4"
identifiers:
- type: other
value: "skillstore:google-labs-code-react-components:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 中 59
アーキテクチャ
85
保守性
87
コンテンツ
70
コミュニティ
83
仕様準拠
作成できるもの
デザイン画面を変換
Stitch画面を、マッピング済みのTailwindトークンと検証手順を備えたモジュール化Reactコンポーネントに変換します。
UI出力を標準化
生成されるインターフェース作業全体で、一貫したコンポーネント構造、データ分離、テーマ使用を適用します。
プロダクトフローをプロトタイプ化
チームがレイアウトとインタラクションをより早くレビューできるように、デザインからViteベースのコンポーネントスキャフォールドを作成します。
これらのプロンプトを試す
1画面を変換
react-components skillを使用して、[screen]という名前のStitch画面をモジュール化されたReactコンポーネントに変換してください。生成後に各コンポーネントを検証してください。
プロジェクトトークンを適用
[screen]をReactコンポーネントに変換し、色、余白、フォントを私のプロジェクトのTailwindテーマにマッピングしてください。ハードコードされたhex値は避けてください。
コンポーネントシステムを構築
[flow]をコンポーネントシステムに変換してください。検証を実行する前に、モックデータ、hooks、再利用可能なコンポーネント、アプリ配線を分離してください。
生成されたUIを改善
生成されたReactコンポーネントをアーキテクチャチェックリストに照らして監査してください。構造、props typing、テーママッピング、検証エラーを修正してください。
ベストプラクティス
- ファイルを生成する前に、Stitch画面、viewport、プロジェクトテーマを確認します。
- ワークフローの実行を許可する前に、すべてのネットワークfetchとコマンドをレビューします。
- ASTチェックではレイアウトの忠実度を検証できないため、検証後に視覚的チェックを実行します。
回避
- 信頼できないデザインURLをレビューせずにBashコマンドへ貼り付けないでください。
- 大きな生成画面を単一のReactファイルとして保持しないでください。
- 検証成功を視覚的正確性の証明として扱わないでください。
よくある質問
このスキルは何をしますか？
Stitch画面を、Tailwindトークンのガイダンス付きでモジュール化されたReactおよびViteコンポーネントに変換するのに役立ちます。
Stitch MCPは必要ですか？
はい。このワークフローでは、画面HTMLやスクリーンショットのダウンロードURLを含むStitch MCPメタデータを想定しています。
コマンドを実行しますか？
はい。Bash、npm install、npm validation、ローカルdev serverコマンドを実行できます。
どのような検証が含まれますか？
バリデーターはSWCでTypeScriptを解析し、propsインターフェースとハードコードされたhexカラーをチェックします。
完全なアプリを構築できますか？
生成されたコンポーネント構造とアプリ配線に重点を置きます。プロダクトロジックと最終的なUXレビューは別作業として残ります。
ロックダウンされた環境でも安全ですか？
ネットワークfetch、ファイルシステム書き込み、ローカルコマンド実行を使用するため、追加の承認が必要になる場合があります。
開発者情報
作成者
google-labs-codeライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
30c73eac2afe762f6aa9c4553158769369d47351
メンテナンスの新しさ
2026/7/24
利用状況
10 ダウンロード · 180 閲覧