技能 react-components
📦
react-components
內容修訂 r1 高風險 ⚙️ 外部命令🌐 網路存取📁 檔案系統存取
將 Stitch 設計轉換為 React 元件
將 Stitch 設計轉換為可維護的 React 程式碼可能既緩慢又不一致。此技能會引導 Claude、Codex 或 Claude Code 完成擷取、元件結構、token 對應與驗證。
支援: 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.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「react-components」。 將 Stitch activity feed card 轉換為 React。
預期結果:
- 具備 typed props 的可重用 activity card component。
- Mock content 已移至獨立的 data layer。
- props structure 與 color usage 的驗證備註。
正在使用「react-components」。 從 Stitch dashboard screen 建立 Vite component system。
預期結果:
- 一組依職責組織的較小 dashboard components。
- 針對顏色、typography 與 spacing 的 theme mapping 指引。
- 結構、驗證與視覺審查的檢查清單摘要。
正在使用「react-components」。 審查產生的元件是否有架構問題。
預期結果:
- 遺漏 props、硬編碼 styles 與過大檔案的精簡清單。
- 保留專案結構的建議修正方式。
- 每個已審查元件的最終驗證狀態。
安全審計
高風險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 畫面轉換為模組化 React 元件，並包含已對應的 Tailwind tokens 與驗證步驟。
標準化 UI 輸出
在產生的介面工作中套用一致的元件結構、資料分離與 theme 使用方式。
建立產品流程原型
從設計建立以 Vite 為基礎的元件架構，讓團隊能更早審查版面與互動。
試試這些提示
轉換單一畫面
使用 react-components skill 將我名為 [screen] 的 Stitch 畫面轉換為模組化 React 元件。產生後驗證每個元件。
套用專案 Tokens
將 [screen] 轉換為 React 元件，並將顏色、間距與字型對應到我的專案 Tailwind theme。避免硬編碼 hex values。
建立元件系統
將 [flow] 轉換為 component system。在執行驗證前，先分離 mock data、hooks、reusable components 與 app wiring。
精修產生的 UI
依據架構檢查清單稽核產生的 React 元件。修正結構、props typing、theme mapping 與驗證失敗項目。
最佳實務
- 在產生檔案前，確認 Stitch 畫面、viewport 與專案 theme。
- 允許工作流程執行前，審查每個網路 fetch 與命令。
- 驗證後執行視覺檢查，因為 AST checks 無法驗證版面還原度。
避免
- 不要在未審查的情況下，將不受信任的設計 URL 貼入 Bash commands。
- 不要將大型產生畫面保留為單一 React files。
- 不要將驗證成功視為視覺準確性的證明。
常見問題
這個技能做什麼？
它協助將 Stitch 畫面轉換為模組化 React 與 Vite 元件，並提供 Tailwind token 指引。
它需要 Stitch MCP 嗎？
是。此工作流程需要 Stitch MCP metadata，包括 screen HTML 與 screenshot download URLs。
它會執行命令嗎？
是。它可以執行 Bash、npm install、npm validation 與 local dev server command。
包含哪些驗證？
validator 會使用 SWC 解析 TypeScript，並檢查 props interfaces 與硬編碼 hex colors。
它可以建立完整應用程式嗎？
它聚焦於產生的元件結構與 app wiring。產品邏輯與最終 UX 審查仍是另外的工作。
在鎖定環境中安全嗎？
它可能需要額外核准，因為它會使用 network fetches、filesystem writes 與 local command execution。
開發者詳細資訊
授權
MIT
Skillstore 修訂
r1
版本提示
作者未聲明版本。
引用
30c73eac2afe762f6aa9c4553158769369d47351
維護新鮮度
2026/7/18
使用量
10 次下載 · 180 次瀏覽