📦

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.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

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)

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: 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