Skills
A skill is a single-file spec written for a coding agent: no background, just what to build and what gets rejected at review. Hand the file over and the agent works from it — you don't have to restate the requirements in chat.
Two are published here, both downloadable:
| File | What it covers | When to hand it over |
|---|---|---|
| design.md | The design system: semantic tokens, type, radii and spacing, component baselines, plus a contract and a self-check for agents. DESIGN.md format | Whenever an agent writes generator UI |
| 3d-preview-skill.md | three.js 3D preview: architecture, interaction, render quality, acceptance checklist | When the generator ships a 3D preview |
Both are also one click away from the top right of their own sections (Design, 3D Preview).
design.md has to reach the agent together with the code it describes. It carries the templates' full addresses and one hard rule: fetch the matching template before writing any markup. How you hand it over depends on whether your agent can fetch a URL.
- It can fetch. Give it
design.mdalone —https://dev.atomm.com/design.md. It reads the decision table on Layout, fetches the template it needs (swapping in the layout it picked — for examplehttps://dev.atomm.com/templates/layout-3-generate.html) and builds on that file. - It cannot fetch. Paste in
design.mdand the one template that matches your layout. Without the template the agent is required to stop and ask you for it rather than invent one — the difference between a slow answer and a wrong one.
Either way the project ends up with two files:
your-project/
├── design.md # the spec — the agent reads this first
└── index.html # a copy of the layout template that matches your generator
# <style> tokens + component classes — don't rewrite them
# <script> the select contract (keep) + demo wiring (replace)
Fetch one template, not all five. They share the same stylesheet and the same script — 70KB of the ~90KB in every file — so fetching them all costs context and adds nothing. Pick your base with the decision table on Layout; if you later need a block only another layout has, fetch that one then.
Don't hand over a design-file link or screenshots instead. A screenshot carries the look but none of the numbers, so the agent guesses every colour, size and spacing — differently each time. The templates have the numbers.
Handing it to Claude Code
Save it as SKILL.md under your project's skills directory and the agent loads it on its own when the task calls for it:
.claude/skills/atomm-3d-preview/SKILL.md
The 3D preview file already downloads as SKILL.md — create the directory and drop it in.
Handing it to other tools
Cursor, Copilot and friends: keep the file in the repo (say docs/atomm-3d-preview.md) and @-reference it in chat. For a one-off, pasting the whole file into the conversation works too.
How this differs from LLMs.txt
- LLMs.txt indexes the whole documentation set. It fixes "the agent doesn't know what atomm can do."
- A skill is the spec for one job. It fixes "the agent knows, but what it built won't pass review."
Building a 3D preview? Hand over both: llms.txt to learn the platform, the skill to get the details right.