New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Webgl Landing Steering

by nirholas in nirholas/three.ws

A skill your agent uses when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion…

Apache-2.0Auto-check passedGame Development

Install Webgl Landing Steering

skills CLI
$ npx skills add nirholas/three.ws --skill webgl-landing-steering -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nirholas/three.ws webgl-landing-steering --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/webgl-landing-steering .claude/skills/webgl-landing-steering && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
webgl-landing-steering
GitHub stars
227
Used in
1 other repo
Token cost
~1.3k tokens
SKILL.md length
636 words
Files
5
Skills in repo
92
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion…

  • Works in 7 steps: Define the page intent → Choose the WebGL lane → Steering matrix by landing page type → …
  • Refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium
  • SKILL.md covers Use this skill to steer outcomes and Output format when applying…
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Webgl Landing Steering is an agent skill from nirholas/three.ws. Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files (for example `REFERENCES.md` and `demo/PROMPT.md`).

It sits in Game Development, covering 3D graphics and WebGL and Landing pages. It works with Three.js. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

  • Refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium
  • Cinematic) while balancing conversion clarity
  • Implementation complexity

Example prompts

  • “/webgl-landing-steering”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Define the page intent
  2. Choose the WebGL lane
  3. Steering matrix by landing page type
  4. Quality gates before shipping
  5. Implementation strategy by risk
  6. Prompting template for Codex-style execution
  7. Common failure patterns and corrections

What it can do on your machine

Read from SKILL.md and the folder at commit ddf6e49. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Webgl Landing Steering loads about 1.3k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 636 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~64
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nirholas/three.ws at commit ddf6e49, republished under its Apache-2.0 licence (© nirholas). 636 words, ~1,290 tokens.

Download SKILL.mdSave it as .claude/skills/webgl-landing-steering/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.
name
webgl-landing-steering
description
Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

WebGL Landing Steering Skill

Use this skill to steer outcomes

Map landing-page goal to WebGL direction before writing code.

1) Define the page intent

Identify the primary conversion and brand signal:

  • Premium / luxury / minimal confidence
  • Technical / infrastructure / data authority
  • Playful / consumer / social energy
  • Cinematic / launch / storytelling impact

Also capture:

  • Device mix (desktop-heavy vs mobile-heavy)
  • Motion tolerance (prefers-reduced-motion policy)
  • Production constraints (deadline, team skill, maintenance budget)
2) Choose the WebGL lane

Pick one dominant lane; avoid mixing 3-4 heavy effects in the hero.

Lane A: Subtle depth field (high conversion safety)

Use for: SaaS, productivity, B2B tools where readability wins.

  • Visuals: soft gradient meshes, slow parallax planes, light bloom
  • Motion: low amplitude, always secondary to copy
  • Stack: Three.js plane shaders or lightweight shader canvas
  • Rule: hero text contrast and CTA prominence first
Lane B: Data/particle intelligence (technical credibility)

Use for: AI, infra, analytics, developer products.

  • Visuals: particle flows, node networks, vector fields, wireframes
  • Motion: purposeful directional flow toward CTA area
  • Stack: Three.js + custom shader/points, optionally GPGPU for dense fields
  • Rule: communicate "system behavior," not random sparkles
Lane C: Object-centric 3D product moment (feature clarity)

Use for: hardware, apps with strong product visuals, launches.

  • Visuals: central GLTF model, controlled camera orbit, material highlights
  • Motion: interaction-driven or timeline-based reveal
  • Stack: Three.js + GLTF/DRACO/KTX2 pipeline
  • Rule: one hero object, short loop, fast first meaningful paint fallback
Lane D: Immersive cinematic scene (brand campaign)

Use for: campaign pages where wow factor is the main KPI.

  • Visuals: volumetrics, heavy postprocessing, dense scene composition
  • Motion: choreographed sequence with scroll chapters
  • Stack: Three.js + postprocessing + optional GSAP ScrollTrigger
  • Rule: provide a static/mobile fallback and strict performance gates
3) Steering matrix by landing page type
  • Waitlist / pre-launch: Lane A or B. Keep copy legible and quick to load.
  • Product feature page: Lane A or C. Demonstrate product truth, not abstract noise.
  • Pricing / high-intent page: Mostly Lane A. Keep WebGL decorative only.
  • Enterprise trust page: Lane B with restrained palette and low noise.
  • Consumer app growth page: Lane B with playful palette, but cap CPU/GPU load.
  • Campaign microsite: Lane C or D with explicit fallback for lower-end devices.
Show full SKILL.md (290 more words)Show less
4) Quality gates before shipping

Pass these gates before adding more visual complexity:

  1. Message gate:
  • Hero headline + CTA readable in under 3 seconds.
  • WebGL never blocks understanding of offer.
  1. Performance gate:
  • Cap pixel ratio: Math.min(devicePixelRatio, 1.5-2).
  • Target stable frame time on common mobile devices.
  • Lazy-load heavy assets; show immediate non-WebGL poster/fallback.
  1. Accessibility gate:
  • Respect prefers-reduced-motion (still frame or low-motion mode).
  • Maintain color contrast over animated backgrounds.
  1. Reliability gate:
  • Handle context loss and resize.
  • Dispose geometries/materials/textures in SPA route changes.
5) Implementation strategy by risk
  • Low risk (fastest): CSS + canvas illusion, minimal shaders
  • Medium risk: Three.js scene with 1-2 meshes, lightweight post FX
  • High risk: multi-pass shaders, dense particles, advanced postprocessing

Default to low/medium risk for conversion pages unless user explicitly asks for campaign-grade immersion.

6) Prompting template for Codex-style execution

Use this prompt pattern when asked to build a WebGL landing hero:

"Build a [lane] WebGL hero for a [page type] with [brand adjectives]. Primary goal: [conversion]. Constraints: [device mix], [performance budget], [reduced motion policy]. Implement fallback first, then enhance with WebGL. Keep hero copy clarity as priority over visual complexity."

7) Common failure patterns and corrections
  • Failure: "Looks cool but conversion dropped."
    • Fix: reduce motion amplitude, darken/soften background, raise CTA contrast.
  • Failure: "Mobile stutters."
    • Fix: reduce particle count, lower DPR cap, remove expensive postprocessing.
  • Failure: "Visual style feels generic."
    • Fix: pick one signature motif aligned to brand (grid, wave, orbit, shards).
  • Failure: "Team cannot maintain shader complexity."
    • Fix: simplify to modular Three.js scene with documented parameters.

Output format when applying this skill

Return:

  1. Recommended lane and why
  2. Visual spec (palette, motion behavior, composition)
  3. Technical stack and complexity tier
  4. Fallback behavior
  5. Performance + accessibility checklist
  6. Build order (MVP first, enhancement second)

© nirholas, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 4 other files in third_party/designcode-agent-skills/agent-skills/web-design/webgl-landing-steering of nirholas/three.ws.

  • SKILL.md
  • REFERENCES.md
  • demo/PROMPT.md
  • demo/index.html
  • demo/preview.jpg

Open the folder on GitHubat commit ddf6e49

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Webgl Landing Steering next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Webgl Landing Steering compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Webgl Landing Steering this skillnirholas/three.ws2271 repos~1.3kAutomated safety check: PassApache-2.0
Motion Webfeitangyuan/motion-web668—~18kAutomated safety check: PassCC-BY-NC-4.0
Inspira UIsecondsky/claude-skills227—~2.6kAutomated safety check: PassMIT
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Polycsslayoutit/polycss759—~2.4kAutomated safety check: PassMIT
Deploycyanfish-x/tellux207—~1.1kAutomated safety check: NotesMIT

Similar skills

  • Motion Web

    feitangyuan/motion-web

    Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

    668 GitHub stars~18k tokensUpdated 23 days ago
    Game DevelopmentAuto-check passed

  • Inspira UI

    secondsky/claude-skills

    120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.

    227 GitHub stars~2.6k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Polycss

    layoutit/polycss

    Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.

    759 GitHub stars~2.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • Deploy

    cyanfish-x/tellux

    Deploy tellux examples/docs sites via project scripts — one local command (pnpm run deploy) rclone-syncs to the self-hosted site then Wrangler Direct Uploads to Cloudflare Pages.

    207 GitHub stars~1.1k tokensUpdated 17 days ago
    Game DevelopmentAuto-check: notes

  • Animations

    software-mansion-labs/skills

    Production animation patterns for React Native using Reanimated 4, Skia, WebGPU, and TypeGPU.

    291 GitHub stars~1.1k tokensUpdated 10 days ago
    Game DevelopmentAuto-check passed

More from nirholas/three.ws

All 92 skills in this repo

  • Add Shader Cursor Trail

    nirholas/three.ws

    Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

    227 GitHub starsUsed in 1 repo~760 tokens
    Auto-check passed

  • Publish Project To GitHub

    nirholas/three.ws

    Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…

    227 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check: notes

  • Audit Reference Originality

    nirholas/three.ws

    Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

    227 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Build Daily Inspiration Sites

    nirholas/three.ws

    Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

    227 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Write Like Meng On X

    nirholas/three.ws

    Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…

    227 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Browser Video Recording

    nirholas/three.ws

    Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…

    227 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

Works with

Categories

Questions about Webgl Landing Steering

What does Webgl Landing Steering do?

A skill your agent uses when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion…. ws. Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.

When should I use Webgl Landing Steering?

Webgl Landing Steering fits situations like: refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium; cinematic) while balancing conversion clarity; implementation complexity.

How do I install Webgl Landing Steering in Claude Code?

Run `npx skills add nirholas/three.ws --skill webgl-landing-steering -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/webgl-landing-steering in nirholas/three.ws) into .claude/skills/webgl-landing-steering in your project. Claude Code loads it when a task matches its description.

How do I install Webgl Landing Steering in Codex?

Run `npx skills add nirholas/three.ws --skill webgl-landing-steering -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/webgl-landing-steering in nirholas/three.ws) into .agents/skills/webgl-landing-steering in your project. Codex loads it when a task matches its description.

Can I use Webgl Landing Steering in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nirholas/three.ws --skill webgl-landing-steering -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/webgl-landing-steering, .gemini/skills/webgl-landing-steering, .github/skills/webgl-landing-steering and .opencode/skills/webgl-landing-steering in your project.

What does Webgl Landing Steering need to run?

SKILL.md names no scripts, command-line tools or credentials: Webgl Landing Steering is instructions for the agent only.

Does Webgl Landing Steering access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Webgl Landing Steering safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Webgl Landing Steering use?

Webgl Landing Steering is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Webgl Landing Steering use?

About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Webgl Landing Steering?

Skills that share tags, products or a category with Webgl Landing Steering: Motion Web (feitangyuan/motion-web, 668 stars), Inspira UI (secondsky/claude-skills, 227 stars), Auteur (agiwhitelist/auteur, 1k stars) and Polycss (layoutit/polycss, 759 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Webgl Landing Steering?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 227 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 8, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.