Give it a UI component, get back a one-page technical drawing of it.
Paddings, gaps, corner radii, layers and viewport placement, measured and labeled like Apple's dimensional drawings.

Install · Use it · Make it move · Examples

Apple publishes dimensional drawings for every device so accessory makers can build cases that fit. They are calm, dense and beautiful: one sheet, a few views, tiny detail circles, numbers everywhere.

This repo teaches your agent to draw your components the same way. A card or a dialog becomes a spec sheet you could hand to anyone and they would rebuild its architecture: paddings, gaps, radii, layers, how it sits in the viewport. Copy and content are left out on purpose, so the drawing stays true when the text changes.

skills/
├── dimensional-drawing/          the drawing skill
│   ├── SKILL.md
│   └── examples/                 card + dialog sheets (single HTML files)
└── dimensional-drawing-motion/   turns a sheet into a ~10 s film
    ├── SKILL.md
    ├── templates/                reference scene + stylesheet
    └── adapters/
        ├── claude-motion.md      Claude's Motion artifact (primary)
        └── headless/             Playwright + ffmpeg, no Claude needed

Claude Code

git clone https://github.com/enesozturk/dimensional-drawing
cp -r dimensional-drawing/skills/* ~/.claude/skills/

claude.ai / Claude desktop: zip a skill folder (for example skills/dimensional-drawing) and add it under Settings → Capabilities → Skills.

Any other agent (Codex, Cursor, Gemini CLI, …): use the skills CLI, or point your agent at the SKILL.md files.

npx skills add enesozturk/dimensional-drawing

Ask for a drawing and point at the source (a repo file, a Storybook story, a URL, a screenshot):

Make a dimensional drawing of the Card component in src/components/Card.tsx

Draw the anatomy of our settings dialog, same style as the examples

You get a title block with the key variables on top, then one dense sheet: notes, plan view, exploded layers, detail views (nested corner, radii, body), and variable tables.

It works for physical things too (third-angle views, mm, published specs only). Try a thermos 🫖.

The motion skill animates a finished sheet like a pen drawing it while a camera moves over the paper:

1. close-up on the header as its lines draw in
2. pull back to the plan view while the rest draws
3. layers lift off the plan into the exploded view (strokes first, fills after, so nothing flashes)
4. pull back to the full sheet as the remaining views draw in

The scene is a pure function of time, so it runs in two places:

Dialog: fixed width, scrim, viewport placement, header controls, footer actions

Card: flexible width, body well, nested corner, shadow envelope

Open the HTML versions in skills/dimensional-drawing/examples. The full film is assets/dialog-motion.mp4.

• Apple's accessory dimensional drawings, the north star
• Andreas Storm, whose post started this

MIT © Enes Ozturk. Draw all the things.