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 skeleton it needs (swapping in the layout it picked — for examplehttps://dev.atomm.com/templates/layout-3-generate.skeleton.html) and builds on that file. - It cannot fetch. Paste in
design.mdand the one skeleton 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 skeleton for your layout
# <style> tokens + component classes — don't rewrite them
# match the structure and the class names; the logic is yours
Fetch one template, not all five. They share the same stylesheet, and it is most of every skeleton by weight — 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.