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.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

75%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.

The body is a well-structured, mostly executable reference for the R3F renderer with lean prose and clear usage sequencing. It could improve by moving dense schema/reference material into separate bundle files and expanding terse component prop summaries into full signatures.

Suggestions

Move the full materialSchema definition and component prop tables into a separate references file (e.g. REFERENCE.md) and link to it from the body to improve progressive disclosure.

Expand the per-component prop hints (e.g. 'Box -- width, height, depth, material') into typed signatures or point to a definitions file so the guidance is fully executable.

Add a brief validation/check step (e.g. confirming the catalog and registry component keys match) to make the setup workflow more robust.

Dimension	Reasoning	Score
Conciseness	Lean and assumes Claude's competence without explaining Three.js or library basics, though the inline materialSchema and full spec-format blocks are reference-heavy and could be trimmed or moved.	4 / 5
Actionability	Provides copy-paste-ready TypeScript/TSX for catalog setup, registry setup, and both rendering paths, but the component prop lists are summaries rather than fully typed signatures.	4 / 5
Workflow Clarity	The catalog→registry→render sequence is clear across two entry points, and this rendering skill is not destructive so no validation cap applies; minor gaps only.	4 / 5
Progressive Disclosure	Well-organized into clear sections with no nested references and no bundle files, though at ~170 lines some reference material (full material schema, component prop tables) is inlined rather than split out.	4 / 5
	Total	16 / 20 Passed

Description

92%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.

The description is specific, complete, and clearly distinct, naming concrete actions and providing explicit 'Use when' trigger guidance in third person. It only slightly under-covers natural synonyms like 'R3F'.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'building 3D scenes from JSON specs, rendering meshes/lights/models/environments, integrating Three.js with json-render catalogs' — giving comprehensive coverage of the skill's capabilities.	5 / 5
Completeness	Explicitly answers both 'what' ('React Three Fiber 3D renderer for json-render') and 'when' via a concrete 'Use when working with...' clause with multiple trigger phrases.	5 / 5
Trigger Term Quality	Includes natural terms users would say ('3D scenes', 'Three.js', 'JSON specs', 'meshes/lights/models/environments') alongside the package name, but misses common synonyms like 'R3F'.	4 / 5
Distinctiveness Conflict Risk	Targets a clear niche (R3F integration for json-render) with distinct, specific triggers that minimize overlap with other skills.	5 / 5
	Total	19 / 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-three-fiber/SKILL.md
Commit: 0f6798b

Reviewed: 2 days 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.