Shader for Interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

120 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add v2space-labs/shader-for-interfaces --skill shader-for-interfaces

Manual install

git clone --depth 1 https://github.com/v2space-labs/shader-for-interfaces.git /tmp/shader-for-interfaces
mkdir -p ~/.claude/skills
cp -r /tmp/shader-for-interfaces/. ~/.claude/skills/shader-for-interfaces

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Shader for Interfaces

Build the effect as part of the product. Keep content, controls, layout, and accessibility in the interface while the GPU supplies the visual layer.

## Task mode

- Recommend: read [effect-selection.md](references/effect-selection.md), compare the viable renderers, and return a decision, tradeoffs, fallback, and validation gaps. Do not change files unless asked.
- Diagnose: reproduce and isolate the failure. Explain the cause and a scoped fix; implement it only when the request includes fixing the issue.
- Build or change: follow the complete workflow, integrate the effect, and pass the browser gate.

## Scope

For GPU implementation, this skill handles a focused, contained surface: one effect or draw, modest particles or data, and fixed quality caps chosen from measurement. It does not implement dependent render targets, ping-pong or feedback state, persistent GPU simulations, measured adaptive-quality controllers, formal render graphs, Three.js TSL/WebGPU migrations, or reusable delivery systems.

When a request crosses this boundary, name the features outside scope. Offer a contained simplification only when it still meets the user's goal; if it does not, return a system and acceptance outline and leave the advanced implementation undone. Never present a partial advanced system as complete.

Load only what the current decision or symptom needs:

| Symptom | Read |
|---|---|

Read the full skill on GitHub

Details

Skill name: shader-for-interfaces
Repository: v2space-labs/shader-for-interfaces
License: MIT
Repo updated: 1 September 2026

FAQ

What does the Shader for Interfaces skill do?

How do I install the Shader for Interfaces skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add v2space-labs/shader-for-interfaces --skill shader-for-interfaces. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Shader for Interfaces popular?

It lives in v2space-labs/shader-for-interfaces, which has 120 GitHub stars and 1 forks.

Related skills

Design Taste

h3nryprod01/design-taste

Elite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect

Frontend & Design

Data2motion Lite

nolangz/data2motion

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

Frontend & Design11

Nextjs App Architecture

aurorascharff/nextjs-app-architecture-skill

Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use

Frontend & Design

Frontend Textbooks

108

onepixelaway/frontend-textbooks

Create designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.

Frontend & Design

Audit Frontend Design

memi-design/memi

Use when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.

Frontend & DesignIn 1 list

Cinematic UI

akseolabs-seo/cinematic-ui

Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o

Frontend & Design24

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.