SkillProof tested Claude skills

Hand-Drawn Diagrams

Generera validerade handritade Excalidraw-diagram, wireframes och mockups

av muthuishere · muthuishere/hand-drawn-diagrams

Testad · Fungerar ★ 9.6/10

Hand-Drawn Diagrams — Generera validerade handritade Excalidraw-diagram, wireframes och mockups

Vad den gör

Genererar handritade Excalidraw-diagram – flödesscheman, förklaringar, wireframes och sidmockups – som giltig .excalidraw JSON, kontrollerar sedan utdata med en medföljande Python-validator innan en hostad redigerings-URL levereras. Utlöses när du ber att skissa, rita eller diagrammatisera ett flöde, en arkitektur eller ett UI i en handritad stil. Standardinställningen är monokrom skissstil, med valfri PNG- och självritande animerad SVG-export via Chrome DevTools MCP eller Playwright.

Testrapport

Den medföljande validatorn är verklig och ren Python, så jag körde den live på två registreringsflödesdiagram. Min Excalidraw JSON utan färdighet kom tillbaka INVALID – en hängande pil som band till ett obefintligt id, en staplad layout och sex stilvarningar som hade förstört det handritade utseendet – medan den schemastyrda versionen passerade med 0 fel. json-schema-referensen plus validate_excalidraw.py fångar strukturella brott före rendering, en mätbar fördel över ad hoc-generering. PNG- och animerad SVG-export kräver uv+Playwright eller chrome-devtools-mcp, men kärnleveransen (en giltig, handritad .excalidraw-fil plus hostad redigerings-URL) fungerar utan dem. Installationsstegen och dokumentationen är grundliga och ärliga om att Playwright-återgången är långsam.

Testad: 2026-07-25 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/muthuishere/hand-drawn-diagrams
mkdir -p ~/.claude/skills
cd hand-drawn-diagrams && cp -r . ~/.claude/skills/hand-drawn-diagrams

Kommandon och exempelprompter

  • /hand-drawn-diagramsGenerera validerade handritade Excalidraw-diagram, wireframes och mockups

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • Sketch a hand-drawn flowchart of our signup flow in Excalidraw
  • Draw a wireframe mockup for the onboarding screen, sketch style
  • Make a hand-drawn architecture diagram for this system

Läs hela rapporten →