Best for
- Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or a retro-futuristic hero.
Source profileQuality 75/100
nexu-io/open-design/plugins/_official/examples/webgl-neon-grid/SKILL.md
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`. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or a retro-futuristic hero. OpenDesign serves this in powered-preview mode so the GPU stack actually runs.
- Source repository stars
- 91,167
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-08-25
- Source checked
- 2026-08-25
Decision brief
What it does: where it fits
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.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/webgl-neon-grid"Safe inspection promptEditorial
Inspect the Agent Skill "webgl-neon-grid" from https://github.com/nexu-io/open-design/blob/edfa6b5f447e95cb120eae030f03baba00dc34de/plugins/_official/examples/webgl-neon-grid/SKILL.md at commit edfa6b5f447e95cb120eae030f03baba00dc34de. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Workflow
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 a…
Outrun (default): magenta→indigo sky, orange→pink banded sun, cyan/magenta grid.Vaporwave: pastel teal + pink, softer sun, wider grid spacing.Terminal: near-monochrome green grid on black for a colder, hacker read. - 02
Step 0 — Read the reference
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 a…
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 / dep… - 03
Step 1 — Choose the palette
Synthwave lives on its gradient: - Outrun (default): magenta→indigo sky, orange→pink banded sun, cyan/magenta grid. - Vaporwave: pastel teal + pink, softer sun, wider grid spacing. - Terminal: near-monochrome green grid on black for a colder, hacker read.
Outrun (default): magenta→indigo sky, orange→pink banded sun, cyan/magenta grid.Vaporwave: pastel teal + pink, softer sun, wider grid spacing.Terminal: near-monochrome green grid on black for a colder, hacker read. - 04
Step 2 — Build index.html
One file, zero external requests. Fullscreen triangle + fragment shader.
One file, zero external requests. Fullscreen triangle + fragment shader.Project the floor with a simple perspective divide; derive grid lines from abs(fract(gv) - 0.5) and a distance-scaled line width so far lines don't alias.Fade the grid into a horizon haze and add a hot horizon band; band the sun with sin(y f) cuts on its lower half.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 75/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 91,167 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- plugins/_official/examples/webgl-neon-grid/SKILL.md
- Commit
- edfa6b5f447e95cb120eae030f03baba00dc34de
- License
- Apache-2.0
- Collected
- 2026-08-25
- Default branch
- main
View the original SKILL.md
Neon Grid Skill
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.
Why this is a powered artifact
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.
Resource map
webgl-neon-grid/
├── SKILL.md ← you're reading this
└── example.html ← a working synthwave grid + sun shader (READ FIRST)
Workflow
Step 0 — Read the reference
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.
Step 1 — Choose the palette
Synthwave lives on its gradient:
- Outrun (default): magenta→indigo sky, orange→pink banded sun, cyan/magenta grid.
- Vaporwave: pastel teal + pink, softer sun, wider grid spacing.
- Terminal: near-monochrome green grid on black for a colder, hacker read.
Step 2 — Build index.html
- One file, zero external requests. Fullscreen triangle + fragment shader.
- Project the floor with a simple perspective divide; derive grid lines from
abs(fract(gv) - 0.5)and a distance-scaled line width so far lines don't alias. - Fade the grid into a horizon haze and add a hot horizon band; band the sun with
sin(y * f)cuts on its lower half. - Compile shaders with error logging so a typo fails loudly, not silently black.
Step 3 — Overlay + brand
- Map the accent colors to the active DESIGN.md when one is present; otherwise the outrun palette above, with the kicker in lime
#63fe13. - Headline ≤ 12ch plus one supporting line. Keep the horizon and sun as the hero.
Step 4 — Self-review (P0)
- Renders continuously at ~60fps; the FPS badge updates.
- Grid reads as receding perspective and scrolls smoothly toward the horizon.
- Sun bands and horizon glow are visible; far grid lines fade without aliasing.
- Resizes crisply on window resize (no stretching / blur).
- Degrades to a message (not a blank page) if
webgl2is unavailable.
Frequently asked questions
What to verify before installation and use
What does the webgl-neon-grid source document cover?
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.
How do I install webgl-neon-grid?
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/_official/examples/webgl-neon-grid". Inspect the command and pinned source before running it.
Alternatives
Compare before choosing
Computed 10024,921
alirezarezvani/claude-skills
app-store-optimization
App Store Optimization (ASO) toolkit for researching keywords, analyzing competitor rankings, generating metadata suggestions, and improving app visibility on Apple App Store and Google Play Store. Use when the user asks about ASO, app store rankings, app metadata, app titles and descriptions, app store listings, app visibility, or mobile app marketing on iOS or Android. Supports keyword research and scoring, competitor keyword analysis, metadata optimization, A/B test planning, launch checklist
Computed 9841
respira-press/agent-skills-wordpress
design-system-synthesizer
Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.
Computed 9830
MoizIbnYousaf/marketing-cli
higgsfield-generate
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
Computed 97733
rampstackco/claude-skills
email-deliverability
Make sure email actually reaches inboxes. Use this skill when setting up email authentication (SPF, DKIM, DMARC), diagnosing emails landing in spam, planning a domain reputation strategy, monitoring sender reputation, or hardening against email spoofing. Triggers on email deliverability, SPF, DKIM, DMARC, spam folder, sender reputation, mailbox provider, soft bounces, bounce rate, BIMI, MTA-STS, deliverability audit. Also triggers when a marketing or transactional email isn't reaching users.