Florian KiemOne shared context blitted into cheap 2D canvases, one rAF loop, IntersectionObserver gating, mipmaps, and real optics instead of painted ones. The failure modes are predictable and nearly all come from treating the widget like a demo.
In the author’s words
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
The description field from SKILL.md, quoted as written.
Read it before you install it
SKILL.md · 125 lines
Install on its own
Or add it to your stack above and install everything at once.
npx skills add https://github.com/flornkm/skills --skill webgl-componentsTrust audit
View the source ↗- Checked automatically and confirmed.
- Resolved (HTTP 200), passed
- Checked automatically and confirmed.
- Resolves · 110 stars, passed
- Checked automatically and confirmed.
- Transcribed from UI Skills, passed
- Checked automatically and confirmed.
- Last updated 26 days ago, passed
- Checked automatically and confirmed.
- Credited to Florian Kiem, passed
Goes well with
prototype
Builds several genuinely different UI variants behind a live picker.
Flip through real implementations instead of arguing about descriptions, then promote the one that wins.
npx skills add https://github.com/emilkowalski/skills --skill prototype
pick-ui-library
Picks the library from the set Emil actually uses and trusts.
Stops your agent hand-rolling a toast or installing whatever is trending. Covers components, motion, charts, interaction, state and styling.
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
break
Renders a component in every state on a temp page and stress-tests it.
Finds the design-system failures you don't know about: long names, empty data, overflow, every interactive state at once.
npx skills add https://github.com/jakubkrehel/skills --skill break
Emil Kowalski
Jakub Krehel