[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fguide\u002Fagent-skill":129},{"stars":4},5503,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":78,"body":131,"category":71,"description":79,"extension":366,"icon":367,"meta":368,"navigation":369,"path":77,"seo":370,"stem":371,"__hash__":372},"guide\u002Fdocs\u002Fguide\u002F17.agent-skill.md",{"type":132,"value":133,"toc":360},"minimark",[134,138,141,153,158,164,189,192,206,236,245,263,267,270,328,335,339,356],[135,136,78],"h1",{"id":137},"agent-skill",[139,140,79],"p",{},[139,142,143,144,148,149,152],{},"A ",[145,146,147],"strong",{},"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 ",[10,150,151],{},".agents\u002Fskills"," convention.",[154,155,157],"h2",{"id":156},"installing-the-skill","Installing the skill",[139,159,160,163],{},[10,161,162],{},"connect"," adds the skill while it sets up your project:",[165,166,171],"pre",{"className":167,"code":168,"language":169,"meta":170,"style":170},"language-bash shiki shiki-themes github-dark","npx shaders connect\n","bash","",[10,172,173],{"__ignoreMap":170},[174,175,178,182,186],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"svObZ","npx",[174,183,185],{"class":184},"sU2Wk"," shaders",[174,187,188],{"class":184}," connect\n",[139,190,191],{},"To add the skill on its own, or to a project that's already connected, run:",[165,193,195],{"className":167,"code":194,"language":169,"meta":170,"style":170},"npx shaders skill\n",[10,196,197],{"__ignoreMap":170},[174,198,199,201,203],{"class":176,"line":177},[174,200,181],{"class":180},[174,202,185],{"class":184},[174,204,205],{"class":184}," skill\n",[139,207,208,209,216,217,220,221,224,225,228,229,231,232,235],{},"Both go through the ",[210,211,215],"a",{"href":212,"rel":213},"https:\u002F\u002Fskills.sh",[214],"nofollow","skills CLI",", which detects the agents in your project and places the skill where each one reads it. Pass ",[10,218,219],{},"-a cursor"," to pick an agent, ",[10,222,223],{},"-g"," to install it for every project on your machine, or ",[10,226,227],{},"--no-skill"," to ",[10,230,162],{}," to skip it. ",[10,233,234],{},"npx skills update"," refreshes it later.",[139,237,238,239,244],{},"The skill is open source, in the ",[210,240,243],{"href":241,"rel":242},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Ftree\u002Fmain\u002Fskills\u002Fshaders",[214],"public repository",". You can also install it with the skills CLI directly:",[165,246,248],{"className":167,"code":247,"language":169,"meta":170,"style":170},"npx skills add shader-effects-inc\u002Fshaders\n",[10,249,250],{"__ignoreMap":170},[174,251,252,254,257,260],{"class":176,"line":177},[174,253,181],{"class":180},[174,255,256],{"class":184}," skills",[174,258,259],{"class":184}," add",[174,261,262],{"class":184}," shader-effects-inc\u002Fshaders\n",[154,264,266],{"id":265},"what-the-agent-can-do-with-it","What the agent can do with it",[139,268,269],{},"Once the skill is in place, ask for effects in plain language. The agent knows how to:",[271,272,273,288,294,300,306,315],"ul",{},[274,275,276,279,280,283,284,287],"li",{},[145,277,278],{},"Set up a project"," with ",[10,281,282],{},"npx shaders connect",", and install the shaders you save in the design editor with ",[10,285,286],{},"npx shaders install",".",[274,289,290,293],{},[145,291,292],{},"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.",[274,295,296,299],{},[145,297,298],{},"Drive props"," from the cursor, a timer, or another layer with dynamic props, and bind them to your framework's state.",[274,301,302,305],{},[145,303,304],{},"Look up exact props"," by fetching a component's docs page as Markdown, so defaults and ranges come from the source.",[274,307,308,279,311,314],{},[145,309,310],{},"Search the shader library",[10,312,313],{},"npx shaders search"," when an effect takes more than a couple of components, and install a match with the CLI. Installing library shaders requires Shaders Pro.",[274,316,317,279,320,323,324,327],{},[145,318,319],{},"Write a new component",[10,321,322],{},"defineShader"," when nothing in the library fits, following the ",[210,325,326],{"href":60},"custom components"," guide.",[139,329,330,331,334],{},"The skill is reference material, not an account connection. For an agent that can search your projects and the shader library directly, add the ",[210,332,333],{"href":68},"MCP server"," as well.",[154,336,338],{"id":337},"next-steps","Next steps",[271,340,341,346,351],{},[274,342,343,345],{},[210,344,74],{"href":73},": every command the skill relies on.",[274,347,348,350],{},[210,349,69],{"href":68},": tools for searching the shader library and reading your saved shaders.",[274,352,353,355],{},[210,354,17],{"href":16},": the layer model the skill teaches.",[357,358,359],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":170,"searchDepth":361,"depth":361,"links":362},2,[363,364,365],{"id":156,"depth":361,"text":157},{"id":265,"depth":361,"text":266},{"id":337,"depth":361,"text":338},"md","wand-magic-sparkles",{},true,{"title":78,"description":79},"docs\u002Fguide\u002F17.agent-skill","7aTg9WOgca_-B99N8LKJmHRkEzz1Zq4YZffBR8n2Ccg"]