CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

65

Quality

78%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/react/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%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 highly actionable, token-efficient API reference with excellent executable examples, but it is a monolithic single-file reference rather than a progressive-disclosure overview, and it lacks any sequenced workflow with validation checkpoints.

Suggestions

Split the inline Key Exports table and detailed prop-expression/event-system references into separate reference files (e.g. REFERENCE.md), keeping SKILL.md as a concise overview with clearly signaled one-level-deep links.

Add a short sequenced 'build flow' (define catalog -> define registry -> render spec -> wire events/state) with an explicit validation checkpoint so the workflow path is unambiguous rather than implicit.

Tighten the redundant bindState/statePath clarifications that recur across the Dynamic Prop Expressions, Built-in Actions, and useBoundProp sections into a single canonical note.

DimensionReasoningScore

Conciseness

Dense, fluff-free reference that assumes Claude knows React and avoids explaining basics, but carries minor redundancy (e.g., repeated statePath/bindState clarifications) and inlined API material that could be trimmed, sitting just below the lean 5 anchor.

4 / 5

Actionability

Provides copy-paste-ready TypeScript/TSX and JSON examples across the common cases (registry, catalog, slots, two-way binding, events, watchers, actions, useBoundProp), with specific signatures and return values matching the fully-executable 5 anchor.

5 / 5

Workflow Clarity

Content is feature-organized with a clear Quick Start entry path, but it is reference material rather than a sequenced multi-step process, so there is no explicit workflow ordering or checkpoints; it is not a destructive/batch skill so no validation cap applies.

3 / 5

Progressive Disclosure

Well-organized with clear section headers, but all content (full Key Exports table, every prop expression, event system) is inlined in one 290-line file with no separate reference files or signaled one-level-deep links, matching the 'some structure but should be split' 3 anchor.

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, well-structured description that clearly answers both what the skill does and when to use it, with concrete trigger phrases tied to a specific package niche. Minor overlap risk with generic React UI work and slightly less-than-comprehensive action variety keep it just short of perfect.

DimensionReasoningScore

Specificity

Names the domain and lists several concrete actions ('turns JSON specs into React components', 'building React UIs from JSON', 'creating component catalogs', 'rendering AI-generated specs'), but they are variations on one capability rather than distinct comprehensive actions, so it sits below the 5 anchor.

4 / 5

Completeness

Explicitly states what it does ('React renderer for json-render that turns JSON specs into React components') and when to use it via a concrete 'Use when...' clause with multiple trigger phrases, matching the 5 anchor.

5 / 5

Trigger Term Quality

Good coverage of natural terms a developer would say ('JSON specs', 'React UIs from JSON', 'component catalogs', 'AI-generated specs', '@json-render/react'); a few synonyms or variations are missing relative to the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The named '@json-render/react' package gives a clear niche with minimal conflict risk, but the broader 'building React UIs from JSON' trigger could overlap with general React skills, keeping it just below 5.

4 / 5

Total

17

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/json-render
Reviewed

Table of Contents

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.