CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

r3f-interaction

React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

64

Quality

81%

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

SKILL.md
Quality
Evals
Security

Quality

Content

71%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-organized, highly actionable reference with lean prose and nearly complete runnable examples, weakened only slightly by an invalid div-inside-Canvas example and duplicate scaffolding. Its main structural flaw is the absence of progressive disclosure: everything lives inline in SKILL.md with no reference files or pointers to offload the long API catalogs.

Suggestions

Move the camera-controls catalog (Orbit/Map/Fly/FirstPerson/PointerLock/Camera/Trackball/Arcball) into a references/camera-controls.md and keep only OrbitControls plus a one-line-per-variant index in SKILL.md, adding clearly signaled links.

Fix the TransformControls example so the mode-switching buttons render outside <Canvas> (e.g., as HTML siblings in the DOM tree or via drei's Html), since a plain <div> inside Canvas will not execute.

Add brief 'choose this when' guidance for the control variants (e.g., PointerLockControls for FPS-style games, PresentationControls for product showcases) and deduplicate the repeated disable-orbit-during-transform pattern.

DimensionReasoningScore

Conciseness

Prose is lean (e.g., "Top-down map-style controls.") with comment-annotated code instead of explanations, but the exhaustive inline catalog of 8+ camera-control variants and repeated scaffolding (two OrbitControls sections, the disable-orbit pattern duplicated in TransformControls and DragControls) is over-coverage of APIs Claude largely already knows — anchor 4, not the fully lean anchor 5.

4 / 5

Actionability

Nearly all examples are complete, copy-paste-ready TSX with real props (full event-object field list, keyMap, useScroll). One real gap: the TransformControls example renders an HTML <div> inside <Canvas>, which will not execute as written — anchor 4 ("mostly executable... minor gaps"), not 5.

4 / 5

Workflow Clarity

This is a reference-style skill with no multi-step or destructive workflow, so no validation cap applies; sections are well-organized quick-start-first and each control variant carries a one-line use signal ("FPS-style controls", "Lock pointer for FPS games"). Missing guidance on choosing among the many control variants keeps it at anchor 4 rather than 5.

4 / 5

Progressive Disclosure

No bundle files exist and no references are given — ~880 lines of reference-grade material (the camera-controls catalog, gesture and scroll sections) that clearly belongs in separate reference files is inlined in SKILL.md. Header structure is good, matching anchor 3 ("some structure... content that should be separate is inline"), but nothing is split out, so it cannot reach anchor 4.

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 description: it names the domain, lists concrete capability areas, and pairs a clear what with an explicit 'Use when...' trigger clause in third person. Its only weaknesses are a few missing natural trigger variations (hover, drag) and slight overlap risk with sibling R3F/three.js skills.

DimensionReasoningScore

Specificity

Names the domain plus several concrete capability areas ("pointer events, controls, gestures, selection"), but they are topic nouns rather than actions and omit body-covered areas like keyboard input, drag, and scroll — minor gaps, matching anchor 4 rather than the comprehensive anchor 5.

4 / 5

Completeness

Clearly answers what ("React Three Fiber interaction - pointer events, controls, gestures, selection") and explicitly answers when with concrete trigger phrases ("Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences"), exactly matching the anchor 5 example pattern.

5 / 5

Trigger Term Quality

Natural phrases users would actually say ("handling user input", "implementing click detection", "adding camera controls", "interactive 3D experiences") with good coverage, but common variations like hover, drag, or raycast are missing — anchor 4, not 3 (coverage is good, not partial) and not 5 (no synonyms/extensions).

4 / 5

Distinctiveness Conflict Risk

The R3F interaction niche is distinct, but broad triggers like "handling user input" and "interactive 3D experiences" carry minor overlap risk with sibling skills such as r3f-fundamentals or a generic three.js skill — anchor 4, not 5.

4 / 5

Total

17

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (886 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

AzizBelhassan/timeverse

Path

.agents/skills/r3f-interaction/SKILL.md

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.