Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Capturas del proyectoAcerca de este 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.
Por qué lo elegimos
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.
Para qué sirve
- 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.
| Comando | Para qué sirve |
|---|---|
npx skills add enesozturk/dimensional-drawing | Select the drawing and motion skills and keep their bundled files. |
Antes de usarlo
- 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.
Agentes compatibles
Fuentes y referencias
Las fuentes originales se enlazan a continuación. Los puntos de partida prácticos son sugerencias editoriales de SkillHey.
