📦

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-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

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 • 29.09.2026 Открыть версионный отчет

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

Актуальность поддержки

30.09.2026

Использование

0 загрузок · 0 просмотров

Структура файлов

📄 SKILL.md