shaders
WebGPU component library supporting React, Vue, Svelte, Solid, and JavaScript.
- Type
- MCP
- Transport
- http
- Open source
- Yes
- GitHub Stars
- ★ 3.7k
- Source
- mcp-github
- Repository
- github.com/shader-effects-inc/shaders
Overview
Shaders is a WebGPU component library offering over 200 effect components such as gradients, noise, glass, metal, light rays, distortion, transitions, blur, and cursor effects. These components can be nested, mixed, and masked. Shaders provides a design editor for creating effects on an infinite canvas and exporting them as framework code. It supports React, Vue, Svelte, Solid, and JavaScript with TypeScript support and optimized production-grade performance. AI can use Shaders to design and edit effects via MCP server or Agent Skill.
Capabilities
- ▪200+ WebGPU effect components
- ▪Supports React, Vue, Svelte, Solid, and JavaScript
- ▪Design editor exports code
- ▪TypeScript support
- ▪Production-grade performance optimization
Use cases
Setup
npx shaders@latest install-mcp or npx shaders skill
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
How to install Shaders?
Install via npm: npm install shaders
Does Shaders support TypeScript?
Yes, Shaders supports TypeScript and provides type definitions.
Related skills
Intent-Router
Intent compiler that converts ambiguous requests into clear IntentSpec contracts.
sast-skills
Transform your AI coding assistant into a SAST scanner to automatically detect vulnerabilities in code.
Lightswind-UI-Library
AI-native CLI-first React component library with MCP Server support.
scientific-agent-skills
Transform any AI agent into a scientific assistant with 147 ready-to-use research skills.
susi_alexa_skill
A skill that enables question-and-answer interactions between Alexa and Susi AI.
claude-context
Provides code search capabilities for Claude Code, turning the entire codebase into context.