Tessl • The package manager for agent skills

SkillPublic

r3f-animation

React Three Fiber animation - useFrame, useAnimations, spring physics, keyframes. Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement.

Quality

78%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/r3f-animation/SKILL.md

Quality

Content

63%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, well-organized pattern catalog with lean prose and working code, weakened by monolithic single-file structure, repeated boilerplate, and some import-incomplete examples. Splitting GLTF/spring/skeletal/state detail into reference files would fix both the progressive-disclosure and conciseness gaps at once.

Suggestions

Move the GLTF playback control, spring configuration, skeletal animation, and zustand state-management sections into one-level-deep reference files (e.g. references/gltf-animations.md, references/springs.md, references/state-performance.md), keeping only Quick Start and short pattern summaries with links in SKILL.md.

Deduplicate the useGLTF setup boilerplate by showing the full component once and using abbreviated variants afterward, and merge the overlapping 'Animation with Zustand State' and 'State Management Performance' sections.

Add missing imports to each example (useState, THREE, Html) and a brief decision guide (one line each: when to use useFrame vs @react-spring vs useAnimations vs drei helpers).

Dimension	Reasoning	Score
Conciseness	Prose is lean and assumes competence, but the useGLTF/group boilerplate is repeated across roughly six examples, and 'Animation with Zustand State' substantially duplicates 'State Management Performance' — mostly efficient but clearly could be tightened (anchor 3), not the minor-trim case of anchor 4.	3 / 5
Actionability	Nearly all guidance is executable, copy-paste-ready TSX covering the common cases (useFrame setup, GLTF playback and crossfade, spring presets, gesture drag). Anchor 4 rather than 5 because several examples omit imports (useState in AnimatedBox, THREE in the Character and blending examples, Html in HUD) or carry placeholder JSX like '...mesh'.	4 / 5
Workflow Clarity	The catalog is well sequenced (Quick Start → useFrame → GLTF → springs → morph/skeletal → drei helpers → state → performance) with good/bad contrasts for performance patterns. No validation checkpoints are needed since no destructive or batch operations exist, but there is no decision guidance for choosing among the four overlapping animation approaches, keeping it at anchor 4 rather than 5.	4 / 5
Progressive Disclosure	No bundle files exist (no references/, scripts/, or assets/), so ~1000 lines are inlined in SKILL.md. Section headers are clear and well-organized, but content that clearly belongs in separate reference files (spring config details, skeletal/bone patterns, zustand performance deep-dive) is all inline — the anchor-3 case of good structure undermined by non-split content, not anchor 2 since structure and navigation are real.	3 / 5
	Total	14 / 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 list plus an explicit, multi-trigger 'Use when' clause in third person. Minor room to improve by adding synonyms and covering the morph/skeletal/drei facets the body actually delivers.

Dimension	Reasoning	Score
Specificity	Lists several concrete capabilities ('useFrame, useAnimations, spring physics, keyframes'), matching the 'several specific actions; minor gaps' anchor. It is not a 5 because the body covers morph targets, skeletal animation, and drei helpers that the description omits.	4 / 5
Completeness	Explicitly answers both: the what ('useFrame, useAnimations, spring physics, keyframes') and the when ('Use when animating objects, playing GLTF animations, creating procedural motion, or implementing physics-based movement'), with concrete trigger phrases — a direct match for the anchor-5 example. Third-person voice is respected.	5 / 5
Trigger Term Quality	Triggers like 'animating objects, playing GLTF animations, creating procedural motion, implementing physics-based movement' are phrases users would naturally say, but common synonyms and variations (e.g. 'moving objects', 'spring animation', '.glb files') are missing — squarely the anchor-4 example of good coverage with a few natural terms absent.	4 / 5
Distinctiveness Conflict Risk	A clear R3F-animation niche with distinct triggers, but the skill's own 'See Also' notes r3f-fundamentals covers 'useFrame and animation loop', creating minor overlap risk with that closely related skill — the anchor-4 case rather than 5.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1007 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: zebbern/claude-code-guide
Path: skills/r3f-animation/SKILL.md
Revision: 2fca148

Reviewed: 16 days ago

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.

r3f-animation

Table of Contents

Is this your skill?