New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

3D Web Experiences

by madebyaris in madebyaris/advance-minimax-m3-cursor-rules

Builds 3D web scenes with Three.js and React Three Fiber, with attention to art direction, a performance budget, mobile behavior and fallbacks.

MITAuto-check passedGame Development

Install 3D Web Experiences

skills CLI
$ npx skills add madebyaris/advance-minimax-m3-cursor-rules --skill 3d-web-experiences -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install madebyaris/advance-minimax-m3-cursor-rules 3d-web-experiences --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/madebyaris/advance-minimax-m3-cursor-rules.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/3d-web-experiences .claude/skills/3d-web-experiences && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
3d-web-experiences
GitHub stars
126
Token cost
~3k tokens
SKILL.md length
1,236 words
Files
2
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Builds 3D web scenes with Three.js and React Three Fiber, with attention to art direction, a performance budget, mobile behavior and fallbacks.

  • Works in 3 steps: Read 3D Context → 5: Multimodal Reference Parity (M3) → Commit to a 3D Direction
  • Building a 3D hero section or landing page scene
  • SKILL.md covers When to Use, Step 0: Read 3D Context, Step 0.5: Multimodal Reference… and Step 1: Commit to a 3D Direction, plus 9 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

This skill sets the decisions and quality bar for 3D on the web: scenes that look intentional and run at frame rate on real devices, rather than a default gray model spinning on a gradient. It pairs with an anti-slop-design skill for aesthetics, leaves raw Three.js and React Three Fiber syntax to a separate 3d-graphics rule, and keeps deeper recipes for lighting, materials, post-processing, performance and an asset pipeline in reference.md.

It starts by inspecting the project: whether it uses vanilla Three.js or React Three Fiber (checking package.json for three, drei, postprocessing and rapier packages), the existing canvas and renderer setup, whether models are Draco or Meshopt compressed and textures KTX2, and whether the target is a decorative hero, an interactive tool or a game-like loop, which sets the performance budget. An existing scene is extended, not rebuilt.

When you attach a reference video or frames of the look you want, it reads the actual file, treats it as the contract and reasons about motion between representative start, middle and end frames instead of inventing it. Responsive WebGL, graceful degradation and accessibility are also covered.

When your agent uses it

  • Building a 3D hero section or landing page scene
  • Making a product viewer or configurator with Three.js or r3f
  • Making an existing 3D scene look better or run smoothly on mobile
  • Recreating the look of a reference video in a WebGL scene

Example prompts

  • “Build a 3D hero for our landing page with React Three Fiber and a fallback for low-power devices.”
  • “Make this product viewer run smoothly on phones and look less like a default gray model.”
  • “Match the lighting and motion in the attached reference clip using Three.js.”

Requirements

  • A web project using Three.js or React Three Fiber
  • Node.js tooling for the project's package manager

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Read 3D Context
  2. 5: Multimodal Reference Parity (M3)
  3. Commit to a 3D Direction

What it can do on your machine

Read from SKILL.md and the folder at commit 4d6c552. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

3D Web Experiences loads about 3k tokens when it runs. Until then it costs about 150 tokens; SKILL.md has 1,236 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~150
When it runs · the whole SKILL.md, loaded when a task matches
~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from madebyaris/advance-minimax-m3-cursor-rules at commit 4d6c552, republished under its MIT licence (© madebyaris). 1,236 words, ~3,014 tokens.

Download SKILL.mdSave it as .claude/skills/3d-web-experiences/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
3d-web-experiences
description
Build distinctive, performant, production-grade 3D on the web with Three.js, React Three Fiber, and WebGL. Use when the user asks to "build a 3D scene", "add a 3D hero/landing", "make a product viewer/configurator", mentions three.js / react-three-fiber / r3f / drei / webgl / shaders, or asks to make an existing 3D scene "look good", run smoothly, or work on mobile. Covers aesthetic direction (anti-slop for 3D), lighting/material/post-processing, performance budgets, responsive WebGL, graceful degradation, accessibility, and M3 multimodal parity from reference video/frames.
license
MIT
metadata.version
1.1.0
metadata.category
design
metadata.sources
Three.js official documentation (threejs.org/docs), React Three Fiber docs (r3f.docs.pmnd.rs), drei docs (drei.docs.pmnd.rs), react-postprocessing docs…

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.

Step 1: Commit to a 3D Direction

Never ship the default look. Before coding, decide:

  1. Intent: decorative background, hero focal object, interactive product, or data-driven. This dictates how much GPU budget the 3D earns.
  2. Mood + lighting model: studio/three-point (product), HDRI environment (realistic), or stylized/toon (playful). Pick one; do not leave it ambient-only.
  3. Material direction: realistic PBR, glass/transmission, stylized/toon, or gradient. Match the 2D brand palette (coordinate with anti-slop-design).
  4. The memorable moment: the ONE thing a viewer remembers (a material, a reveal, a camera move, a light). Commit to it.
  5. Tone mapping + color space are not optional: set ACESFilmic (or AgX on recent three) tone mapping and correct output color space, or the scene reads flat and washed.
  6. Damp all continuous motion: camera moves, pointer-follow, and scroll-tied animation go through MathUtils.damp/lerp — never bind raw scroll or pointer values directly. Undamped motion is the 3D equivalent of no easing; it reads as cheap immediately.

Banned Patterns ("3D Slop")

These are the statistical-median 3D outputs. Do not ship them as the final look:

  • A lone glossy TorusKnot/Icosahedron/blob slowly auto-rotating on a purple→blue gradient background.
  • Default gray meshStandardMaterial with no metalness/roughness intent and no environment map.
  • Ambient-light-only scenes (flat, no form, no shadows) — or the opposite: a single point light with everyone's favorite hard black shadows.
  • No tone mapping / wrong color space, so PBR materials look milky and lifeless.
  • OrbitControls with infinite auto-rotate as the only "interactivity."
  • Bloom cranked on the whole scene so everything glows (bloom should be selective).
  • Particle fields of 10k points as a stand-in for an idea.
  • Ignoring mobile: shipping full DPR + heavy post-fx that melts phones, or a blank canvas where WebGL is unavailable.
  • The pasted-rectangle canvas: scene background mismatched with the page, hard edges, no compositional tie to the surrounding 2D layout. Blend with a matching clear color or transparent canvas, and let 2D content overlap the 3D so they read as one composition.

Pivot each to something category-appropriate: real product geometry, an HDRI-lit material study, a purposeful camera move, selective emissive glow, or a restrained, readable composition.

Show full SKILL.md (530 more words)Show less

Core Decisions

DecisionDefault that worksPush further
LightingEnvironment (HDRI) + one key directionalLight with soft shadowsThree-point studio rig; stylized rim light; baked lighting
MaterialPBR meshStandardMaterial with an env maptransmission glass, toon/gradient, custom shader for the hero
CameraFramed composition, slight FOV (35-50), not centered-and-staticSubtle parallax/scroll-tied move; prefers-reduced-motion respected
ColorACESFilmicToneMapping + correct color spaceGraded HDRI + matched Vignette/Bloom
Post-fxNone, or selective Bloom + light VignetteDOF for product focus, SSAO for contact realism (budget permitting)

See reference.md for concrete, verified recipes for each.

Performance Budget (decide before building)

Pick a target and hold to it. Frame budget is ~16.6ms for 60fps.

TierTargetDraw callsTrianglesPost-fx
Decorative / background60fps desktop, 30fps+ mobile< 50< 150kminimal
Hero / product60fps desktop, 30fps mobile< 100< 500kselective bloom/DOF
Interactive tool60fps desktop< 200< 1Mas budget allows

Core levers (full playbook in reference.md):

  • Clamp DPR: dpr={[1, 2]} in R3F (or Math.min(devicePixelRatio, 2)). Never render at uncapped retina DPR.
  • Instance repeated geometry (InstancedMesh / drei <Instances>); merge static geometry.
  • LOD with drei <Detailed distances={[...]}> for distant detail.
  • Static scene? Use frameloop="demand" and invalidate() on change instead of rendering every frame.
  • Compress assets: Draco/Meshopt for geometry, KTX2/Basis for textures.
  • Dispose geometries, materials, and textures on unmount to avoid GPU memory leaks.

Responsive & Mobile WebGL

3D must adapt across desktop, laptop, tablet, and phone — not just resize.

  • Tie the renderer to its container size, not window.innerWidth/Height; the container must have an explicit height (see the 3d-graphics rule's container guidance).
  • Lower the effect tier on mobile: reduce/disable post-fx, cap DPR harder ([1, 1.5]), reduce shadow map size, drop particle counts.
  • Use drei <AdaptiveDpr pixelated /> and <PerformanceMonitor> to degrade quality under load automatically.
  • Touch: ensure controls work with touch (pinch/drag); avoid hover-only affordances on touch devices.
  • Respect prefers-reduced-motion: pause auto-rotation and large camera moves; offer a static framed view.

Graceful Degradation & Loading

  • Detect WebGL support; if unavailable, render a meaningful 2D fallback (poster image / static content), not a blank canvas.
  • Wrap async 3D (models, HDRIs) in Suspense with a real loader (drei useProgress / <Html>), not a frozen white screen.
  • Handle webglcontextlost (recover or show the fallback) — common on mobile after backgrounding.

Accessibility

  • A 3D canvas is not keyboard-operable by default. Provide an accessible alternative: descriptive text, a 2D version, or controls with real buttons.
  • Do not trap focus or keyboard inside the canvas; ensure users can tab past it.
  • Provide a visible pause/stop control for continuous motion (also satisfies prefers-reduced-motion users who toggle).
  • Decorative canvases: mark aria-hidden and keep the real content in the DOM.

Verification

3D is a UI/interaction change — static confidence is not proof. Before claiming done:

  1. Load the scene in a browser (use the browser tools): confirm it renders, not a blank/black canvas.
  2. Check the console for WebGL errors, shader compile errors, and context lost warnings.
  3. Sanity-check frame rate (drei <Stats> or browser FPS) against the chosen budget tier.
  4. Resize / emulate a phone viewport: confirm the canvas resizes with its container and the mobile effect tier kicks in.
  5. Toggle prefers-reduced-motion and confirm motion is reduced.

Report what you verified and what remains unverified (e.g. "rendered and 60fps on desktop; mobile not device-tested").

Pre-Delivery Checklist

[ ] Direction committed: intent, lighting model, material, memorable moment stated
[ ] No 3D slop (lone blob on purple gradient, default gray PBR, ambient-only, no tone mapping)
[ ] Tone mapping + correct output color space set on the renderer
[ ] Lighting has form: environment/HDRI or a real key/fill/rim, not ambient-only
[ ] Post-fx is selective and budget-justified, not whole-scene bloom
[ ] Performance budget chosen; DPR clamped; instancing/LOD used where relevant
[ ] Static scenes use frameloop="demand"; dispose on unmount
[ ] Canvas sized to its container (explicit height), resizes correctly
[ ] Mobile effect tier: reduced post-fx, capped DPR, adaptive DPR/perf monitor
[ ] WebGL-unavailable fallback renders meaningful 2D content
[ ] Suspense loader for async assets; context-lost handled
[ ] Accessible alternative + focus not trapped + pause control for motion
[ ] prefers-reduced-motion respected
[ ] Verified in browser: renders, no console errors, FPS within budget

Quick Reference

READ    -> stack (vanilla vs R3F), renderer config, asset pipeline, container
COMMIT  -> intent + lighting model + material + memorable moment
BUDGET  -> pick tier (decorative/hero/interactive), clamp DPR, plan instancing/LOD
BUILD   -> lighting with form, tone mapping, selective post-fx, responsive sizing
DEGRADE -> WebGL fallback, Suspense loader, context-lost, reduced-motion, a11y
CHECK   -> browser render, console clean, FPS in budget, mobile + reduced-motion

BANNED  -> lone blob on purple gradient, default gray PBR, ambient-only lighting,
           no tone mapping, auto-rotate-only "interaction", whole-scene bloom,
           uncapped DPR, blank canvas with no fallback
ALWAYS  -> tone mapping + color space, lighting with form, clamped DPR,
           dispose on unmount, container-sized canvas, mobile tier, 2D fallback,
           accessible alternative, browser-verified

© madebyaris, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .cursor/skills/3d-web-experiences of madebyaris/advance-minimax-m3-cursor-rules.

  • SKILL.md
  • reference.md

Open the folder on GitHubat commit 4d6c552

Compare with similar skills

3D Web Experiences next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

3D Web Experiences compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
3D Web Experiences this skillmadebyaris/advance-minimax-m3-cursor-rules126—~3kAutomated safety check: PassMIT
Shader for Interfacesv2space-labs/shader-for-interfaces115—~3.1kAutomated safety check: PassMIT
Better Designmarvkr/better-design254—~1.2kAutomated safety check: PassMIT
Frontend Engineer Workflownanocoai/nanoclaw31k—~1.5kAutomated safety check: PassMIT
Oma Designfirst-fluke/oh-my-agent1.3k—~2.9kAutomated safety check: PassMIT
Polycsslayoutit/polycss761—~2.4kAutomated safety check: PassMIT

Similar skills

  • Shader for Interfaces

    v2space-labs/shader-for-interfaces

    Decides whether an interface effect belongs in CSS, SVG, Canvas 2D, WebGL or WebGPU, then builds, debugs and visually verifies focused GPU effects inside product UIs.

    115 GitHub stars~3.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Better Design

    marvkr/better-design

    Build, improve, and review production interfaces with the Better Design MCP.

    254 GitHub stars~1.2k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed

  • Frontend Engineer Workflow

    nanocoai/nanoclaw

    Sets a build, test and verify routine for web projects: write typed, accessible code and never call work done until it is checked in a real browser with screenshots.

    31k GitHub stars~1.5k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Oma Design

    first-fluke/oh-my-agent

    AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.

    1.3k GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Polycss

    layoutit/polycss

    Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements.

    761 GitHub stars~2.4k tokensUpdated 1 mo ago
    Game DevelopmentAuto-check passed

  • Liquid Metal Border

    boraoztunc/skills

    Add and tune animated liquid-metal WebGL borders with the React metal-fx package.

    397 GitHub starsUsed in 2 repos~3.4k tokens
    Frontend & DesignAuto-check passed

More from madebyaris/advance-minimax-m3-cursor-rules

  • Deep Research Loop

    madebyaris/advance-minimax-m3-cursor-rules

    Runs multi-step research with a loop of search, compress, reflect and synthesize, scaling effort from a quick sourced answer to an exhaustive cited report.

    126 GitHub stars~2.9k tokensUpdated 3 mo ago
    Auto-check passed

  • Incident Triage Harness

    madebyaris/advance-minimax-m3-cursor-rules

    Walks an agent through an evidence-first incident investigation across logs, metrics, code and screenshots, from first symptom to the smallest safe mitigation.

    126 GitHub stars~984 tokensUpdated 3 mo ago
    Auto-check passed

  • MiniMax M3 Long-Context Discipline

    madebyaris/advance-minimax-m3-cursor-rules

    Teaches how to work within MiniMax M3's 1M-token context: decide per source what to keep, summarize or drop, plan the loading, and cap raw blocks across iterations.

    126 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • MiniMax M3 Multimodal Input

    madebyaris/advance-minimax-m3-cursor-rules

    Teaches an agent on MiniMax M3 to ground visual claims in attached images, screenshots, mockups and clips, and to re-read results after a visual change.

    126 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

  • MiniMax Multimodal Toolkit

    madebyaris/advance-minimax-m3-cursor-rules

    Routes image, video, voice, music and media-processing requests to the smallest suitable MiniMax or local path, with FFmpeg-style processing around generated media.

    126 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about 3D Web Experiences

What does 3D Web Experiences do?

Builds 3D web scenes with Three.js and React Three Fiber, with attention to art direction, a performance budget, mobile behavior and fallbacks. This skill sets the decisions and quality bar for 3D on the web: scenes that look intentional and run at frame rate on real devices, rather than a default gray model spinning on a gradient.md.

When should I use 3D Web Experiences?

3D Web Experiences fits situations like: building a 3D hero section or landing page scene; making a product viewer or configurator with Three.js or r3f; making an existing 3D scene look better or run smoothly on mobile; recreating the look of a reference video in a WebGL scene.

How do I install 3D Web Experiences in Claude Code?

Run `npx skills add madebyaris/advance-minimax-m3-cursor-rules --skill 3d-web-experiences -a claude-code`. Or copy the skill folder (.cursor/skills/3d-web-experiences in madebyaris/advance-minimax-m3-cursor-rules) into .claude/skills/3d-web-experiences in your project. Claude Code loads it when a task matches its description.

How do I install 3D Web Experiences in Codex?

Run `npx skills add madebyaris/advance-minimax-m3-cursor-rules --skill 3d-web-experiences -a codex`. Or copy the skill folder (.cursor/skills/3d-web-experiences in madebyaris/advance-minimax-m3-cursor-rules) into .agents/skills/3d-web-experiences in your project. Codex loads it when a task matches its description.

Can I use 3D Web Experiences in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add madebyaris/advance-minimax-m3-cursor-rules --skill 3d-web-experiences -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/3d-web-experiences, .gemini/skills/3d-web-experiences, .github/skills/3d-web-experiences and .opencode/skills/3d-web-experiences in your project.

What does 3D Web Experiences need to run?

SKILL.md names no scripts, command-line tools or credentials: 3D Web Experiences is instructions for the agent only. Our summary lists: A web project using Three.js or React Three Fiber; Node.js tooling for the project's package manager.

Does 3D Web Experiences access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is 3D Web Experiences safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does 3D Web Experiences use?

3D Web Experiences is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does 3D Web Experiences use?

About 3k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to 3D Web Experiences?

Skills that share tags, products or a category with 3D Web Experiences: Shader for Interfaces (v2space-labs/shader-for-interfaces, 115 stars), Better Design (marvkr/better-design, 254 stars), Frontend Engineer Workflow (nanocoai/nanoclaw, 31k stars) and Oma Design (first-fluke/oh-my-agent, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains 3D Web Experiences?

madebyaris (a GitHub user) maintains it in madebyaris/advance-minimax-m3-cursor-rules, which has 126 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on June 16, 2026.

Source: madebyaris/advance-minimax-m3-cursor-rules on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.