skills.rest
jokerman89
jokerman89COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-shader

Selects shader libraries and generates shader.json with GLSL references and performance budgets.

Updated May 27, 2026
Search Tags:#frontend#glsl#webgl#react-three-fiber#shader#performance budget#hero visual
One-click install
npx skills add https://github.com/jokerman89/lintel --skill frontend-shader-jokerman89
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-shader
Source: https://github.com/jokerman89/lintel/tree/main/skills/frontend-shader
Command: npx skills add https://github.com/jokerman89/lintel --skill frontend-shader-jokerman89

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right WebGL shader approach for a frontend hero visual is error-prone: teams must pick a library, define a visual thesis, plan GPU fallbacks, and respect performance budgets. This Skill turns a short operator brief into a validated shader.json decision document covering all of those concerns. ## Core Features & Use Cases - Library Selection: Picks among Paper Shaders, OGL, react-three-fiber, Lygia, CSS Houdini paint worklets, or a zero-library CSS gradient fallback based on the brief. - Performance Budgeting: Emits fps targets, draw-call limits, low-end and no-WebGL fallback strategies, and prefers-reduced-motion handling. - Schema-Validated Output: Produces a shader.json (schema_version 1) consumed by the /li:frontend-design orchestrator or used directly in solo component mode. - Use Case: Given a brief like "hero background for an enterprise SaaS landing with a subtle mesh gradient", the Skill recommends @paper-design/shaders-react with a MeshGradient snippet, mobile downscale strategy, and CSS fallback. ## Quick Start Ask the agent to run the frontend-shader skill with a brief describing your desired hero visual, for example a subtle mesh-gradient background for a landing page, and review the generated shader.json.

Frequently Asked Questions about frontend-shader

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose a shader library for a React hero background?▼

Provide a brief describing the visual goal and the skill picks a library: Paper Shaders for declarative mesh gradients, OGL for custom GLSL control, or react-three-fiber for full 3D scenes. The result is written to shader.json with install instructions.

Paper Shaders vs OGL vs react-three-fiber for WebGL backgrounds?▼

Paper Shaders offers declarative mesh gradients with the lowest implementation cost for non-3D hero visuals. OGL gives raw WebGL and GLSL control for performance-critical custom effects, while react-three-fiber suits immersive 3D scenes with post-processing.

How do I handle WebGL shader fallbacks for low-end mobile devices?▼

The generated shader.json requires a perf_budget with fallback_strategy_low_end (such as swapping to a CSS conic-gradient) and fallback_strategy_no_webgl (static CSS gradient plus noise SVG). It also enforces prefers-reduced-motion support and intersection-observer pausing.

When should I not use a WebGL shader on a landing page?▼

Skip shaders for static sites without hero-visual ambition or when a CSS gradient is sufficient. The skill can return visual_thesis "none" and short-circuit, still emitting valid JSON so orchestrator synthesis handles a null shader gracefully.

Does the shader skill check library licenses before customer delivery?▼

Yes, passing the customer-share flag triggers a compliance-gate license check on the selected shader library. The agent verifies current licensing at invocation, and a failed check results in BLOCKED status.

Related Skills

Explore More Design & Creative Skills→
Buntyarora97Buntyarora97

design

Delegate frontend design tasks to a specialized subagent using a creative brief.

Community
Advanced
LPDigital-AgentLPDigital-Agent

frontend-design

Defines typography, color, motion, spacing, and accessibility requirements for frontend components.

Official
Basic
programadorisgodprogramadorisgod
1

ui-animation

Guide accessible, performant UI motion with CSS, keyframes, and Framer Motion.

Community
Intermediate
encounterplusencounterplus
16

pixijs-filters

Configure PixiJS v8 container.filters with shader options and filterArea optimization.

Official
Intermediate