Qiaomu Tldraw Skill

Official-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.

6 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add joeseesun/qiaomu-tldraw-skill --skill qiaomu-tldraw-skill

Manual install

git clone --depth 1 https://github.com/joeseesun/qiaomu-tldraw-skill.git /tmp/qiaomu-tldraw-skill
mkdir -p ~/.claude/skills
cp -r /tmp/qiaomu-tldraw-skill/. ~/.claude/skills/qiaomu-tldraw-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Qiaomu tldraw Skill

把需求交付为真实、可编辑、可验证的 tldraw 画布或画布程序，而不是只描述怎么画。

Copyright (c) 向阳乔木

## Router Rules

先判断交付面，再读取对应 reference。不要路由到社区 skill 或第三方包装器：

- 正在运行的 tldraw offline 画布：读 [Official Offline API](references/official-offline-api.md) 与 [Canvas Workflows](references/canvas-workflows.md)；优先读取运行中应用的 `/readme` 和 live recipe。
- 根据图片严格复刻：直接执行 [Visual Quality](references/visual-quality.md) 的测量、语义重建和同裁切比较。
- 从需求或草图创作：直接执行原生 shape 优先的创作流程，不要求另一个 skill。
- 可点击、动画、模拟器、仪表盘、自定义形状：读 [Durable Scripts](references/durable-scripts.md)。
- React / TypeScript tldraw SDK 应用：读 [Official CLI](references/official-cli.md)、[Official Docs](references/official-docs.md) 与 [SDK Apps](references/sdk-apps.md)。
- 升级现有 tldraw SDK：读 [SDK Migration](references/sdk-migration.md)，同步官方 releases 文档后再迁移；不要凭记忆猜 API。
- 只要 PNG/SVG 图，不需要 tldraw 可编辑源文件：不要触发本 skill。

先运行环境检查：

```bash
python3 scripts/qiaomu_tldraw.py doctor
```

SDK / API 工作开始前同步或搜索官方文档：

```bash
python3 scripts/qiaomu_tldraw.py official-info
python3 scripts/qiaomu_tldraw.py docs-sync --bundle index --bundle docs --bundle examples --bundle releases
python3 scripts/qiaomu_tldraw.py docs-search "custom ShapeUtil" --bundle docs
```

## Compact Workflow

1. 明确交付：现有画布修改、新建 `.tldraw`、参考图复刻、耐久交互，或 SDK 应用。
2. 锁定目标文档、页面、选择区和输出路径；多窗口时按名称、`documentId`、路径交叉确认。
3. 读取真实记录、运行中应用的官方 recipe，或缓存的官方 SDK docs；再选择原生 shapes、`/exec`、document script 或 SDK 工程。
4. 先搭语义结构与视觉层级，再补连接、状态、动画和细节。
5. 保存并验证记录、绑定、lint、脚本状态、真实窗口和交互状态。
6. 交付路径、截图、可编辑范围、验证结果、限制和恢复办法。

## Non-Negotiables

Read the full skill on GitHub

Details

Skill name: qiaomu-tldraw-skill
Repository: joeseesun/qiaomu-tldraw-skill
License: MIT
Repo updated: 29 July 2026

FAQ

What does the Qiaomu Tldraw Skill skill do?

How do I install the Qiaomu Tldraw Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add joeseesun/qiaomu-tldraw-skill --skill qiaomu-tldraw-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Qiaomu Tldraw Skill popular?

It lives in joeseesun/qiaomu-tldraw-skill, which has 6 GitHub stars and 0 forks.

Related skills

Quasar Vue3

felixyakubov91/claude-quasar

Comprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.

Frontend & Design

Oh My Design

favorPotato/oh-my-design

Use this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against.

Frontend & Design

Salgadoia Web Design Engineer Pro

Luispitik/salgadoia-web-design-engineer-pro

Skill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-

Frontend & Design

Interface Polish

Tsavsar/interface-polish

A checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.

Frontend & Design

Screenshot to Design System

WCF900905/screenshot-to-design-system

Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.

Frontend & Design

Image First Frontend

jinshiqwq/image-first-frontend

Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.