Hand Drawn Diagrams
Skill Verifiziert AktivErstellen Sie handgezeichnete Excalidraw-Diagramme, Abläufe, Erklärungen, Wireframes und Seiten-Mockups. Standardmäßig monochromer Skizze-Output; erlauben Sie zurückhaltende Farbe nur für Seiten-Mockups, wenn der Benutzer ausdrücklich eine Webseite-ähnliche Wiedergabetreue wünscht.
Um natürlichsprachliche Ideen in leicht editierbare, teilbare und animierbare handgezeichnete Diagramme zu verwandeln, ohne dass Benutzer externe Anwendungen öffnen müssen.
Funktionen
- Diagramme aus natürlichsprachlichen Eingabeaufforderungen erstellen
- Animierte SVG-Versionen von Diagrammen generieren
- Gehostete URLs für interaktive Bearbeitung bereitstellen
- Diagramme als PNG-Bilder exportieren
- Flexible Installation und Nutzung über mehrere Agenten hinweg anbieten
Anwendungsfälle
- Studenten erklären Konzepte oder Lernnotizen
- Architekten visualisieren Systemflüsse
- Designer erstellen UX-Wireframes
- Teams dokumentieren Prozesse oder APIs
Nicht-Ziele
- Direkter Ersatz von Excalidraw; es verbessert die Excalidraw-Nutzung.
- Erstellung von polierten, nicht handgezeichneten Vektorgrafiken.
- Generierung komplexer, mehrkomponentiger Systemarchitekturen ohne klare Eingabeaufforderungen.
Praktiken
- Diagrammqualität
- Codevalidierung
- Skriptverwaltung
- Dokumentationsstandards
Voraussetzungen
- Python 3.11+
- git
- uv
- Node.js + npm (optional, für schnelles Rendern)
Installation
npx skills add muthuishere/hand-drawn-diagramsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Gsap Utils
100Offizielle GSAP-Fähigkeit für gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Verwenden Sie dies, wenn der Benutzer nach gsap.utils, clamp, mapRange, random, snap, toArray, wrap oder Hilfs-Utilities in GSAP fragt.
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
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.