Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Projekt-ScreenshotsÜber diesen 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.
Warum wir es empfehlen
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.
Wobei es hilft
- 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.
| Befehl | Wofür er hilfreich ist |
|---|---|
npx skills add enesozturk/dimensional-drawing | Select the drawing and motion skills and keep their bundled files. |
Vor der Nutzung
- 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.
Unterstützte Agents
Quellen und Referenzen
Die Originalquellen sind unten verlinkt. Praktische Einstiegsideen sind redaktionelle Vorschläge von SkillHey.
