webgl-experience

A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.

Quality

81%

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

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.

The body is well-organized, concise, and has a clearly sequenced workflow with a validation checklist, but it provides no executable code and leans heavily on an example.html reference that is missing from the bundle, which hurts both actionability and progressive disclosure.

Suggestions

Bundle the referenced example.html (or inline a minimal executable skeleton — canvas setup, shader compile with getShaderInfoLog, and a requestAnimationFrame draw loop — in Step 2) so the skill's core implementation does not depend on a missing file.

Add an explicit fix-and-retry feedback loop to Step 4 (e.g., 'if getError() is non-zero or FPS drops, inspect getShaderInfoLog, fix the shader, and re-verify') instead of a one-pass checklist.

Trim the opening line that restates the description and tighten the 'Why this is a powered artifact' section to keep the body lean and lift conciseness toward a 5.

Dimension	Reasoning	Score
Conciseness	The ~40-line body is efficient and assumes Claude knows WebGL/shaders, but the opening line partly restates the description and the 'Why this is a powered artifact' section is slightly explanatory, so it sits at the 4 anchor ('efficient; minor instances of over-explanation that could be trimmed') rather than a clean 5.	4 / 5
Actionability	Gives concrete constraints ('alpha:false', 'DPR clamped to 2', 'getShaderInfoLog') and a technique menu, but ships no executable code — all implementation is deferred to example.html, which is absent from the bundle — leaving key details missing, matching the 3 anchor ('some concrete guidance but incomplete; missing key details').	3 / 5
Workflow Clarity	Steps 0–4 are clearly sequenced and Step 4 is an explicit P0 validation checklist, but there is no validate→fix→retry feedback loop described, so it fits the 4 anchor ('clear sequence with most checkpoints present; minor validation gaps') rather than the 5 anchor that requires explicit feedback loops.	4 / 5
Progressive Disclosure	Good section structure and a resource map with a clearly signaled one-level-deep reference ('READ FIRST'), but the referenced example.html is not present in the bundle, so the well-signaled navigation leads nowhere — a real disclosure gap that pulls it below the 4 anchor's 'minor organization gaps'.	3 / 5
	Total	14 / 20 Passed

Description

100%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 excellent: it explicitly states both what the skill produces and when to use it, with comprehensive natural trigger terms and a distinctive GPU/WebGL niche that minimizes conflict risk.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete capabilities — 'animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay' plus a 'single self-contained index.html' — giving comprehensive coverage of the WebGL domain, matching the 5 anchor's 'multiple specific concrete actions'.	5 / 5
Completeness	Explicitly answers both what ('A full-screen, real-time WebGL/WebGL2 experience…') and when ('Use when the brief asks for a WebGL, shader…') with concrete trigger phrases, directly matching the 5 anchor.	5 / 5
Trigger Term Quality	Provides eight natural trigger phrases users would actually say — 'WebGL', 'shader', '3D', 'generative', 'GPU', 'interactive canvas', 'hero animation', 'real-time visual' — with strong synonym coverage, fitting the 5 anchor better than the 'a few natural terms missing' 4 anchor.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (real-time GPU/WebGL rendering) with highly distinctive triggers — 'webgl', 'shader', 'gpu', 'raymarch', 'particle field' — that are unlikely to fire for unrelated skills, so the 5 anchor ('clear niche with distinct triggers; minimal conflict risk') is the best fit.	5 / 5
	Total	20 / 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
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/webgl-experience/SKILL.md
Commit: d4138ea

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.