shader-dev
SolidComprehensive GLSL shader techniques for creating stunning visual effects — ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.
Install
Quality Score: 93/100
Skill Content
Details
- Author
- mxyhi
- Repository
- mxyhi/ok-skills
- Created
- 3 months ago
- Last Updated
- yesterday
- Language
- C#
- License
- Apache-2.0
Similar Skills
Semantically similar based on skill content — not just same category
shaders
Guides building GPU-accelerated visual effects in React / Next.js with the `shaders` npm package from shaders.com — declarative `<Shader>` component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (`auto-animate`, `mouse-position`, `map`), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the `shaders/react` package, the `<Shader>` component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
godot-shaders
Godot shading language skill for visual shaders, custom rendering, and material effects.
animation-shader
READ this skill when implementing or configuring animation-style shaders (Toon/Cel Shaders) — including outlines, rim lighting, toon shading, MatCap, emission, dissolve, hatching, or any stylized rendering effect. Contains preset styles and feature-to-reference mappings for lilToon, Poiyomi, UTS2, RToon, SToon, and ToonShadingCollection. Works as a domain knowledge plugin alongside workflow skills (OpenSpec, SpecKit) or plan mode of an agent.
frontend-dev
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
shader-effects
Common shader effects skill for dissolve, outline, hologram, toon, water, fire effects.