Hand Drawn Diagrams
Skill Verified ActiveCreate 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.
To transform natural language ideas into easily editable, shareable, and animatable hand-drawn diagrams without requiring users to open any external applications.
Features
- Create diagrams from natural language prompts
- Generate animated SVG versions of diagrams
- Provide hosted URLs for interactive editing
- Export diagrams as PNG images
- Offer flexible installation and usage across multiple agents
Use Cases
- Students explaining concepts or study notes
- Architects visualizing system flows
- Designers creating UX wireframes
- Teams documenting processes or APIs
Non-Goals
- Replacing Excalidraw directly; it enhances Excalidraw usage.
- Creating polished, non-hand-drawn vector graphics.
- Generating complex, multi-component system architectures without clear prompts.
Practices
- Diagram quality
- Code validation
- Script management
- Documentation standards
Prerequisites
- Python 3.11+
- git
- uv
- Node.js + npm (optional, for fast rendering)
Installation
npx skills add muthuishere/hand-drawn-diagramsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
VerifiedTrust Signals
Similar Extensions
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
Google Docs
100Interact with Google Docs - create documents, search by title, read content, and edit text. Use when user asks to: create a Google Doc, find a document, read doc content, add text to a doc, or replace text in a document. Lightweight alternative to full Google Workspace MCP server with standalone OAuth authentication.
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Gsap Utils
100Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Teach Guidance
100Guide a person in becoming a better teacher and explainer. AI coaches content structuring, audience calibration, explanation clarity, Socratic questioning technique, feedback interpretation, and reflective practice for technical presentations, documentation, and mentoring. Use when a person needs to present technical content and wants preparation coaching, wants to write better documentation or tutorials, struggles to explain concepts across expertise levels, is mentoring a colleague, or is preparing for a talk or knowledge-sharing session.