react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

Quality

77%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/react/SKILL.md

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A dense, well-organized API reference with consistently executable code examples and no filler. Its main weakness is that everything lives in SKILL.md itself — with no references/ bundle, the detailed exports and feature material that belongs in one-level-deep reference files inflates the overview.

Suggestions

Move bulk API material out of SKILL.md into one-level-deep reference files (e.g. references/API.md for the Key Exports table, references/BINDINGS.md for $bindState/$bindItem/useBoundProp, references/EVENTS.md for the event system) and keep only Quick Start and an overview in the body, with clearly signaled links like 'See [API.md](references/API.md)'.

Replace placeholder strings in the filtered-list and named-slots examples ("children": ["task-card"], "header": ["heading"]) with real element-tree fragments so the examples are copy-paste executable.

Add a one-line import for the visibility helpers (e.g. `import { visibility } from "@json-render/react"`) or a short usage snippet so `visibility.when`/`visibility.and` are actually usable as written.

Dimension	Reasoning	Score
Conciseness	The body is lean and code-first with no explanations of concepts Claude already knows (no React/JSON primers; terse rules like "Do not use `slots.default`"). A small amount of redundancy — the `$bindState` vs `statePath` clarification appears in both "Dynamic Prop Expressions" and "Built-in Actions" — keeps it below the every-token-earns-its-place anchor of 5.	4 / 5
Actionability	Quick Start, catalog, registry, `useBoundProp`, event, and external-store examples are executable and nearly copy-paste ready. Minor gaps: the `visibility.when`/`visibility.and` helpers are named but never imported or demonstrated, and the filtered-list example uses placeholder strings ("children": ["task-card"]) rather than real element trees, so it falls just short of fully executable.	4 / 5
Workflow Clarity	The catalog → registry → render path is demonstrated through Quick Start and Creating a Catalog, and the skill is a reference/renderer rather than a destructive or batch operation, so no validation cap applies. It falls short of 5 because the sequence is implied by example order rather than explicitly stated, and there are no troubleshooting checkpoints for common failure modes (e.g., unregistered components or invalid specs).	4 / 5
Progressive Disclosure	No reference files exist; the full API surface (~290 lines: Key Exports table, providers, bindings, events, watchers, built-in actions) is inlined in SKILL.md. Section headers give it real structure, matching the anchor of 'content that should be separate is inline' with some organization, but bulk reference material belongs in one-level-deep files like API.md or BINDINGS.md to reach a higher score.	3 / 5
	Total	15 / 20 Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: concrete capability statement followed by an explicit multi-trigger 'Use when' clause anchored on a specific package name. It clearly communicates what the skill does and when to reach for it, with only minor coverage and overlap gaps.

Dimension	Reasoning	Score
Specificity	"turns JSON specs into React components" plus "creating component catalogs" and "rendering AI-generated specs" list several specific concrete actions in a named domain, with minor gaps (state management and two-way binding features are unmentioned). Not 5 because capability coverage is not comprehensive; clearly above the 1-2-action anchor at 3.	4 / 5
Completeness	Explicitly answers both: what ("React renderer for json-render that turns JSON specs into React components") and when ("Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs") with concrete trigger phrases, matching the anchor-5 example structure.	5 / 5
Trigger Term Quality	"working with @json-render/react, building React UIs from JSON, creating component catalogs, rendering AI-generated specs" gives good natural-phrase coverage including the package name as a handle. Missing a few synonyms or variations users might say, so not the comprehensive coverage of anchor 5.	4 / 5
Distinctiveness Conflict Risk	"json-render", "@json-render/react", and "JSON specs" carve a clear niche with minimal conflict risk, but "building React UIs from JSON" could mildly overlap with generic React UI-building skills. Not 5 because of that minor overlap; well above the broad-overlap anchors.	4 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: vercel-labs/json-render
Path: skills/react/SKILL.md
Commit: c2600d7

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.