CtrlK
BlogDocsLog inGet started
Tessl Logo

react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

70

Quality

85%

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%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 lean, highly actionable reference: every code example is executable, the component inventory is precise, and the catalog/registry workflow is clearly sequenced. The main improvement would be moving the full component/material API detail into a reference file and reconsidering inline dependency version numbers.

DimensionReasoningScore

Conciseness

The body is efficient and assumes competence — it never explains what React, Three.js, or JSON is, and the component list is a tight prop-level reference. It misses the 5 anchor mainly because the '## Dependencies' section inlines time-sensitive version numbers ('@react-three/fiber >= 8.0.0', 'react ^19.0.0'), which the guidelines penalize unless placed in an old-patterns/deprecated section.

4 / 5

Actionability

All guidance is executable and copy-paste ready: a complete catalog + registry setup with real imports, ThreeCanvas JSX usage, a manual Canvas alternative, a custom-component definition using shared Zod schemas, and a full spec-format JSON example. This matches the 5 anchor — 'fully executable; copy-paste ready code; specific examples cover the common cases'.

5 / 5

Workflow Clarity

The workflow is a clear, coherent sequence: pick definitions from the catalog entry point → defineCatalog → pick matching implementations → defineRegistry → render via ThreeCanvas or manual Canvas, and the two-entry-point table explains when to use which. It sits at 4 rather than 5 because there are no explicit validation/error-recovery checkpoints (e.g., what happens on schema-mismatched spec props), though the skill involves no destructive or batch operations so no cap applies.

4 / 5

Progressive Disclosure

The body is well organized with clear sections (entry points, usage, rendering, components, schemas, spec format, dependencies) and no nested or buried references — and no bundle files exist, so nothing is misfiled. It does not reach 5 because at ~175 lines the full 19-component API reference and the complete materialSchema listing are inlined reference material that could be split into a separate file, per the 4 anchor's 'minor organization gaps'.

4 / 5

Total

17

/

20

Passed

Description

87%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: it names the exact package and domain, gives multiple concrete capabilities, and includes an explicit, well-scoped 'Use when...' trigger clause. The only room for improvement is broader keyword coverage (synonyms like 'R3F' and file extensions like '.gltf') and slightly fuller enumeration of capabilities.

DimensionReasoningScore

Specificity

The description lists several concrete actions — 'building 3D scenes from JSON specs, rendering meshes/lights/models/environments' and 'integrating Three.js with json-render catalogs' — which matches the 'several specific actions; minor gaps' anchor. It falls short of the 5 anchor only because coverage of the domain's actions (e.g., materials, cameras, animations) is not exhaustive.

4 / 5

Completeness

It explicitly answers 'what' ('React Three Fiber 3D renderer for json-render') and 'when' ('Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs') with concrete trigger phrases. This mirrors the 5 anchor's structure of what + multiple explicit when-triggers; the 4 anchor applies only when the 'when' clause is weaker or less specific.

5 / 5

Trigger Term Quality

Natural trigger terms like 'React Three Fiber', 'Three.js', '3D scenes', 'JSON specs', and 'meshes/lights/models' map well to what a user would say. A few natural variants are missing (e.g., 'R3F', '.gltf', 'drei'), matching the 'good keyword coverage; a few natural terms missing' anchor rather than the comprehensive 5 anchor.

4 / 5

Distinctiveness Conflict Risk

The description occupies a clear niche (R3F rendering inside the json-render ecosystem) with distinct, specific triggers; it would not fire for generic React or Three.js work outside json-render. This matches the 'clear niche with distinct triggers; minimal conflict risk' anchor, not the 4 anchor which requires noted overlap risk with closely related skills.

5 / 5

Total

18

/

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.

Validation — 16 / 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.