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 freshtechbro/claudedesignskills --skill lightweight-3d-effectsgit clone --depth 1 https://github.com/freshtechbro/claudedesignskillsWrote 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/freshtechbro/claudedesignskills/lightweight-3d-effects)<a href="https://agentmods.dev/skills/freshtechbro/claudedesignskills/lightweight-3d-effects"><img src="https://agentmods.dev/badge/skills/freshtechbro/claudedesignskills/lightweight-3d-effects/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/freshtechbro/claudedesignskills/lightweight-3d-effects"><img src="https://agentmods.dev/badge/skills/freshtechbro/claudedesignskills/lightweight-3d-effects.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk warn
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.00110 | $0.06812 |
| Opus 5 | $0.00055 | $0.03406 |
| Sonnet 5 | $0.00022 | $0.01362 |
| Haiku 4.5 | $0.00011 | $0.00681 |
Grade A, and why
lightweight-3d-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 11d 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.
Copies of this mod
1 near-identical copy found in the catalogue:
- lightweight-3d-effects — 100% identical, 0 lines differ
How it starts
The opening of the file, as written. The whole thing — 1,092 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Lightweight 3D Effects Skill
Overview
This skill combines three powerful libraries for decorative 3D elements and micro-interactions:
- Zdog: Pseudo-3D engine for designer-friendly vector illustrations
- Vanta.js: Animated 3D backgrounds powered by Three.js/p5.js
- Vanilla-Tilt.js: Smooth parallax tilt effects responding to mouse/gyroscope
When to Use This Skill
- Add decorative 3D illustrations without heavy frameworks
- Create animated backgrounds for hero sections
- Implement subtle parallax tilt effects on cards/images
- Build lightweight landing pages with visual depth
- Add micro-interactions that enhance UX without performance impact
Zdog - Pseudo-3D Illustrations
Core Concepts
Zdog is a pseudo-3D engine that renders flat, round designs in 3D space using Canvas or SVG.
Key Features:
- Designer-friendly declarative API
- Small file size (~28kb minified)
- Canvas or SVG rendering
- Drag rotation built-in
- Smooth animations
Basic Setup
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<style>
.zdog-canvas {
display: block;
margin: 0 auto;
background: #FDB;
cursor: move;
}
</style>
</head>
<body>
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script>
let isSpinning = true;
let illo = new Zdog.Illustration({
element: '.zdog-canvas',
zoom: 4,
dragRotate: true,
onDragStart: function() {
isSpinning = false;
},
});
// Add shapes
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
translate: { z: 10 },
stroke: 5,
color: '#636',
});
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true,
});
function animate() {
illo.rotate.y += isSpinning ? 0.03 : 0;
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
What ships with it
10 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.
- assets/examples/README.md 26 KB
- assets/starter_lightweight/index.html 3.1 KB
- assets/starter_lightweight/main.js 9.3 KB runs code
- assets/starter_lightweight/README.md 11 KB
- assets/starter_lightweight/style.css 4.7 KB
- references/tilt_patterns.md 20 KB
- references/vantajs_effects.md 19 KB
- references/zdog_api.md 21 KB
- scripts/generate_zdog.py 22 KB runs code
- scripts/setup_vanta.py 19 KB runs code
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.
- 11d ago First seen · 1,092 lines · 110 tokens per session scan A d0ae4223cce3
lightweight-3d-effects is a skill published in the GitHub repository freshtechbro/claudedesignskills (882 stars, last pushed 9mo ago), licensed MIT. It adds 110 tokens to every session and 6,812 once invoked, about $0.0006 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-08-30.
Other skills, from other repositories
webgl-liquid-metal
A real-time liquid-metal shader — a domain-warped noise field shaded as molten chrome, with a sweeping specular highlight over an iridescent thin-film (cosine-palette) sheen. No textures. Rendered as a single self-contained index.html. Use when the brief asks for "liquid metal", "molten chrome", "iridescent"…
webgl-particle-galaxy
A real-time particle galaxy — tens of thousands of additive-blended GPU points spiraling around a bright core, their orbits solved entirely in the vertex shader (from glVertexID), so the whole cloud draws in one call. Rendered as a single self-contained index.html. Use when the brief asks for a "particle field"…
webgl-neon-grid
A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained index.html. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or…
webgl-depth-gallery
A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
webgl-horizontal-parallax
A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
webgl-distortion-grain
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.