📦

react

Name: react
Author: vercel-labs

內容修訂 r1 安全 ⚙️ 外部命令

Build React UIs from JSON Specs

Static React interfaces are difficult to generate and maintain from structured data. This skill explains how to render JSON specs, define catalogs, manage state, and connect events in React.

支援: Claude Codex Code(CC)

🥉 78 銅級

Maintain this Skill? Claim it 🥉 78 銅級

使用我的智慧代理安裝

將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。

智能體請求

Review the Skillstore skill "react" from https://skillstore.io/skills/vercel-labs-react.md and its manifest at https://skillstore.io/api/skills/vercel-labs-react/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。

Agent 可讀資源

當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。

Markdown 詳情 GET /skills/vercel-labs-react.md 已簽名 manifest GET /api/skills/vercel-labs-react/manifest 已簽名 lockfile GET /api/skills/vercel-labs-react/lockfile

測試它

正在使用「react」。 How do I render a JSON card containing a button?

預期結果:

Define a catalog and registry, then pass the JSON element tree and registry to Renderer. The card receives its typed title prop and renders its child button.

正在使用「react」。 How can an input update shared state?

預期結果:

Bind the input value to a state path with the documented binding expression.
Use useBoundProp inside the component to read the resolved value and write changes back through the provided binding.

正在使用「react」。 Which exports support an interactive application?

預期結果:

Use Renderer and defineRegistry for rendering, StateProvider or createStateStore for state, useBoundProp for two-way form binding, and useAction or useActions for event actions.

安全審計

安全

v1 • 2026/9/29 開啟版本化報告

All 71 static findings are false positives caused by Markdown code fences, inline code spans, or JavaScript examples. No shell execution, prompt injection, or other net-new security issue was evidenced in SKILL.md.

已掃描檔案

299

分析行數

複核項目

已忽略的誤報

風險因素

⚙️ 外部命令 (50)

最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。

審計單位: codex

分享與引用此報告

分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。

開啟版本化報告

複製報告連結

https://skillstore.io/skills/vercel-labs-react/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/vercel-labs-react/security.svg)](https://skillstore.io/skills/vercel-labs-react?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/vercel-labs-react?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-react/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/vercel-labs-react.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 引用

vercel-labs. (2026). react security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-react/audits/1

BibTeX 引用

@techreport{vercel-labs-vercel-labs-react-2026,
  author = {vercel-labs},
  title = {react security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/vercel-labs-react/audits/1},
  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 security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "vercel-labs"
date-released: "2026-09-29"
url: "https://skillstore.io/skills/vercel-labs-react/audits/1"
identifiers:
  - type: other
    value: "skillstore:vercel-labs-react:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 評分

評分依據證據置信度: 中

架構

可維護性

內容

社群

規範符合度

你可以打造什麼

Prototype JSON-driven screens

Create a small React renderer and catalog for an interface whose layout and content arrive as structured JSON.

Connect forms to application state

Use state bindings, validation, watchers, and built-in actions to build interactive forms from JSON specs.

Build reusable component libraries

Define typed registries and catalog-agnostic components that can render shared JSON UI patterns across projects.

試試這些提示

Explain the quick start

Explain the smallest setup for rendering a JSON spec with @json-render/react. Identify each import and explain the registry relationship.

Create a typed catalog

Design a catalog with a Button and Card component. Include typed props, a default slot, descriptions, and matching type-safe registry implementations.

Add bound form state

Show how to build a form input that reads and writes a state path with useBoundProp. Explain the bindings map and validation result handling.

Architect an interactive renderer

Plan a JSON-driven React screen with external state, conditional visibility, named slots, event actions, watchers, and reusable catalog-agnostic components. Identify integration risks.

最佳實務

Define typed prop schemas and keep catalog descriptions aligned with the component behavior.
Use natural value properties with documented binding expressions for two-way form state.
Keep application-specific actions, authorization, and external state policies explicit at the integration boundary.

避免

Do not use slots.default for named content; use children for the default slot and the top-level slots object for named slots.
Do not add a statePath prop for two-way binding when the documented binding expression and useBoundProp flow are required.
Do not treat generated JSON specs or action names as trusted application policy without validation and authorization.

常見問題

What is this skill for?

It explains how to use @json-render/react to turn JSON element trees into React components through catalogs and registries.

Does it generate a complete React application?

No. It provides focused API guidance and examples, while application architecture and implementation remain your responsibility.

How are named slots represented?

Use children for the default slot and the element's top-level slots object for named regions declared by the catalog.

How does two-way binding work?

Use the documented binding expression on a natural value prop, then use useBoundProp with the renderer-provided bindings map.

Can it use external state management?

Yes. The documented StateStore interface can connect StateProvider or createRenderer to systems such as Redux, Zustand, or XState.

What should I secure when using generated specs?

Validate specs, restrict registered actions, and enforce authorization before allowing state changes or application-specific side effects.

開發者詳細資訊

作者

vercel-labs

授權

MIT

Skillstore 修訂

版本提示

作者未聲明版本。

儲存庫

https://github.com/vercel-labs/json-render/tree/c2600d73908ed505e6d726f5b6f969ba8f597ce7/skills/react

引用

bad9dafc37d1638cd29cb9bab06d5f8dbcd0f6c2

維護新鮮度

2026/9/30

使用量

0 次下載 · 0 次瀏覽

檔案結構

📄 SKILL.md