Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Project screenshotsAbout this Skill
Draw one UI component or physical product on a dense, structured specification sheet. Read real source material, measure what can be verified, and document the component with variable-based dimensions and formula checks.
Why we picked it
A reusable workflow with supplied drawing examples and a motion scene, explicit measurement rules, and visual checks. Review the selected task’s browser and rendering requirements.
What it helps with
- Build anatomy, redline, or specification sheets for cards, dialogs, controls, and layouts.
A drawing that describes structure
The workflow produces monochrome SVG diagrams inside a self-contained HTML sheet. A title block, plan view, exploded layers, corner details, and variable tables describe spacing, radii, layers, and viewport placement. UI copy becomes neutral HUG, FLEX, or FILL slots.
Dimensions use variable codes and checked formulas. Missing measurements stay [TBD], and branding is omitted unless requested. Physical products use sourced dimensions and third-angle views.
Check the sheet before delivery
Every dimension code must appear in a table and every derived formula must close. Render the HTML at 1800 pixels wide to check overlapping labels and sheet boundaries, then deliver the HTML file or a Claude artifact. Screenshots can support schematic drawings; they do not establish unavailable exact measurements.
Install the upstream skills
The two catalog members are task entrypoints in one repository. The drawing task creates the sheet; the motion task consumes a finished sheet. This listing links to the author’s free MIT-licensed resources.
| Command | What it helps with |
|---|---|
npx skills add enesozturk/dimensional-drawing | Select the drawing and motion skills and keep their bundled files. |
Before you use it
- Provide component source, a Storybook story, a URL, a design file, or a screenshot. Unavailable measurements remain [TBD]; physical dimensions require published specifications.
- Keep each skill folder with its examples, templates, and adapters. Browser rendering is used to inspect measurements and check the finished sheet.
Supported agents
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
