dimensional-drawing skill
A skill that draws a UI component as an Apple-style sheet with spacing, radii and layers, plus a short film from it.
- 2,084 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The main skill reads a source file and writes one HTML file. The film without Claude runs `render.mjs` with Chromium and ffmpeg.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/dimensional-drawingDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The main skill reads a source file and writes one HTML file. The film without Claude runs `render.mjs` with Chromium and ffmpeg.
This is third-party code. Review the repository files before installing.
What it does
The `dimensional-drawing` skill turns a UI component into a one-page technical drawing modeled on Apple's dimensional drawings for accessories. The source can be a repository file, a Storybook story, a page URL or a screenshot. The output is one self-contained HTML file: a title block with key variables on top, then a sheet with a plan view, exploded layers, corner details and value tables. The drawing shows how the component is built, not what it says: slots such as `TITLE SLOT · FLEX` stand in for text. Dimensions are written as variables, for example `S1` or `R2 = R1 − B − S6`, and a table links each variable to its value. Unknowns stay marked `[TBD]`, and the agent does not invent values. The drawing is monochrome, with line weight, dashes and hatching carrying the differences. A second skill, `dimensional-drawing-motion`, turns a finished sheet into a film of about 10 seconds: the camera moves over the sheet while lines draw in and layers lift into the exploded view.
Who it is for. Designers and frontend developers who need an exact drawing of a card, dialog or button for handoff, review or design-system documentation.
Good fit when
- A developer gets a dialog mockup and wants spacing, radii and viewport behavior on one sheet.
- Design-system documentation needs a card anatomy diagram with a variable table.
- A component review goes through the drawing: layers, nested corners, shadow and envelope.
- A sheet must become a short film for a post or a presentation.
- A physical product needs three views and a section drawn from published dimensions.
Not a fit when
- A colored illustration or page layout is wanted: the drawing is monochrome and covers one component.
- Real copy and content must be drawn: the skill draws slots in their place.
- The film is needed in Remotion, Motion Canvas, GSAP or Lottie: the author has not tested them.
Example request
Make a dimensional drawing of the Card component in `src/components/Card.tsx`, in the style of the repository examples.Limitations
Motion is tuned for Claude's Motion artifact, which is the primary route. Without Claude the film is built by the `render.mjs` script in `adapters/headless`: it needs Node 18 or newer, Playwright with Chromium and ffmpeg. The author tested only this stack, and other animation libraries are untested. The drawing is produced in one light theme, and dimensions missing from the source stay `[TBD]` and are drawn as a proportional schematic. For physical products the agent takes only published specifications and flags source disagreements with the word `CONFLICT`.
How to disable. Delete the `dimensional-drawing` and `dimensional-drawing-motion` folders from `~/.claude/skills/` and start a new session.
FAQ
How do I install the skill in Claude Code?
Run `git clone https://github.com/enesozturk/dimensional-drawing`, then `cp -r dimensional-drawing/skills/* ~/.claude/skills/`. For Codex, Cursor and Gemini CLI the author suggests the `skills` CLI: `npx skills add enesozturk/dimensional-drawing`.
What comes out?
One HTML file: a title block with key variables, then a sheet with a plan view, exploded layers, details and tables. On claude.ai it is published as an Artifact.
How do I build the film without Claude?
In `skills/dimensional-drawing-motion/adapters/headless` run `npm install`, then `node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4`. Node 18 and ffmpeg are required.
Does the skill work with physical objects?
Yes. The agent draws three views and a section in millimeters from published dimensions and leaves the rest marked `[TBD]`.
Can a drawing be made from a screenshot?
Yes. The source can be a repository file, a Storybook story, a page URL or a screenshot.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns reference UIs into a structured design profile in JSON and generates matching UI from your content
A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
README in short
The author took inspiration from Apple's dimensional drawings, which case makers rely on. The repository teaches an agent to draw interface components the same way and includes two examples: a card and a dialog.