3d-web-experiences

3d-web-experiences is a skill for Cursor from madebyaris/advance-minimax-m3-cursor-rules. It costs 147 tokens per session (2,920 once invoked), scanned A, original, MIT.

A workflow for building intentional, responsive 3D scenes and interactive graphics in web browsers with Three.js, React Three Fiber, or WebGL.

In plain words
What is it for?
3D website heroes, product viewers, configurators, immersive scrolling, data visualizations, shaders, and improving existing 3D scenes.
Why use it?
It addresses visual quality, performance on real devices, mobile behavior, and fallback handling that basic 3D examples often overlook.

Skill for Cursor

Written for Cursor: installed under .cursor/.

Good fit 3D website heroes, product viewers, configurators, immersive scrolling, data visualizations, shaders, and improving existing 3D scenes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences
Install

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.

Any agent
npx skills add madebyaris/advance-minimax-m3-cursor-rules --skill 3d-web-experiences
Clone the repo
git clone --depth 1 https://github.com/madebyaris/advance-minimax-m3-cursor-rules

Made for: Cursor.

Wrote 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.

agentmods badge for 3d-web-experiences

README.md
[![agentmods](https://agentmods.dev/badge/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences/github.svg)](https://agentmods.dev/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences)
Your own site
<a href="https://agentmods.dev/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences"><img src="https://agentmods.dev/badge/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences/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.

agentmods 80×15 button for 3d-web-experiences

Your own site · 80×15
<a href="https://agentmods.dev/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences"><img src="https://agentmods.dev/badge/skills/madebyaris/advance-minimax-m3-cursor-rules/3d-web-experiences.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 147 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,920 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00147 $0.02920
Opus 5 $0.00073 $0.01460
Sonnet 5 $0.00029 $0.00584
Haiku 4.5 $0.00015 $0.00292

Measured 11d ago against content hash 120eaf2c0084, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

3d-web-experiences 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.

.cursor/skills/3d-web-experiences/SKILL.md · 201 lines

How it starts

The opening of the file, as written. The whole thing — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.

3D Web Experiences ("3D Taste + Production Layer")

Build 3D on the web that looks intentional and runs at frame rate on real devices, not a default gray model spinning on a purple gradient. This skill is the 3D counterpart to anti-slop-design: it enforces aesthetic direction, a performance budget, responsive behavior, and graceful degradation.

This skill teaches the decisions and quality bar. For mechanical Three.js / R3F syntax, see the 3d-graphics rule. For deep recipes (lighting/material/post-fx, performance playbook, bug catalog, asset pipeline), read reference.md.

When to Use

  • Building any 3D web visual: hero scene, product viewer/configurator, data viz, immersive scroll.
  • User mentions three.js, React Three Fiber (r3f), drei, WebGL, GLSL/shaders, or a .glb/.gltf model.
  • User asks to make an existing 3D scene "look better", "run faster", or "work on mobile".

Read reference.md for full scenes, multi-effect pipelines, or when debugging performance/visual issues. Skip it for a single mesh or a trivial tweak.


Step 0: Read 3D Context

Before writing 3D code, inspect the project:

  1. Stack: vanilla Three.js or React Three Fiber? Check package.json for three, @react-three/fiber, @react-three/drei, @react-three/postprocessing, @react-three/rapier.
  2. Existing canvas/scene setup, renderer config (color space, tone mapping), and the container the canvas mounts into.
  3. Asset pipeline: are models Draco/Meshopt compressed? Are textures KTX2/Basis? Where do assets live?
  4. Target: is this a decorative hero, an interactive tool, or a full game-like loop? This sets the performance budget.
  5. If a scene already exists, respect its conventions and extend; do not rebuild from scratch.

Step 0.5: Multimodal Reference Parity (M3)

When the user attaches a reference video, a recorded interaction, or a sequence of frames showing the look they want:

  • Read the actual file/frame, not a guessed description of it. On M3 the runtime can ingest video natively; treat the attachment as ground truth.
  • For "make it look like this" requests, the reference is the contract. State the path in your closeout.
  • For reference clips with motion, pick a small number of representative frames (start, mid, end) and reason about the in-between motion explicitly — do not invent the motion.
  • After the build, re-read the rendered state (post-change frame) and compare against the reference; do not claim parity from memory.

Read the full file on GitHub · 201 lines

Files

What ships with it

1 file 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.

Changes

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.

  1. 11d ago First seen · 201 lines · 147 tokens per session scan A 120eaf2c0084

Subscribe to this mod's changes

3d-web-experiences is a skill published in the GitHub repository madebyaris/advance-minimax-m3-cursor-rules (125 stars, last pushed 2mo ago), licensed MIT. It adds 147 tokens to every session and 2,920 once invoked, about $0.0007 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.

Related

Other skills, from other repositories

brand-landingpage

Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established…

wshobson/agents · 112 tokens

wcag-audit-patterns

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

wshobson/agents · 45 tokens

tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

calesthio/OpenMontage · 42 tokens

vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

calesthio/OpenMontage · 58 tokens

ai-ui-generation

AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality…

yonatangross/orchestkit · 95 tokens

ijfw-ui-spec

Use when the user says: 'ui spec', 'design contract', 'ui audit setup', 'lock the design', 'visual contract', 'ui review setup', or '/ijfw-ui-spec'. Produces UI-SPEC.md as the visual design contract before any frontend or visual-artifact build, and dispatches ijfw-ui-auditor as the final 6-pillar gate.

FerroxLabs/ijfw · 83 tokens