Guide · Agent skill
How to use the 3D Paper Material agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The 3D Paper Material skill is an agent skill: a packaged set of instructions and a reference demo that teaches an AI agent how to build a convincing paper sheet in Three.js, the JavaScript 3D library. It is for web developers, designers and creative coders who need paper in a browser scene that still looks right in a close-up. After this guide you will know how to install the skill, how to ask for a paper sheet in plain language, and what the agent will produce.
3D Paper MaterialMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the 3d-paper-material ZIP from this page and unzip it.
- 2Place the folder. Put the folder in ~/.claude/skills/ for all projects, or in your project's .claude/skills/ folder for one project. Alternatively, upload it under Settings, Capabilities, Skills in the Claude apps.
- 3Set up Three.js. Make sure your web scene uses Three.js and that the target browser supports WebGL.
- 4Make your request. Ask for the paper object in plain language, naming the stock, the setting and any macro or back-light needs.
- 5Review the output. Check the generated code, since the skill runs scripts, and open the result in a browser.
- 6Refine by symptom. If something looks off, describe what you see, such as a flat plane or a black fringe, and ask for a fix.
What the skill makes the agent do
The skill tells the agent how to build a paper sheet that reads as paper up close. The source describes three stock types, washi, cotton rag and kraft, each with its own tint, fibre pattern, roughness and thickness. The sheet gets baked fibre and tooth relief, laid and chain lines, a torn deckle edge with frayed fibres, four-layer thickness, a rolled corner and crease, ink that wicks along the fibres, toasted aged edges, contact shadows and back-lit translucency.
The skill's own description says it suits a hung sheet, scroll, page, label, shoji pane or card that must survive a macro close-up. It is not the right tool for paper that burns, which the source assigns to paper-cinder-transition, or for wood, cloth or metal materials, which have their own skills.
Install the skill from the ZIP
Download the ZIP for 3d-paper-material from this page and unzip it. To make it available across your projects, place the unzipped folder in ~/.claude/skills/. To make it available only inside one project, place it in that project's .claude/skills/ folder.
In the Claude apps you can instead upload the skill under Settings, then Capabilities, then Skills.
- Personal install: ~/.claude/skills/3d-paper-material
- Project install: .claude/skills/3d-paper-material inside your project
- Claude apps: Settings → Capabilities → Skills
Check what the package contains
The skill folder holds four files. SKILL.md is the instructions the agent reads. demo.html is a working reference build that the agent can read. PROMPT.md holds example prompts, and agents/openai.yaml is an agent configuration file. The demo is useful even if you never ask for a paper sheet, because it is a detailed Three.js shader example you can study.
- SKILL.md: the core instructions and rules
- demo.html: a working build using MeshPhysicalMaterial and onBeforeCompile
- PROMPT.md: minimal and recreate-the-demo prompts
- agents/openai.yaml: agent configuration
Trigger the skill with natural requests
You do not need a special command. Describe the paper and the setting in plain words. The skill's description lists the situations it matches: a hung sheet, scroll, page, label, shoji pane or card; paper that looks like a flat white plane; paper with ruler-straight edges or no thickness; and paper that does not glow when lit from behind.
The PROMPT.md file in the package gives a model request you can adapt. It names the skill directly with a dollar sign, as in the example below.
- Make a hung sheet of washi in Three.js with a torn edge and back-light.
- My paper looks like a flat white plane with ruler-straight edges. Fix it.
- Build a kraft label for a web scene that holds up in macro close-up.
- Add ink that soaks into the fibres of this card in my Three.js scene.
Use $3d-paper-material to make a hung sheet of washi in Three.js that survives a macro close-upKnow what you need before you start
The skill needs Three.js and a browser with WebGL support. It uses the Canvas 2D API, which browsers include already. The output depends on this stack, so a project without WebGL or Three.js will not benefit from it.
The skill runs scripts and does not use the network, according to the package details. Read the scripts the agent produces before you run them in a live project, and review any code it writes into your site.
- Three.js
- A browser with WebGL support
- Canvas 2D API (built into browsers)
- Runs scripts: yes
- Uses network: no
Tips for better results
Name the stock early. Washi, cotton rag and kraft each change tint, fibre scale, roughness and transmission, so the agent builds different constants for each. Say whether you need the macro mode, since the skill bakes a second, finer map for close inspection.
If the sheet looks wrong, describe the symptom. The skill lists common failures by symptom, such as fringe fibres that vanish, a solid black fringe beyond the edge, relief that disappears up close, or a rolled corner that shows nothing. Quoting one of these gives the agent a direct route to the fix.
- Name the stock: washi, cotton rag or kraft
- Ask for macro mode if the viewer will zoom in
- Describe the symptom, not only the wish
- Point the agent at demo.html as the reference
What people use it for
- A hung washi sheet in a portfolio scene that viewers can inspect up close
- A kraft label on a product page in a browser-based 3D viewer
- A shoji pane that glows when a light sits behind it
- A rolled card with a crease in an interactive art piece
- A reference build for learning Three.js shader techniques
Frequently asked questions
How do I install the 3d-paper-material skill?
Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings, then Capabilities, then Skills.
What does the 3d-paper-material skill require?
It requires Three.js and a browser with WebGL support. It uses the Canvas 2D API, which browsers include. Without WebGL or Three.js the output will not work.
Is the 3d-paper-material skill free?
The package is licensed under MIT. Check the licence file included with the source for the full terms before you use it in a commercial project.
Does the skill use the internet?
The package details say it uses no network access, but it does run scripts. Review the generated code before running it in a live project.
When should I use a different skill instead?
Use 3d-wood-material, 3d-cloth-material or 3d-metal-material for those materials, and paper-cinder-transition when paper burns. For flat paper textures in a 2D layout, a plain image is usually enough.
What is the difference between washi, cotton rag and kraft in this skill?
Each stock has its own tint, fibre scale, roughness, sheen, thickness and transmission. Washi has a warm off-white tint and long fibres, cotton rag is a lighter neutral with a finer tooth, and kraft is a brown tone with heavier relief and less translucency.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a web developer, designer or creative coder building paper in a Three.js scene and want it to hold up in close-up, or if you want a detailed shader example to learn from. Skip it for simple flat paper images in 2D layouts, or if your project does not use WebGL or Three.js.
Download the skill