{"id":"c01343bc-ad7b-4fc6-bc36-59cf2ea0b482","shortId":"hANr6S","kind":"skill","title":"hand-drawn-diagrams","tagline":"Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity.","description":"Follow the instructions in `./workflow.md`.\n\nKey references:\n- `references/index.md`\n- `references/activation-routing.xml`\n- `references/fundamental-shapes.md`\n\n## Recommended: Chrome DevTools MCP\n\nInstall `chrome-devtools-mcp` for fast PNG and animated SVG rendering — uses a real browser, no Playwright install required.\n\n```\nnpm install -g chrome-devtools-mcp\n```\n\nThen add it to your Claude Code MCP config (`~/.claude/settings.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"chrome-devtools-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"chrome-devtools-mcp\"]\n    }\n  }\n}\n```\n\nWithout it, PNG and video rendering falls back to Playwright (slower, requires browser install).","tags":["hand","drawn","diagrams","muthuishere","agent-skills","claude-code","codex","diagramming","excalidraw","ux-wireframes","visualization","workflow-diagrams"],"capabilities":["skill","source-muthuishere","skill-hand-drawn-diagrams","topic-agent-skills","topic-claude-code","topic-codex","topic-diagramming","topic-excalidraw","topic-ux-wireframes","topic-visualization","topic-workflow-diagrams"],"categories":["hand-drawn-diagrams"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/muthuishere/hand-drawn-diagrams","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add muthuishere/hand-drawn-diagrams","source_repo":"https://github.com/muthuishere/hand-drawn-diagrams","install_from":"skills.sh"}},"qualityScore":"0.461","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 23 github stars · SKILL.md body (673 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T01:01:32.990Z","embedding":null,"createdAt":"2026-04-21T19:03:23.612Z","updatedAt":"2026-04-22T01:01:32.990Z","lastSeenAt":"2026-04-22T01:01:32.990Z","tsv":"'/.claude/settings.json':88 '/workflow.md':42 'add':80 'allow':22 'anim':61 'arg':97 'back':109 'browser':67,114 'chrome':49,54,76,92,99 'chrome-devtools-mcp':53,75,91,98 'claud':84 'code':85 'color':24 'command':95 'config':87 'creat':5 'default':17 'devtool':50,55,77,93,100 'diagram':4,10 'drawn':3,8 'excalidraw':9 'explain':12 'explicit':32 'fall':108 'fast':58 'fidel':37 'flow':11 'follow':38 'g':74 'hand':2,7 'hand-drawn':6 'hand-drawn-diagram':1 'instal':52,70,73,115 'instruct':40 'json':89 'key':43 'like':36 'mcp':51,56,78,86,94,101 'mcpserver':90 'mockup':16,28 'monochrom':19 'npm':72 'npx':96 'output':21 'page':15,27 'playwright':69,111 'png':59,104 'real':66 'recommend':48 'refer':44 'references/activation-routing.xml':46 'references/fundamental-shapes.md':47 'references/index.md':45 'render':63,107 'requir':71,113 'restrain':23 'sketch':20 'skill' 'skill-hand-drawn-diagrams' 'slower':112 'source-muthuishere' 'svg':62 'topic-agent-skills' 'topic-claude-code' 'topic-codex' 'topic-diagramming' 'topic-excalidraw' 'topic-ux-wireframes' 'topic-visualization' 'topic-workflow-diagrams' 'use':64 'user':31 'video':106 'want':33 'webpag':35 'webpage-lik':34 'wirefram':13 'without':102","prices":[{"id":"8983135e-9aac-4733-b5a0-1792475a3453","listingId":"c01343bc-ad7b-4fc6-bc36-59cf2ea0b482","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"muthuishere","category":"hand-drawn-diagrams","install_from":"skills.sh"},"createdAt":"2026-04-21T19:03:23.612Z"}],"sources":[{"listingId":"c01343bc-ad7b-4fc6-bc36-59cf2ea0b482","source":"github","sourceId":"muthuishere/hand-drawn-diagrams","sourceUrl":"https://github.com/muthuishere/hand-drawn-diagrams","isPrimary":false,"firstSeenAt":"2026-04-21T19:03:23.612Z","lastSeenAt":"2026-04-22T01:01:32.990Z"}],"details":{"listingId":"c01343bc-ad7b-4fc6-bc36-59cf2ea0b482","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"muthuishere","slug":"hand-drawn-diagrams","github":{"repo":"muthuishere/hand-drawn-diagrams","stars":23,"topics":["agent-skills","claude-code","codex","diagramming","excalidraw","ux-wireframes","visualization","workflow-diagrams"],"license":"other","html_url":"https://github.com/muthuishere/hand-drawn-diagrams","pushed_at":"2026-03-23T03:55:33Z","description":"Hand-drawn diagram skill for Claude Code and Codex. Generates monochrome architecture, workflow, and UX blueprint diagrams as PNGs.","skill_md_sha":"fa0d80715addb58a3fbaf6ec5a1b644054c55d6e","skill_md_path":"SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/muthuishere/hand-drawn-diagrams"},"layout":"root","source":"github","category":"hand-drawn-diagrams","frontmatter":{"name":"hand-drawn-diagrams","description":"Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity."},"skills_sh_url":"https://skills.sh/muthuishere/hand-drawn-diagrams"},"updatedAt":"2026-04-22T01:01:32.990Z"}}