dimensional-drawing

dimensional-drawing turns a UI component into an engineering-style spec sheet. It's two free, MIT-licensed agent skills: one teaches Claude (or Codex, Cursor, Gemini CLI) to measure a card or dialog and draw it like Apple's accessory dimensional drawings, with paddings, gaps, corner radii and layers labeled; the other animates the sheet into a short film of a pen drawing it.

Install is a copy into ~/.claude/skills/, or npx skills add enesozturk/dimensional-drawing for other agents. Point it at a component file, Storybook story or screenshot and you get one self-contained HTML file. Dimensions are variables (S1, R2) with value tables, and anything it can't measure is marked [TBD] instead of guessed. The motion skill is tuned for Claude's Motion artifact; the headless path needs Node, Playwright and ffmpeg.

Nothing to host and no paid tier; you pay for the agent running it. Solo designers and small teams documenting a design system: free. Larger teams: a handoff artifact that sits next to Figma, not instead of it.

The catch: it's one commit from one developer, under a week old. Accuracy depends on your agent actually rendering and measuring the component, so check the numbers before you hand the sheet to anyone.