Animated dialog specification drawing with dimension lines, camera pullbacks, and an exploded layer view.
プロジェクトのスクリーンショットこのスキルについて
Two skills turn UI components into monochrome HTML specification sheets and animate finished drawings with camera moves and exploded layers.
おすすめする理由
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.
コレクション内のスキル
2 件のスキル- 表示 →
Dimensional Drawing Sheets
Create a self-contained HTML specification sheet with monochrome SVG views, measured variables, exploded layers, and detailed component geometry.
- 表示 →
Dimensional Drawing Motion
Animate a finished dimensional drawing into an 8–15 second film with progressive strokes, camera moves, and lifted layers, using Claude Motion or a headless renderer.
役立つこと
- Document component spacing, corner radii, layers, and responsive placement.
- Present a completed technical drawing as a short monochrome animation.
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.
Animate a completed specification sheet
The motion entrypoint takes a completed drawing and adapts the supplied scene and stylesheet into an 8–15 second film. Strokes appear first, the camera pulls back, layers lift into an exploded view, and the full sheet resolves. The reference film lasts 11 seconds.
Use the Claude Motion adapter when available, or the bundled Playwright and FFmpeg renderer. Its scene is a pure function of time, so frames can be inspected independently. Music and narration are added only when requested.
| コマンド | 用途と使いどころ |
|---|---|
cd skills/dimensional-drawing-motion/adapters/headless && npm install | Install the headless renderer dependencies in the cloned repository. |
node render.mjs --scene ../../templates/scene-dialog.js --css ../../templates/base.css --out dialog.mp4 | Run from the headless adapter directory to render the author’s reference film. |
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.
| コマンド | 用途と使いどころ |
|---|---|
npx skills add enesozturk/dimensional-drawing | Select the drawing and motion skills and keep their bundled files. |
使う前に
- 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.
- For headless animation, use Node.js 18+, Playwright with Chromium, and FFmpeg. Claude Motion is the author’s primary target; Remotion, Motion Canvas, GSAP, and Lottie integrations are not tested upstream.
対応エージェント
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
