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
- 92,321
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-08-28
- Source checked
- 2026-08-28
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/a554d017c8fa12d8913354ba6cf792d26d0c3b54/plugins/_official/examples/webgl-neon-grid/SKILL.md at commit a554d017c8fa12d8913354ba6cf792d26d0c3b54. 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 | 92,321 | 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
- a554d017c8fa12d8913354ba6cf792d26d0c3b54
- License
- Apache-2.0
- Collected
- 2026-08-28
- 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 10025,136
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 10077
hyperfx-ai/marketing-skills
cold-email-outreach
Run end-to-end B2B cold-email outreach through the Hyper MCP — enrich prospects with Apollo, scrape per-prospect signals from company sites and LinkedIn, draft personalized emails using proven hook frameworks, send via Gmail with safe defaults, and route replies into labeled folders. Use when the user wants to write cold emails, run an outbound sequence, prospect a list, build a follow-up cadence, "reach out to leads," or asks why nobody is replying to their cold emails.
Computed 98603
nexscope-ai/Amazon-Skills
amazon-listing-optimization
Amazon listing builder and optimizer for sellers. Two modes: (A) Create — build keyword-optimized listings from scratch using keyword lists + product characteristics + AI copywriting, (B) Optimize — audit existing listings, find keyword gaps, score across 8 dimensions, and rewrite with missing keywords. Integrates with amazon-keyword-research for keyword input. Works on 12 Amazon marketplaces. No API key required. Use when: (1) creating a new Amazon listing from keywords, (2) auditing an existin
Computed 9842
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.