UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
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…
Install Add Shader Cursor Trail
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nirholas/three.ws add-shader-cursor-trail --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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/add-shader-cursor-trail .claude/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.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/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .claude/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trailType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nirholas/three.ws add-shader-cursor-trail --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .agents/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail .agents/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .agents/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nirholas/three.ws add-shader-cursor-trail --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail .cursor/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .cursor/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/nirholas/three.ws.git --path third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nirholas/three.ws add-shader-cursor-trail --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail .gemini/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .gemini/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install nirholas/three.ws add-shader-cursor-trailInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .github/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail .github/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .github/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nirholas/three.ws add-shader-cursor-trail --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail .opencode/skills/add-shader-cursor-trail && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "add-shader-cursor-trail" agent skill from https://github.com/nirholas/three.ws/tree/main/third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail into .opencode/skills/add-shader-cursor-trail/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-shader-cursor-trail", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
add-shader-cursor-trail- GitHub stars
- 228
- Used in
- 1 other repo
- Token cost
- ~760 tokens
- SKILL.md length
- 310 words
- Files
- 7 (incl. scripts, references, assets)
- Skills in repo
- 92
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
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…
- Works in 8 steps: Inspect the framework, rendering mode,… → Install shaders with the existing… → Read references/implementation.md before… → …
- A user asks for this shader mouse effect
- SKILL.md covers Workflow and Validate
- Runs JavaScript scripts from its folder; calls node
What it does
Add Shader Cursor Trail is an agent skill from 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 grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain web projects.
Its SKILL.md is about 760 tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including scripts, reference files and assets (for example `agents/openai.yaml` and `references/implementation.md`).
It sits in Game Development, covering Shaders and Accessibility. It works with React, Next.js, Svelte and Vue.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
- A user asks for this shader mouse effect
- A halftone cursor trail
- An interactive WebGPU hero/contact background
- A reusable cursor-following shader layer in React
Example prompts
- “/add-shader-cursor-trail”
Requirements
- Node.js
Workflow steps
8 steps, taken from the first numbered list in SKILL.md.
- Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules, and package manager. Do not add another…
- Install shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte…
- Read references/implementation.md before implementation. Keep the six shader nodes, their order, both invisible drivers, and both ID…
- For React or Next.js, copy and adapt the files in assets/react/. Keep the lightweight capability gate separate from the heavy shader…
- Place one full-bleed, aria-hidden="true" shader layer behind the section content. Keep links and controls above it. Do not set…
- Gate loading on WebGPU, a fine hover pointer, normal motion/transparency preferences, document visibility, window focus, and section…
- Keep the original image or dark background as the complete fallback. Hide the layer for reduced motion, reduced transparency…
- Adapt only presentation variables such as opacity and blend mode. Do not change the graph to decorative noise, add WebGL/Three.js, or…
What it can do on your machine
Read from SKILL.md and the folder at commit ec8d1d2. 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
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
node
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
Add Shader Cursor Trail loads about 760 tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 134 tokens; SKILL.md has 310 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
The full file from nirholas/three.ws at commit ec8d1d2, republished under its Apache-2.0 licence (© nirholas). 310 words, ~760 tokens.
Download SKILL.mdSave it as
.claude/skills/add-shader-cursor-trail/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.- name
- add-shader-cursor-trail
- description
- 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 grain, and protected by static, touch, accessibility, SSR, and performance fallbacks. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain web projects.
Add Shader Cursor Trail
Implement the exact trail as progressive enhancement. Preserve the host section's semantic content, imagery, controls, and static first frame.
Workflow
- Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules, and package manager. Do not add another smooth-scroll engine or replace the section's content.
- Install
shaderswith the existing package manager. Import from the matching framework subpath:shaders/react,shaders/vue,shaders/svelte, orshaders/solid. - Read references/implementation.md before implementation. Keep the six shader nodes, their order, both invisible drivers, and both ID linkages exact.
- For React or Next.js, copy and adapt the files in
assets/react/. Keep the lightweight capability gate separate from the heavy shader module so ineligible visitors do not request the shader bundle. - Place one full-bleed,
aria-hidden="true"shader layer behind the section content. Keep links and controls above it. Do not setpointer-events: noneon the canvas unless cursor tracking is verified to use global events. - Gate loading on WebGPU, a fine hover pointer, normal motion/transparency preferences, document visibility, window focus, and section intersection. Unmount when the section leaves view so GPU work stops.
- Keep the original image or dark background as the complete fallback. Hide the layer for reduced motion, reduced transparency, coarse/no-hover pointers, and forced colors.
- Adapt only presentation variables such as opacity and blend mode. Do not change the graph to decorative noise, add WebGL/Three.js, or hotlink Shaders preview assets.
Validate
Run the project's lint, typecheck/tests, and production build. For React implementations, also run:
node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs \
path/to/CursorTrailShader.tsx \
path/to/CursorTrailGate.tsx \
path/to/cursor-trail.cssVerify the static section with JavaScript unavailable, keyboard access to content above the layer, touch behavior, reduced motion, unsupported WebGPU, focus/visibility cleanup, and absence of runtime requests to previews.shaders.com or data.shaders.com.
Report the chosen blend mode, fallback, capability gates, production-build result, and any browser limitation. Do not claim WebGPU visual verification unless it was actually performed in a compatible browser.
© 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 6 other files (scripts, references, assets) in third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail of nirholas/three.ws.
- SKILL.md
- agents/openai.yaml
- assets/react/CursorTrailGate.tsx
- assets/react/CursorTrailShader.tsx
- assets/react/cursor-trail.css
- references/implementation.md
- scripts/verify-cursor-trail.mjs
Open the folder on GitHubat commit ec8d1d2
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
Add Shader Cursor Trail 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Add Shader Cursor Trail this skillnirholas/three.ws | 228 | 1 repos | ~760 | Automated safety check: Pass | Apache-2.0 | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| A11y Auditalirezarezvani/claude-skills | 28k | — | ~2.4k | Automated safety check: Pass | MIT | |
| A11y Auditricneves-ai/flowgrammers-skills | 115 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Kb Framework AccessibilityCommunity-Access/accessibility-agents | 423 | — | ~1.8k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
A11y Audit
alirezarezvani/claude-skills
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases.
A11y Audit
ricneves-ai/flowgrammers-skills
Skill de auditoria de acessibilidade para escanear, corrigir e verificar a conformidade WCAG 2.2 Nível A e AA em codebases React, Next.js, Vue, Angular, Svelte e HTML puro.
Kb Framework Accessibility
Community-Access/accessibility-agents
Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
More from nirholas/three.ws
All 92 skills in this repoPublish 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…
Audit Reference Originality
nirholas/three.ws
Audit a website or digital experience against its supplied source references for originality and plagiarism risk.
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.
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…
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…
Metamask Agent Wallet
nirholas/three.ws
A skill your agent uses when the user asks anything about blockchain wallets, transactions, signing, token transfers, supported chains, wallet balances, perpetual futures trading, prediction…
Related
Categories
Questions about Add Shader Cursor Trail
What does Add Shader Cursor Trail do?
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…. 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 grain, and protected by static, touch, accessibility, SSR, and performance fallbacks.
When should I use Add Shader Cursor Trail?
Add Shader Cursor Trail fits situations like: A user asks for this shader mouse effect; A halftone cursor trail; an interactive WebGPU hero/contact background; A reusable cursor-following shader layer in React.
How do I install Add Shader Cursor Trail in Claude Code?
Run `npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail in nirholas/three.ws) into .claude/skills/add-shader-cursor-trail in your project. Claude Code loads it when a task matches its description.
How do I install Add Shader Cursor Trail in Codex?
Run `npx skills add nirholas/three.ws --skill add-shader-cursor-trail -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/add-shader-cursor-trail in nirholas/three.ws) into .agents/skills/add-shader-cursor-trail in your project. Codex loads it when a task matches its description.
Can I use Add Shader Cursor Trail 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 add-shader-cursor-trail -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-shader-cursor-trail, .gemini/skills/add-shader-cursor-trail, .github/skills/add-shader-cursor-trail and .opencode/skills/add-shader-cursor-trail in your project.
What does Add Shader Cursor Trail need to run?
Going by SKILL.md and its folder, Add Shader Cursor Trail needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.
Does Add Shader Cursor Trail 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 Add Shader Cursor Trail 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Add Shader Cursor Trail use?
Add Shader Cursor Trail 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 Add Shader Cursor Trail use?
About 760 tokens (SKILL.md is roughly 3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.
What are the alternatives to Add Shader Cursor Trail?
Skills that share tags, products or a category with Add Shader Cursor Trail: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), A11y Audit (alirezarezvani/claude-skills, 28k stars), A11y Audit (ricneves-ai/flowgrammers-skills, 115 stars) and Kb Framework Accessibility (Community-Access/accessibility-agents, 423 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Add Shader Cursor Trail?
nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 228 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 9, 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.