How to use the 3D Cloth Material agent skill

What an agent skill is and what this one does

An agent skill is a folder with a SKILL.md file that an AI agent loads when a request matches the skill's description. Once installed, the agent follows the skill's rules instead of guessing from general knowledge.

This skill tells the agent how to make cloth look like cloth rather than a plastic sheet or a flat coloured plane. It describes a thread-level weave texture, sheen and anisotropic highlights, folds that do not stretch the texture, hems with thickness, stitches, seams, frayed raw edges, fold occlusion, dye and wear variation, and light passing through thin fabric.

It is a rendering guide, not a physics simulation. It does not make cloth fall, flap or collide with objects. For that you need a separate simulation step, and the skill says to keep its material rules after simulating.

• Requires Three.js r169 and a browser with WebGL.
• Targets a vanilla JavaScript environment for the demo.
• The skill is for Three.js only; other 3D pipelines or game engines are outside its rules.
• Gives code guidance, not finished 3D models or textures.

Install the 3d-cloth-material skill

Download the ZIP for the skill from this page and unzip it. The folder contains agents/openai.yaml, demo.html, PROMPT.md and SKILL.md.

For a personal install, unzip the skill into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder instead.

In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/ (available across your projects).
• Project: .claude/skills/ inside the project folder.
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP.

Trigger the skill with a natural request

You do not need a special command. Name the skill with a dollar sign, as the included prompts do, or describe the fabric problem directly. The description lists triggers such as linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths and tapestries, plus symptoms such as a plastic sheet or a stretched texture.

Be specific about the fabric and the symptom. The more context you give about the scene, the better the agent can choose a weave and edge treatment.

• Use $3d-cloth-material to make this cloth read as woven linen, not a plastic sheet.
• Use $3d-cloth-material for a silk banner in a dark room with a lit paper window behind it.
• Use $3d-cloth-material to add a heavy wool blanket with a twill weave, a stitched seam and a raw fringe.
• Use $3d-cloth-material to fix a stretched, blurry fabric texture on a draped model.

Choose a fabric: linen, silk or wool

The skill includes a constants table that sets a weave, thread count, pitch, sheen, roughness and edge treatment for each fabric. Linen uses a plain weave with a raw fray edge. Silk uses a 5-harness satin with a 3.5 cm hem. Wool uses a twill with a 5 cm hem.

You can ask the agent to pick the fabric or to follow a named one. The table values are starting points taken from the skill, and you can adjust them in your own scene.

• Linen: plain weave, 1.6 mm pitch, roughness 0.90, sheen 0.55, raw fray 3 cm.
• Silk: 5-harness satin, 0.7 mm pitch, roughness 0.36, sheen 0.5, hem 3.5 cm.
• Wool: twill, 2.6 mm pitch, roughness 0.96, sheen 1.0, hem 5 cm.

Check the result in the reference demo

The skill ships with demo.html, which the skill calls the reference. Open it in a WebGL-capable browser to see the intended look before asking the agent to adapt it.

When the agent edits your scene, check that the weave stays fixed to the cloth as it moves, that folds do not show black slits, and that the hem has visible thickness in a close-up.

• Open demo.html in a browser that supports WebGL.
• Look at a close-up for weave, hem thickness and stitching.
• Move or wind the cloth to confirm the weave does not crawl.