Skip to main content
Glama
marvkr

Better Design

by marvkr
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Hybrid

Get Three.js Guide

get-three-js-guide
Read-onlyIdempotent

Load implementation guidance for Three.js and React Three Fiber tasks: plan, build, debug, optimize, audit 3D scenes, and find shader effects.

Instructions

Load implementation guidance for Three.js and React Three Fiber projects.

Use this while planning, building, debugging, or optimizing 3D web scenes. It covers Three.js fundamentals, geometries, materials, textures, lights and shadows, models and 3D text, particles, physics with Rapier, performance, postprocessing, React Three Fiber and its drei helper catalog, WebGPU and TSL node materials, shader fundamentals, and copyable shader effect recipes. It also covers auditing existing scenes: establish a repeatable baseline, trace resource ownership and repeated work, decide when demand rendering fits, and validate changes in the running scene. Before you model an object from code, load the building-procedural-objects topic: it covers parts that must touch, stay clear, stay in one piece and rest on the ground, faces that point outward, surfaces that must not flicker, and readable text. Preserve the examples when adapting them so the surrounding invariants remain visible to the coding agent.

This complements the design tools: use get-ui-principle for visual decisions and get-ux-principle for product behavior.

You can either:

  1. Request a known topic: get-three-js-guide({ topic: "fundamentals" })

  2. Use an alias: get-three-js-guide({ topic: "webgpu and tsl" })

  3. Search for the current task or code example: get-three-js-guide({ query: "code example for a dissolve shader effect" })

  4. Audit an existing scene: get-three-js-guide({ topic: "auditing-and-fixing-a-scene" })

  5. Model an object whose parts fit together: get-three-js-guide({ topic: "building-procedural-objects" })

  6. Get the full topic index: get-three-js-guide({})

Prefer query search when you do not know the topic name. Use maxTokens to keep responses focused (recommended: 5000-10000).

Input Schema

NameRequiredDescriptionDefault
queryNoNatural language description of the Three.js or React Three Fiber task or problem.
topicNoSpecific Three.js topic or alias, e.g. fundamentals, shader-effects-recipes, drei-catalog, webgpu-and-tsl.
contextNoOptional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result.
maxTokensNoMaximum tokens to return. Truncates content to fit. Recommended: 5000-10000.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.0

TDQS

A4.8/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Beyond the read-only annotations, it discloses useful behavioral details: query search is for unknown topics, maxTokens truncates returned content, context is analytics-only and does not change results, and an empty call returns the full topic index. This is rich operational context for an agent.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The definition is front-loaded and organized into clear modes. It is somewhat long because it enumerates many covered topics, but that enumeration helps an agent understand retrieval scope rather than feeling like filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a read-only guide-loading tool with no output schema, the description is complete: it explains what content is available, how to request topics or search, how to audit scenes, and how maxTokens affects responses.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is already 100%, so the baseline is 3. The description adds practical meaning by giving example topic values, alias usage, query-search examples, and a recommended maxTokens range, though it does not deeply explain the context parameter beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific verb and resource: 'Load implementation guidance for Three.js and React Three Fiber projects.' It distinguishes itself from sibling design tools by naming get-ui-principle and get-ux-principle as complements rather than substitutes.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It gives explicit when-to-use guidance across planning, building, debugging, optimizing, auditing, and procedural modeling. It also names alternatives and tells the agent to prefer query search when the topic name is unknown.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools