bright-green-tech-system-webgl — Claude Code skill

---
name: bright-green-tech-system-webgl
description: "Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone."
---

# Bright Green Tech System WebGL Skill

## Use When
- Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

## Workflow

## Scope
- Apply this as a full design-system direction across layout, framing, typography, controls, metadata, and the embedded WebGL visualization region.
- Use it when the interface should feel sharply technical, experimental, and structured, with a bright green signal color and a visible real-time visual engine.
- This is not generic dark SaaS and not soft glassmorphism. It should feel like an active synthesis console or build-system interface.

## Visual target
- Build the page on a deep charcoal or near-black base with highly visible structure lines, container borders, corner brackets, and internal dividers.
- Use a bright lime, acid green, or signal-green accent as the dominant active color for indicators, progress states, focus details, highlights, and important labels.
- Keep the green vivid and intentional, but limit its usage to signals, focal typography, accent fills, and WebGL highlights rather than flooding every surface.
- Establish a split composition where one side carries content, metadata, and instructions while the other side hosts a WebGL or Three.js visualization zone.
- The WebGL region should feel integrated into the system, not decorative: it should read like a powered instrument panel, synthesized globe, particle engine, or live geometry viewport.

## Implementation guidance
- Prefer a strong outer container shell with thin strokes, subtle backdrop blur, visible corner brackets, and a central divider or explicit split between text and visualization.
- Use clean sans-serif typography for main content and mono utility text for labels, status readouts, process steps, percentages, and system metadata.
- Introduce small framed modules, tips panels, progress rails, or status blocks with precise spacing and clear border hierarchy.
- Use masked staggered reveals, fade-up blocks, or controlled sequencing so the layout feels alive but disciplined.
- Treat the WebGL panel as a core component: use real canvas or Three.js rendering when possible, with luminous particles, synthetic geometry, or orbital forms tinted by the bright green accent.
- Keep the visualization atmospheric and premium: additive glow, subtle fog, gentle camera motion, and calm mouse response are good; chaotic motion and noisy overload are not.

## Recommended patterns
- Split-screen hero with content and system prompts on the left, immersive WebGL viewport on the right.
- Hard-edged framed container with outer border, inset dividers, and small bracket marks on the corners.
- Mono process navigation using numbered stages, system tags, or compilation steps with one active green state.
- Progress bars, tiny live dots, and status summaries that use bright green as the active operational color.
- WebGL scenes built from luminous particles, planetary structures, node fields, or geometric motion that echo the interface accent color.

## Tuning knobs
- Green brightness: keep it vivid and high-energy, but balance it against dark neutrals so the page stays premium.
- Structural density: increase or reduce guides, brackets, dividers, and framed boxes depending on how instrumented the system should feel.
- WebGL prominence: choose whether the visualization is a dominant half-screen feature or a more contained technical panel.
- Motion intensity: keep motion smooth and intentional; tune reveal timing, particle speed, and hover response so the system feels alive without becoming frantic.
- Background texture: use faint diagonal or grid texture to enrich the shell, but keep it secondary to the core structure.

## Avoid
- Generic green-on-black hacker aesthetics with no layout discipline.
- Oversaturating the whole UI with bright green until the interface loses hierarchy.
- Treating WebGL as a random hero decoration disconnected from the design system.
- Soft rounded consumer-app styling that fights the sharp framed technical shell.
- Excessively noisy particles, fast motion, or too many glowing layers that reduce legibility.