Agent skill

Give your coding agent a skill that teaches it to build with Shaders components, the CLI and presets.

A skill is a Markdown file your agent reads when a task matches it. The Shaders skill covers the component library, how layers compose, the CLI workflow and where the exact prop reference lives, so the agent writes working effects instead of guessing at prop names. It works with Claude Code, Cursor, Codex, Copilot, Windsurf, Gemini CLI and any other agent that reads the .agents/skills convention.

Installing the skill

connect adds the skill while it sets up your project:

npx shaders connect

To add the skill on its own, or to a project that's already connected, run:

npx shaders skill

Both go through the skills CLI, which detects the agents in your project and places the skill where each one reads it. Pass -a cursor to pick an agent, -g to install it for every project on your machine, or --no-skill to connect to skip it. npx skills update refreshes it later.

The skill is open source, in the public repository. You can also install it with the skills CLI directly:

npx skills add shader-effects-inc/shaders

What the agent can do with it

Once the skill is in place, ask for effects in plain language. The agent knows how to:

  • Set up a project with npx shaders connect, and install the shaders you save in the design editor with npx shaders install.
  • Compose effects by hand from the 200+ components: which ones draw on their own, which ones apply to the layers before them, how blend modes, masks and bounding boxes work in each framework.
  • Drive props from the cursor, a timer, or another layer with dynamic props, and bind them to your framework's state.
  • Look up exact props by fetching a component's docs page as Markdown, so defaults and ranges come from the source.
  • Search the preset library with npx shaders search when an effect takes more than a couple of components, and install a match with the CLI. Installing presets requires Shaders Pro.
  • Write a new component with defineShader when nothing in the library fits, following the custom components guide.

The skill is reference material, not an account connection. For an agent that can search your projects and the preset library directly, add the MCP server as well.

Next steps