Shaders skill
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
- 5,354 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The connect command installs a package through the project's package manager and writes a config and component files, and the skill install runs `npx skills@latest`
- Sign-in to a shaders.com account and a remote MCP server: preset search queries and project data go to their server
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/shadersDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The connect command installs a package through the project's package manager and writes a config and component files, and the skill install runs `npx skills@latest`
- Sign-in to a shaders.com account and a remote MCP server: preset search queries and project data go to their server
This is third-party code. Review the repository files before installing.
What it does
Shaders is a library of 200 WebGPU effects shaped as components: inside `<Shader>` sit layers that are drawn bottom to top and blended on the GPU. The skill `skills/shaders/SKILL.md` explains to the agent how to work with it. It teaches composing an effect by hand from components, and when those are not enough, searching for a ready preset with `npx shaders search` and showing it with `npx shaders preview`. The skill's first step is to run `npx shaders connect` in the project. The command detects the framework, installs the `shaders` package, writes `shaders.config.ts`, opens the browser for sign-in and links the code to a project in the online editor. After that `npx shaders install` writes one component file with the full tree and prop values, and `npx shaders update` pulls in what you changed in the editor. Installed items are recorded in `shaders.lock.json`. The skill covers the rules for layers and masks, dynamic props bound to the cursor or an animation, four ready recipes (a hero background, glass over a logo, a blurred image behind text, a masked reveal) and speed tips. A separate `components.md` lists the components by category: textures, shapes, blurs, distortions, stylize, transitions. The MCP server comes from `npx shaders@latest install-mcp`: it searches presets, reads a shader's props and turns an SVG into an SDF file.
Who it is for. For front-end developers and design engineers who ask Claude Code, Cursor or Codex for an animated background, glass or a cursor effect in React, Vue, Svelte, Solid or plain JavaScript.
Good fit when
- You need an animated hero background: a mesh gradient, noise and a cursor trail as one stack of layers
- A designer drew an effect in the shaders.com editor and it has to land in the project as a component file
- You want glass, neon or liquid metal over a logo, with the shape taken from your own SVG
- The agent keeps reaching for `three` or raw WebGL for an effect the library already has as a component
- You need a transition between screens or blocks with a dissolve, blinds or bars
Not a fit when
- You need a full 3D scene with models and lighting: Three.js skills such as cloudai-x/threejs-skills cover that
- Your audience's browsers lack WebGPU: the library requires it and does not render on the server
- You need ordinary interface animations, scrolling and timelines: the GSAP skill from greensock/gsap-skills handles that
- You want the agent to install paid presets and site sections without a subscription: without Pro the CLI offers only a watermarked version
Example request
Build a WebGPU hero background: a dark purple mesh gradient, light grain and a glowing cursor trailLimitations
- The library needs a browser with WebGPU. Server rendering is not supported: in Next.js and other meta-frameworks `<Shader>` stays on the client, and in SvelteKit it draws nothing on the server.
- More than a thousand presets and more than 55 ready site sections open with a Pro subscription. Without it `npx shaders install preset-name` offers a watermarked version, while search and preview are free. The skill expressly forbids the agent from working around this limit.
- Sign-in and project linking go through the browser. In an environment without one, such as CI, you need a personal key in `SHADERS_API_KEY`, and the `--no-auth` flag skips sign-in.
- A bare `npx shaders` opens an interactive menu meant for people, so the agent must call explicit subcommands. The editor, presets and platform at shaders.com have separate terms, while the package and component code are under the MIT license.
- The author calls custom components built from `shaders/std` primitives experimental, and only the WGSL variant counts as stable.
How to disable. Delete the `shaders` folder from the agent's skills directory where `npx skills add` put it, and remove the `shaders` entry from the MCP config (the `npx shaders uninstall-mcp` command does that). The package itself is removed with your package manager, and the component files in `outDir` plus `shaders.lock.json` are deleted by hand.
FAQ
How do I build a WebGPU background for a React site?
Install the package with `npm install shaders` and build a tree of `<Shader>` with nested layers, for example `LinearGradient` and `CursorTrail` from `shaders/react`. The canvas size is set with styles on `<Shader>` itself, not on the inner canvas. An agent with the skill takes the "Hero background" recipe and substitutes your colors.
How is an effect different from a generator layer in Shaders?
Generators, such as gradients and noise, draw an image on their own. Effects like `Blur`, `Vignette` or `Glass` change what was drawn before them, so they are placed as siblings in a flat stack. Nesting is needed only when an effect must touch specific layers: it adds a render pass for every level.
How do I install the Shaders skill for Claude Code or Cursor?
Run `npx shaders skill` or `npx skills add shader-effects-inc/shaders`. The `npx shaders connect` command installs it together with the rest of the project setup. The skill updates with `npx skills update`.
Why does the agent not install a preset and ask for Pro?
Presets and site sections from the library are paid. Without a subscription the CLI offers to open the pricing page, sign in with another account or install a watermarked component. After you get Pro, `npx shaders update` swaps it for the real one.
How do I turn my own SVG into a shape for glass or neon?
The MCP server has a `generate-sdf` tool for this: it makes an SDF file from an SVG, which goes into the `shape` prop of a shape effect. Without MCP you can use ready shapes such as `circleSDF` and `roundedRectSDF` or 3D solids like `sphere3D` and `torus3D`.
Discussion
No questions or reviews yet.
Related
SkillsA skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
shadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Shaders (this entry) | yes | 5,354 | |
| Three.js Skills | no | 3,685 | reference skills for Three.js: a 3D scene, materials, lighting and post-processing |
| WebGPU Three.js TSL Skill | no | 1,256 | WebGPU apps on Three.js with TSL shaders and compute shaders |
| GSAP AI Skills | no | 16,942 | GreenSock's official skills for interface animation: tweens, timelines, ScrollTrigger |
README in short
The repository is a pnpm monorepo: the engine core, bindings for React, Vue, Svelte, Solid and JavaScript, the main `shaders` package with the CLI and a `skills` folder with the skill. The front page covers installation, setup examples for each framework, the visual editor with code export and the CLI. A separate section is about working with AI: the skill, the MCP server and the `llms.txt` files. There are engine tests, contributor rules and a guide to writing your own component with `defineShader`.
README badge
Original SKILL.md
--- name: shaders description: Build WebGPU visual effects with the Shaders component library (npm `shaders`) in React, Vue, Svelte, Solid or vanilla JS. Use when a user asks for a shader, animated background, gradient, aurora, blur, glass, distortion, noise, particles, glow, transition, cursor effect, or any GPU-rendered visual on a web page, or mentions shaders.com, the Shaders CLI, presets, or the design editor. --- # Shaders Shaders is a WebGPU component library. One package, `shaders`, with components that compose like layers in Figma. Everything below is free and MIT licensed. Pro, where it applies, is marked. ## Setting up a project Run the CLI inside the user's project before writing any shader code: ```bash npx shaders connect ```