webgl-3d-object

Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

88%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 high-quality, code-first skill body: fully executable recipe, disciplined defaults, an explicit avoid list, and an end-of-work validation checklist. The main improvement opportunities are trimming duplicated default values and moving the recipe plus tuning defaults into bundle files.

Suggestions

Trim the trailing initWebGL3DObject() invocation (or reduce it to the options that actually differ from the function's defaults) — it currently duplicates values already set as defaults inside the recipe.

Move the full Three.js recipe into a scripts/ file and the Material/Lighting/Motion defaults into a references/ file, keeping SKILL.md as a lean overview with well-signaled one-level-deep links, per progressive disclosure best practice.

Consider adding a one-line note on how to load Three.js in the target environment (import map or CDN URL), since the recipe uses an ES import that requires a module setup the consuming page may not have.

Dimension	Reasoning	Score
Conciseness	The body is lean — no explanations of what WebGL or Three.js is, terse numbered rules, and compact range-based defaults. It falls short of 5 only because the trailing initWebGL3DObject() call duplicates option values already set as defaults in the function, and Material Defaults partially restates code values.	4 / 5
Actionability	Fully executable, copy-paste-ready Three.js recipe covering the common case end to end: HTML/CSS markup, renderer/scene/camera setup, geometry, PBR material, three lights, shadow plane, resize handling, reduced-motion handling, and full teardown — plus concrete range defaults for material, lighting, and motion variants.	5 / 5
Workflow Clarity	This is a single-purpose skill whose one action is unambiguous: section order (HTML/CSS → init recipe → defaults → teardown) forms a clear sequence, and the closing "Quick Checks" section is an explicit validation checklist covering form, materials, lights, camera, resize, and cleanup. No destructive or batch operations exist, so no feedback-loop cap applies.	5 / 5
Progressive Disclosure	Well-organized headers, no buried or chained references, and a coherent single-file structure. It stops short of 5 because at ~190 lines with no bundle files, the full recipe and the Material/Lighting/Motion defaults could be split into scripts/ and references/ files to keep SKILL.md as a lean overview.	4 / 5
	Total	18 / 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.

A strong description that clearly and concretely states what the skill produces and when to use it, with explicit differentiation from CSS-transform fakes. The only gap is missing common trigger synonyms such as "three.js" and "glTF" that users naturally say when requesting this kind of visual.

Dimension	Reasoning	Score
Specificity	The description enumerates multiple concrete capabilities — "physically based material", "directional and ambient lighting", "perspective camera", "subtle rotation, and floating motion" — in third-person imperative voice, giving comprehensive coverage of the skill's actions.	5 / 5
Completeness	It explicitly answers both questions: the "what" is the full capability list, and the "when" is a concrete "Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks" trigger clause.	5 / 5
Trigger Term Quality	Good natural keyword coverage ("3D", "WebGL", "hero object", "product-like visual", "real lighting", "CSS transform tricks"), but it misses common terms users would actually say, notably "three.js" (the library users name when asking for this), "glTF", and ".glb".	4 / 5
Distinctiveness Conflict Risk	It carves a clear niche (faceted hero/product 3D object with real lighting) and explicitly differentiates from adjacent approaches ("instead of CSS transform tricks"), so conflict risk with other skills is minimal.	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: MengTo/Skills
Path: agent-skills/web-design/webgl-3d-object/SKILL.md
Commit: 798db0a

Reviewed: 5 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.