CtrlK
BlogDocsLog inGet started
Tessl Logo

r3f-best-practices

React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.

60

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/r3f-best-practices/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

60%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 well organized as a prioritized rule index with good executable examples for the most critical patterns, but it is undermined by references to rule files and a compiled document that are not present in the bundle, plus mild padding in the Ecosystem Coverage section. The progressive-disclosure claim ('read individual rule files') cannot be acted on as shipped.

Suggestions

Include the referenced rules/ directory in the bundle (or remove the 'How to Use' file references) so the 'read individual rule files' instruction is actionable — currently no rule files exist.

Delete the 'Ecosystem Coverage' section; the package descriptions ('zustand - State management', 'leva - Debug GUI') restate knowledge Claude already has, and the packages are already listed in the description and rule categories.

Fix the 'Full Compiled Document' path ('../R3F_BEST_PRACTICES.md' points outside the skill) and correct the '12 categories' claim, which mismatches the 11 rows in the priority table.

DimensionReasoningScore

Conciseness

The rule index and code examples are tight, but there is unnecessary padding: the 'Ecosystem Coverage' section explains what zustand/leva/postprocessing are (concepts Claude already knows), and the intro line repeats the category count. Not score 2 because the bulk of the body is a lean one-line-per-rule index; not score 4 because the Ecosystem Coverage section and category-table/heading redundancy could be trimmed.

3 / 5

Actionability

The 'Critical Patterns' section gives complete, executable JSX examples (useFrame ref mutation, zustand selectors, useGLTF with preload, Suspense, Perf, visibility toggling) with BAD/GOOD contrast. Not score 5 because the remaining ~70 rules are one-line labels with no code or specifics inline, and the actual detail lives in files that are referenced but not present in the bundle.

4 / 5

Workflow Clarity

As a reference skill its usage is unambiguous: a priority table routes the reader to prefixed rule IDs, and 'How to Use' shows example rule-file paths. Not score 5 because the 'How to Use' section only lists three example paths without stating how to locate a rule for a given task, and the compiled-document path ('../R3F_BEST_PRACTICES.md') introduces ambiguity about where the full content actually lives.

4 / 5

Progressive Disclosure

The body references 'rules/perf-never-set-state-in-useframe.md' and a compiled '../R3F_BEST_PRACTICES.md', but the bundle contains no rules/ directory (nor references/, scripts/, or assets/) — the referenced detail files do not exist, so the progressive-disclosure structure is broken in practice, and the full document path points outside the skill. Not score 3 because the section structure itself is good but the referenced files are simply absent, which is worse than 'not clearly signaled'.

2 / 5

Total

13

/

20

Passed

Description

81%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 with explicit trigger guidance and excellent natural-keyword coverage of the R3F ecosystem packages. Its main weakness is that 'best practices' is a category claim rather than an enumeration of the skill's concrete capabilities.

DimensionReasoningScore

Specificity

The description names the domain ('React Three Fiber (R3F) and Poimandres ecosystem best practices') and lists actions 'writing, reviewing, or optimizing R3F code', but the actions are generic verbs rather than concrete capabilities. It does not score 4 because it never enumerates what the skill actually provides (e.g., performance rules, useFrame patterns, Drei helper usage); it does not score 2 because the domain and several real actions are named.

3 / 5

Completeness

The 'when' is explicit and concrete ('Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving...'), and the 'what' is present ('R3F and Poimandres ecosystem best practices'). It does not score 5 because the 'what' is a category label rather than concrete statements of what the skill does; it clearly exceeds anchor 3 since a full explicit 'Use when...' clause with trigger packages is present.

4 / 5

Trigger Term Quality

Covers the natural terms users would say: 'React Three Fiber', the synonym 'R3F', and the package names '@react-three/fiber', '@react-three/drei', '@react-three/postprocessing', '@react-three/rapier', 'zustand', and 'leva'. Comprehensive synonym coverage; nothing significant a user would plausibly type is missing.

5 / 5

Distinctiveness Conflict Risk

The R3F/Poimandres niche is highly specific and the triggers are distinct package names unlikely to fire for other skills. Minimal overlap risk — even the closest neighbors (plain Three.js or general React skills) are not claimed.

5 / 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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
zebbern/claude-code-guide
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.