
Implicit CAD
FreeCreate and render implicit CAD models in JavaScript.
Free · Opens the source repo
What Implicit CAD does
Implicit CAD is a skill designed for generating and manipulating implicit CAD models that can be directly utilized in CAD Viewer as browser-native JavaScript modules. The primary output of this skill is a file with the extension .implicit.js or .implicit.mjs, which leverages GLSL signed-distance fields and shader primitives to define complex geometries. This skill is particularly useful for developers and designers who are looking to explore non-traditional CAD workflows and create models that can be rendered in real-time within a browser environment.
The skill supports a variety of built-in GLSL helpers for creating primitives, performing boolean operations, and applying modifiers. Users can define parameters and animations within their models, allowing for dynamic and interactive designs. The authoring process involves writing a natural-language brief followed by the creation of the implicit model, which can include procedural color definitions and animation sequences. This flexibility enables the crafting of visually rich and complex models that can evolve over time.
While the skill is powerful, it is marked as experimental. Users are encouraged to use conventional CAD workflows as a default unless there is a specific need for implicit modeling. The skill includes a visual verification tool to aid in the quick assessment of models, ensuring that the geometry and rendering behave as expected. This feature is essential for iterative design processes, allowing for rapid adjustments and visual feedback without the need for extensive export cycles.
Overall, Implicit CAD is ideal for those looking to push the boundaries of traditional CAD design, providing a unique set of tools for creating and rendering implicit models in a modern web-based context.
When to use it
Use this skill when you need to create dynamic, browser-friendly CAD models that leverage implicit modeling techniques.
When not to use it
Avoid this skill for standard CAD workflows or when working with conventional file formats like STEP, as it is designed for experimental use.
What you can build with it
Dynamic Model Creation
Easily create 3D models that change over time using animations defined within the implicit CAD files.
Browser-Based Rendering
Render complex geometries directly in the browser, making it suitable for web applications that require real-time visualization.
Rapid Prototyping
Utilize the visual verification tool to quickly assess and iterate on model designs without lengthy export processes.
How to install Implicit CAD
View source1. Install with the skills CLI
npx skills add earthtojake/text-to-cad/implicit-cad --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by earthtojakeImplicit CAD
Use this skill for implicit CAD models that should run directly in CAD Viewer as browser JS modules. The primary artifact is a .implicit.js or .implicit.mjs.
This skill is experimental. ALWAYS prefer conventional STEP-first CAD workflows unless the user explicitly asks for an implicit model.
File Format
An implicit CAD file is an ES module exporting an implicit.js/0.1.0 object. The schema source of truth lives in the bundled package at scripts/packages/implicitjs/src/lib/implicitCad/schema.js; scripts/lib/implicit-cad.mjs re-exports it as SCHEMA for helper-authored modules.
export default {
schema: "implicit.js/0.1.0",
name: "rounded capsule block",
glsl: `
float sdf(vec3 p) {
float sphere = implicit_sphere(p, vec3(0.0), 22.0);
float block = implicit_box_centered(p, vec3(34.0, 18.0, 18.0), vec3(0.0));
return implicit_union_round(sphere, block, 3.0);
}
vec3 color(vec3 p, vec3 normal) {
return mix(vec3(0.20, 0.55, 0.95), vec3(0.95, 0.45, 0.20), smoothstep(-15.0, 20.0, p.z));
}
`,
};
Models may also declare params and animations. Parameter definitions use the implicitjs control schema: number, boolean, enum/select, color, string, and button. Number, boolean, color, and button params automatically become GLSL uniforms with the same name; do not add a separate uniforms object. bounds is optional and is estimated from the SDF when omitted; add explicit bounds only when the auto estimate is too broad, too slow, or misses an unusual field. bounds and render may be JavaScript functions that receive { ...params, params, animation, animationState, elapsedSec, progress, t }.
Built-in GLSL helpers use the implicit_* namespace, for example implicit_sphere, implicit_box_centered, and implicit_union_round.
export default {
schema: "implicit.js/0.1.0",
name: "breathing orb",
params: {
radius: {
type: "number",
label: "Radius",
min: 12,
max: 34,
default: 22,
unit: "mm",
},
},
animations: {
breathe: {
label: "Breathe",
duration: 3,
update({ progress, set }) {
set("radius", 18 + Math.sin(progress * Math.PI) * 10);
},
},
},
render: { steps: 224, epsilon: 0.004 },
glsl: `
float sdf(vec3 p) {
return length(p) - radius;
}
vec3 color(vec3 p, vec3 normal) {
return mix(vec3(0.10, 0.58, 0.95), vec3(1.0, 0.34, 0.12), smoothstep(-18.0, 18.0, p.z));
}
`,
};
Do not copy bundled helper files out of this skill. If helper functions are useful, use scripts/lib/implicit-cad.mjs during authoring or emit standalone GLSL into the final .implicit.js/.implicit.mjs module.
Authoring Workflow
- Write a natural-language modeling brief with dimensions, coordinate assumptions, procedural color intent, and visual checks.
- Create or edit the user-specified
.implicit.js/.implicit.mjsmodule. - Use
scripts/lib/implicit-cad.mjshelpers for primitives and field composition when useful:- primitives:
sphere,circle,boxCentered,plane,lineSegment,torus,axis,cylinder,cylinderCapped,capsule,cone,coneCapped,coneCapsule - booleans/blends:
unionSharp,intersectSharp,unionRound,intersectRound,unionChamfer,intersectChamfer,unionExp,intersectExp,unionLpNorm,intersectLpNorm,unionRvachev,intersectRvachev,difference - modifiers/lattices:
shell,rotateAxis,repeatCentered,remapCylindrical,cubicGrid,squareHoneycomb,squareHoneycombReinforced,squareDiagonalHoneycomb,octetHoneycomb,hexagonalHoneycomb,triangularHoneycomb - TPMS fields:
tpmsGyroid,tpmsSchwarz,tpmsDiamond,tpmsLidinoid,tpmsNeovius,tpmsSplitP,tpmsIwp - shader wrappers:
distanceFunctionemitsfloat sdf(vec3 p),colorFunctionemitsvec3 color(vec3 p, vec3 normal)
- primitives:
- Add optional
paramsandanimationsfor dimensions, toggles, palettes, mode switches, and animated exploration. Use param names directly in GLSL; the runtime declares matching uniforms. - Add optional procedural color with
vec3 color(vec3 p, vec3 normal)when the model benefits from local material variation. Keep color values in 0..1 RGB. - Rely on automatic SDF bounds first. Add explicit bounds when an animated, periodic, translated, or very thin model needs tighter or more reliable framing/export sampling.
- Run the lightweight visual verification flow below after visible geometry, color, params, animation, bounds, render, or export-affecting changes.
- Run
node scripts/export.mjs --input <model.implicit.js> --format glbwhen a mesh artifact is needed for downstream viewers, slicers, or file handoff.
Visual Verification
Use this skill's snapshot tool as a fast visual check, not as a substitute for deterministic import/export validation. Keep the packet small and purposeful.
For simple static edits, one image is enough:
node scripts/snapshot.mjs --input models/implicit-cad/<model>.implicit.js --output /tmp/implicit-review/<model>.png
For topology, periodicity, thin features, Boolean blends, object identity, color, or suspected framing issues, render a small packet in one CLI call so the browser, module, and runtime model are reused:
node scripts/snapshot.mjs --job - <<'JSON'
{
"input": "models/implicit-cad/<model>.implicit.js",
"mode": "view",
"render": { "sizeProfile": "simple", "frameMargin": 1.55 },
"graphics": { "modelColors": true, "detail": 1.2, "shadows": true, "ambientOcclusion": true },
"outputs": [
{ "path": "/tmp/implicit-review/<model>-iso.png", "camera": "iso" },
{ "path": "/tmp/implicit-review/<model>-front.png", "camera": "front" },
{ "path": "/tmp/implicit-review/<model>-top.png", "camera": "top" },
{ "path": "/tmp/implicit-review/<model>-right.png", "camera": "right" }
]
}
JSON
Add implicitParameters at the job level for one parameter state, or on individual outputs when the point of the review is comparing parameter variants. Use render.frameMargin around 1.5 when a model is close to the edge; if a snapshot still appears clipped, first check whether the source bounds is cutting the raymarch itself.
For animations, create a short GIF only when motion is part of the request:
node scripts/snapshot.mjs --job - <<'JSON'
{
"input": "models/implicit-cad/<model>.implicit.js",
"mode": "animate",
"outputs": [{ "path": "/tmp/implicit-review/<model>-animation.gif" }],
"implicitAnimation": { "activeId": "<animation-id>", "durationSeconds": 3, "fps": 12 }
}
JSON
Review the resulting PNG/GIF for centered framing, no top/bottom/side clipping, expected silhouette and topology, visible parameter differences, GLSL-defined colors, no unexpected holes/gaps, and smooth enough edges for the requested graphics settings. If the snapshot reveals a mismatch, fix the implicit source or bounds and rerun only the relevant packet.
Handoff
After completing implicit CAD work that creates or modifies .implicit.js, .implicit.mjs, .glb, .stl, or .3mf artifacts, you must ALWAYS hand the explicit file path(s) to $cad-viewer when that skill is installed. $cad-viewer must start CAD Viewer if it is not already running and return link(s) to the relevant created or updated file(s); include those live viewer link(s) in the final response. If $cad-viewer is unavailable or startup fails, report that instead of silently omitting the handoff.
When verification snapshots are generated, also include the saved PNG/GIF snapshot(s) in the final response. If no snapshot applies, or if snapshot generation fails, say why and report the deterministic validation that still ran.
Snapshot Tool
From this skill directory:
node scripts/snapshot.mjs --input <model.implicit.js> --output <snapshot.png>
node scripts/snapshot.mjs --input <model.implicit.js> --output <orbit.gif> --mode orbit
node scripts/snapshot.mjs --job <render-job.json>
node scripts/snapshot.mjs --job - --json
node scripts/snapshot.mjs --help
Use node scripts/snapshot.mjs --help for the complete current command interface. The tool appends a UTC timestamp before the output extension. JSON jobs may be a single job, one job with multiple outputs, a raw array of jobs, or { "jobs": [...] }; prefer a multi-output job for review packets because it avoids rebuilding the same artifact for each camera.
Export Tool
From this skill directory:
node scripts/export.mjs --input <model.implicit.js> --format glb
node scripts/export.mjs --input <model.implicit.js> --output <mesh.stl> --resolution <resolution>
node scripts/export.mjs --input <model.implicit.js> --format 3mf --params '<parameter-json>' --json
node scripts/export.mjs --help
Supported export formats are glb, stl, and 3mf. The exporter samples the implicit SDF inside the declared bounds and extracts a triangle mesh. If --output is omitted, the mesh is written next to the source file using the same stem, such as <model>.glb for <model>.implicit.js. Use node scripts/export.mjs --help for the complete current command interface.
Frequently asked questions about Implicit CAD
Similar skills
CAD Generation and Inspection
Create and validate parametric CAD models from natural language.
CLI for FreeCAD
Harness FreeCAD's capabilities through a comprehensive CLI.
3D & CAD Matrix
A comprehensive CLI tool for 3D modeling and CAD workflows.
Blender CLI Interface
Edit 3D scenes efficiently from the command line.
OpenSCAD
Create and render 3D models with ease.
WebGL 3D Object
Create stunning 3D visuals with real geometry and lighting.
