SkillProof tested Claude skills

Hand-Drawn Diagrams

Genereert gevalideerde handgetekende Excalidraw diagrammen, wireframes en mockups

Door muthuishere · muthuishere/hand-drawn-diagrams

Getest · Werkt ★ 9.6/10

Hand-Drawn Diagrams — Genereert gevalideerde handgetekende Excalidraw diagrammen, wireframes en mockups

Wat het doet

Genereert Excalidraw diagrammen in handgetekende stijl - flowcharts, explainers, wireframes en paginamockups - als geldige .excalidraw JSON, controleert vervolgens de output met een gebundelde Python validator voordat een gehoste bewerkings-URL wordt geleverd. Activeert wanneer u vraagt om een flow, architectuur of UI te schetsen, tekenen of diagrammeren in een handgetekende look. Standaard is monochrome schetsstijl, met optionele PNG en zelftekenende geanimeerde SVG export via Chrome DevTools MCP of Playwright.

Testrapport

De gebundelde validator is echt en puur-Python, dus ik voerde deze live uit op twee signup-flow diagrammen. Mijn no-skill Excalidraw JSON kwam terug als INVALID - een bungelende pijl die verbonden was met een niet-bestaande id, een gestapelde lay-out en zes stijlwaarschuwingen die de handgetekende look hadden laten vallen - terwijl de schema-geleide versie met 0 fouten slaagde. De json-schema referentie plus validate_excalidraw.py vangen structurele breuken op vóór het renderen, een meetbaar voordeel ten opzichte van ad-hoc generatie. PNG en geanimeerde SVG export vereisen uv+Playwright of chrome-devtools-mcp, maar de kernlevering (een geldig, handgetekend .excalidraw bestand plus gehoste bewerkings-URL) werkt zonder deze. Installatiestappen en documentatie zijn grondig en eerlijk over de traagheid van de Playwright fallback.

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

Installatie

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

Commando's en voorbeeldprompts

  • /hand-drawn-diagramsGenereert gevalideerde handgetekende Excalidraw diagrammen, wireframes en mockups

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →