Skip to content
Get packs

Bright Green Tech WebGL Design

Gives the agent a sharp, technical dark-and-neon-green design style with a live WebGL visual panel.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent builds web pages in a specific visual style: near-black backgrounds, thin structural borders and corner brackets, monospace labels and status readouts, and a bright lime-green accent used for key signals. Pages are laid out as a split screen, with text and instructions on one side and an animated WebGL or Three.js visualization (such as glowing particles or a rotating globe) on the other. The skill is a style guide written as instructions; it does not add any tools of its own.

Great for

  • Front-end developers who want a bold, instrument-panel style landing page
  • Designers exploring a technical, experimental visual direction
  • Anyone prototyping a tech product page that needs a 3D or particle hero

Skip it if

  • Projects needing a soft, rounded, consumer-app look, since the skill explicitly avoids that style
  • Production sites that must stay accessible and lightweight, because heavy glow effects and animation can reduce legibility and performance unless carefully tuned

Try asking

  • “Build a landing page for my AI startup in the bright green technical style with a WebGL particle globe on the right”
  • “Create a dashboard hero section with split layout, mono status labels and a live 3D visualization”
  • “Design a product launch page using the bright-green tech system with corner brackets and framed panels”
Step-by-step guide: how to use Bright Green Tech WebGL DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    bright-green-tech-system-webgl.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip bright-green-tech-system-webgl.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip bright-green-tech-system-webgl.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Specify the content and product so the agent can fill the left-side panel with real copy rather than placeholders.
  • Ask for a reduced-motion or lower-glow variant if the page must stay readable and fast.
  • Open the included demo/index.html to preview the intended look before generating your own page.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.