Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add notque/vexjoy-agent --skill webgl-card-effectsgit clone --depth 1 https://github.com/notque/vexjoy-agentWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/notque/vexjoy-agent/webgl-card-effects)<a href="https://agentmods.dev/skills/notque/vexjoy-agent/webgl-card-effects"><img src="https://agentmods.dev/badge/skills/notque/vexjoy-agent/webgl-card-effects.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 127 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00024 | $0.02778 |
| Opus 5 | $0.00012 | $0.01389 |
| Sonnet 5 | $0.00005 | $0.00556 |
| Haiku 4.5 | $0.00002 | $0.00278 |
Grade A, and why
webgl-card-effects scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 277 lines — stays where its author put it; the contents beside it link to each section on GitHub.
WebGL Card Effects Skill
Overview
This skill adds GPU-accelerated visual effects to React card components using standalone WebGL2 fragment shaders — no Three.js, no R3F, no external library required. It targets deckbuilder games and card UIs where rarity tiers should feel visually distinct, not just differentiated by a CSS box-shadow value.
Scope: Holographic foil overlays, metallic shimmer bands, rarity-driven energy pulses, and interactive tilt-shine effects mounted directly on React card components. The canonical target is FramedCard.tsx in a React 19 / Vite / Tailwind project with a rarity system (starter → common → uncommon → rare → legendary).
Not in scope: 3D transformations, texture loading, post-processing pipelines, or any Three.js scene management. For those, use threejs-builder.
Key constraint: Browsers cap WebGL contexts at roughly 8–16 total per page. This skill uses a single shared WebGL2 context with blit-to-2D-canvas output per card, avoiding the per-card context problem entirely. See references/shader-integration-react.md for the full singleton pattern.
Instructions
Phase 1: ASSESS
Goal: Understand which effects are needed and confirm the card component structure before writing any code.
Step 1: Read the card component
Read these files before writing anything:
src/components/cards/FramedCard.tsx— component structure, hover state, rarity prop flowsrc/components/cards/cardStyles.ts—CARD_SIZE_CONFIGfor pixel dimensions, rarity string values
Confirm:
- How rarity reaches the component (prop name, TypeScript type, exact string values)
- Whether
isHoveredstate already exists in the component - Which sizes are rendered in contexts that justify shader cost (xl/lg only — xs/sm are too small)
- Whether
showShine/card-shineCSS exists and needs coordination
Step 2: Select effect tier per rarity
| Rarity | WebGL? | Effect |
|---|---|---|
| starter / common | No | CSS shimmer only — no WebGL overhead |
| uncommon | Yes (subtle) | Metallic band shimmer, very low opacity |
| rare | Yes (medium) | Moving shimmer + blue hue shift + edge pulse |
| legendary | Yes (full) | Rainbow holographic foil, mouse-reactive tilt |
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 277 lines · 24 tokens per session scan A bfe7b0145c98
webgl-card-effects is a skill published in the GitHub repository notque/vexjoy-agent (419 stars, last pushed 3d ago), licensed MIT. It adds 24 tokens to every session and 2,778 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
frontend-ui-design
Use when design and build production-grade UI components using React, Vue, or vanilla HTML/CSS. Create responsive layouts, design systems, and accessible interfaces. Use when designing and build production-grade ui components using react, vue, or.
radix-primitives
Use when radix UI headless primitives — accessible, unstyled React components for dialogs, dropdowns, tooltips. Use when working with radix primitives.
shadcn-ui
Use when shadcn/ui component library — copy-paste React components, Tailwind CSS, Radix primitives, theming. Use when working with shadcn ui.
material-ui
Use when material UI (MUI) React components — theming, styled engine, data grid, date pickers, icons. Use when working with material ui.
unlayer-integration
Integrates Unlayer's email, page, popup, and document builders into web applications through React, Vue, Angular, or plain JavaScript. Use for builder component setup, props, editor access patterns, and multiple instances. For the standalone Image Editor or @unlayer/react-image-editor, use unlayer-image-editor.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.