ArchestackBest of Vibe Coding: List on GitHub ↗ (opens in a new tab)

#358358th of 389 in Skills, plugins and promptsFor image, video and design, image and design

dimensional-drawing

Agent skills that draw UI components as Apple-style dimensional drawings

Repository on GitHub ↗ (opens in a new tab)
Stars
2.1k
License
MIT
Last commit
Oct 2026
Language
HTML
Stars, last 3 weeks+2,046
20 Oct 2026: 6 stars27 Oct 2026: 1,285 stars3 Nov 2026: 1,781 stars10 Nov 2026: 2,052 stars

6 on 20 Oct 20262,052 on 10 Nov 2026

From GitHub's daily star counts.

Checked on GitHub.

Overview

Two agent skills. One takes a UI component (repo file, Storybook story, URL or screenshot) and produces a single-page HTML technical drawing with paddings, gaps, radii, layers and viewport placement. The other animates a finished sheet into a roughly 10 second film, rendered in Claude's Motion artifact or headlessly with Playwright and ffmpeg.

Who it is for: Frontend and design-system engineers documenting components with coding agents

Strengths

  • Output is one self-contained HTML sheet; card and dialog examples are included
  • Uses named variables like S1 and R2; unknown values stay [TBD]
  • Headless renderer works without Claude, using Node 18+, Playwright and ffmpeg
  • Installs into Claude Code skills folder or via the skills CLI for other agents

Weaknesses

  • Motion timing tuned for Claude's Motion artifact; other animation libraries are untested
  • Only two example components (card, dialog) are shipped
  • No tagged release; drawing quality depends on the agent running the skill
  • Headless MP4 export needs Playwright and ffmpeg installed

What it needs

  • no GPU
  • Needs Node 18+ (headless motion), ffmpeg (headless motion), Playwright with Chromium (headless motion)
  • Models: Claude, Codex, Cursor, Gemini CLI

Quick answers

Is dimensional-drawing open source?

Yes. Its code is on GitHub under the MIT license.

Also in Skills, plugins and prompts

See all 389
Also in Skills, plugins and prompts
RankProjectScore
1claude-memPersistent cross-session memory plugin for Claude Code and other coding agents116.1k stars+16,557 (+17%) in 30 daysApache-2.097 out of 100
2impeccableDesign skill with 24 slash commands for AI coding agents' frontend output Live demo ↗ (opens in a new tab)108k stars+28,186 (+35%) in 30 daysApache-2.097 out of 100
3gstackMarkdown slash-command skills that give Claude Code planning, review, QA and ship roles141.2k stars+5,515 (+4.1%) in 30 daysMIT96 out of 100
#4rufloAgent harness adding swarms, memory and hooks to Claude Code and Codex Live demo ↗ (opens in a new tab)81.5k stars+7,413 (+10%) in 30 daysMIT96 out of 100
#5cavemanShortens coding-agent replies and compresses tool output before the model reads it Live demo ↗ (opens in a new tab)119k stars+8,390 (+7.6%) in 30 daysApache-2.095 out of 100