Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/webgl-neon-grid
A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained `index.html`.
Passed 15 of 22 test cases with the skill, and 15 of 22 without it.
and 1 more in the full report
4 fixed11 passed either way3 still failing4 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
When creating a full-screen fragment shader canvas in WebGL for procedural background effects, standard tutorials usually set up a 2D rectangle composed of 2 triangles (6 vertices). Write the setup code for rendering a full-screen quad background.
| Checked | Without skill | With skill |
|---|---|---|
| The vertex setup uses a single full-screen oversized triangle (3 vertices) covering clip space instead of a 6-vertex quad. | Missed | Passed |
The instructions your model reads when the skill loads.
Produce a single self-contained index.html that renders a real-time synthwave scene full-screen — a perspective floor grid, a banded retro sun, and a starfield — with a clean typographic overlay on top.
OpenDesign detects getContext('webgl2') and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin. The full GPU pipeline is available; you do not need to work around the opaque sandbox.
webgl-neon-grid/
├── SKILL.md ← you're reading this
└── example.html ← a working synthwave grid + sun shader (READ FIRST)
Read example.html end to end. Note the shape: a horizon split; above the horizon a sky gradient, a circular sun cut by horizontal scanline bands, and hashed stars; below the horizon a perspective floor grid (z = k / depth, x = uv.x * z) that scrolls with time, its lines thinning and fading with distance. Everything is analytic — no raymarch needed.
Synthwave lives on its gradient:
index.htmlabs(fract(gv) - 0.5) and a distance-scaled line width so far lines don't alias.sin(y * f) cuts on its lower half.#63fe13.test cases passed, vs 15 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.