Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
Captures du projetÀ propos de ce 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.
Pourquoi ce choix
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.
À quoi il sert
- 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.
| Commande | À quoi elle sert |
|---|---|
npx skills add enesozturk/dimensional-drawing | Select the drawing and motion skills and keep their bundled files. |
Avant de l’utiliser
- 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.
Agents compatibles
Sources et références
Les sources originales sont liées ci-dessous. Les pistes pratiques sont des suggestions de la rédaction de SkillHey.
