메뉴
Create hand-drawn editorial illustration diagrams in Excalidraw with a sketchy, annotated, character-driven style. Use for AI workflow illustrations, technical comparisons, concept explanations, and visual storytelling.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Launch a live dashboard showing all running Claude Code sessions on this machine. Use when the user asks to monitor sessions, check what's running, or view session activity.
360-degree Windows system health diagnostics — covers CPU, memory, disk, network, security, startup programs, services, system info, hardware, and installed software. Use this skill whenever the user mentions system diagnostics, PC health check, performance issues, 'why is my computer slow', disk space, memory usage, startup optimization, security audit, bloatware removal, system cleanup, laptop health, or wants to keep their PC in prime condition. Also use when the user asks about high CPU, RAM usage, what's eating their disk, or wants a full system report.
Convert raw YouTube transcripts into polished, high-fidelity readable articles in Markdown. Use this skill whenever the user wants to clean up, rewrite, or convert a YouTube transcript (or multiple transcripts) into an article, blog post, or readable document. Also triggers when the user provides transcript files (txt, html, pdf) or URLs and asks to make them readable, turn them into an article, or clean them up. Even if the user says something casual like "make this transcript readable" or "turn these into a blog post", this skill applies.
Analyze YouTube videos, web pages (blog posts, articles), or local files (TXT, HTML, PDF) using Google Gemini API. Extracts key takeaways, summaries, code, prompts, and more.
End-of-day wrap-up that audits what Claude did automatically and what you did manually, then generates a beautiful HTML report with tomorrow's priority.
Generate a daily morning briefing dashboard that summarizes your calendar, email, and news.
| name | excalidraw-sketch |
| description | Create hand-drawn editorial illustration diagrams in Excalidraw with a sketchy, annotated, character-driven style. Use for AI workflow illustrations, technical comparisons, concept explanations, and visual storytelling. |
Generate .excalidraw JSON files in a hand-drawn, editorial illustration style — sketchy, annotated, character-driven diagrams for explaining AI workflows, technical concepts, and comparisons.
This skill builds on the base excalidraw skill. Use the same render pipeline, element templates, and JSON schema from ../excalidraw/references/. The difference is purely aesthetic and compositional — this skill defines a specific visual language.
Before generating any diagram, read the sample images in references/ to internalize the target style:
references/sample.jpg — Side-by-side comparison: "Human Interruption" vs "LLM Context Pollution". Shows two-panel layout with robot mascot in each, thick flow arrow between panels, speech/thought bubbles, scattered annotation labels, red X for negative, code windows.references/sample2.jpg — Top statement + two-panel layout: "/btw Quick Questions" vs "--fork-session Deep Dives". Shows problem statement at top with downward arrow, robot waving in left panel, robot at laptop in right panel, annotation arrows to icons (magnifying glass, gears, HTML/mermaid artifacts).references/sample3.jpg — Side-by-side with detail sub-row: "Messy Desk" (red X, overwhelmed robot buried in papers, scattered symbols) vs "Clean Desk" (green check, organized robot, thought bubble with progress bar/target). Bottom row shows 3 smaller robot figures demonstrating individual tools (Esc, /rewind, --fork-session, /btw).references/sample4.jpg — Three-stage sequential flow left-to-right: "Claude Mid-Task" → "Noise in Conversation History" → "Impact: Drowned Signal". Shows robot working with code windows, human figure interrupting with speech bubble, conversation history panel with red X, confused robot surrounded by scattered documents.Use these samples as your ground truth for:
This style mimics hand-drawn whiteboard sketches used in tech blog posts and YouTube explainers. Key traits:
These settings create the hand-drawn aesthetic:
| Property | Value | Why |
|---|---|---|
roughness | 2 | Maximum hand-drawn wobble — this is the core of the style |
fontFamily | 1 | Virgil (hand-drawn font) — never use monospace or sans-serif |
strokeWidth | 1 for annotations, 2 for shapes, 3 for major arrows | Visual hierarchy through line weight |
opacity | 100 | Always fully opaque |
roundness | { "type": 3 } on rectangles | Rounded corners for a softer, sketchier feel |
This replaces the base skill's color palette. All colors below are tuned for the soft, muted, editorial look.
| Semantic Purpose | Fill | Stroke | When to Use |
|---|---|---|---|
| Robot body / neutral | #e8edf3 | #5b6e85 | Robot mascot shapes, neutral containers |
| Robot eye glow | #7dd3fc | #0284c7 | Robot eye circles |
| Robot chest screen | #38bdf8 | #0369a1 | Small rectangle on robot body |
| Panel border | transparent | #94a3b8 | Hand-drawn rounded rectangles framing scenes |
| Good / positive | #bbf7d0 | #16a34a | Green checkmarks, success indicators |
| Bad / negative | #fecaca | #dc2626 | Red X marks, error indicators |
| Warning / attention | #fef08a | #ca8a04 | Yellow highlights, exclamation marks |
| Code window | #1e293b | #475569 | Dark rectangles representing terminal/editor |
| Document / file | #fefce8 | #a3a3a3 | Paper-like rectangles for documents |
| Thought bubble | #f8fafc | #94a3b8 | Cloud shapes for thought content |
| Speech bubble | #ffffff | #64748b | Rounded rectangles with tail for dialogue |
| UI mockup | #f1f5f9 | #94a3b8 | Light rectangles representing screens/windows |
| Arrow (flow) | — | #64748b | Thick gray arrows between scenes |
| Arrow (annotation) | — | #94a3b8 | Thinner arrows pointing from labels to elements |
| Level | Color | Font Size | Use For |
|---|---|---|---|
| Diagram title | #1e293b | 28-36 | Main title spanning the top |
| Section subtitle | #334155 | 20-24 | Panel/scene headers |
| Label / annotation | #475569 | 14-16 | Callout text, small labels |
| Caption | #64748b | 14-16 | Explanatory text below scenes |
| Emphasis text | #dc2626 or #16a34a | 16-20 | Key terms, red for bad, green for good |
| On dark background | #e2e8f0 | 12-14 | Text inside code windows |
| Property | Value |
|---|---|
| Canvas background | #faf9f6 |
Read the sample images first (references/sample*.jpg) to see the target robot likeness. The robot in the samples has: a round-ish head slightly wider than tall, two large glowing blue circular eyes (prominent, ~40% of head width), a compact metallic body with a small bright blue screen on the chest, short stubby arms and legs, and a small antenna nub on top. The overall proportions are chibi/cute — large head relative to body.
The recurring robot character is built from basic Excalidraw shapes to approximate this likeness:
Head: rectangle, 50×45, rounded, fill #e8edf3, stroke #5b6e85
Eyes: 2× ellipse, 12×12, fill #7dd3fc, stroke #0284c7
Body: rectangle, 40×50, rounded, fill #e8edf3, stroke #5b6e85
Chest screen: rectangle, 20×15, fill #38bdf8, stroke #0369a1 (centered on body)
Arms: 2× line, strokeWidth 2, stroke #5b6e85 (short lines from body sides)
Legs: 2× line, strokeWidth 2, stroke #5b6e85 (short lines from body bottom)
Antenna: line + small ellipse on top of head
| State | How to Show |
|---|---|
| Working/focused | Robot next to a code window or laptop shape, small gear icons nearby |
| Confused | Question marks (?) and scattered symbols around the robot's head |
| Overwhelmed | Piles of document rectangles surrounding the robot |
| Presenting/explaining | Robot with a speech bubble, one arm line angled outward |
| Happy/success | Green checkmark nearby, clean organized elements around |
| Error/problem | Red X mark nearby, scattered messy elements |
Simple silhouette: ellipse head (20×20) + rectangle body (15×30), fill #94a3b8, stroke #475569. With a speech bubble for dialogue.
This style is annotation-heavy. Every scene should have multiple callout labels.
| Element | How to Build |
|---|---|
| Callout label | Free-floating text (14-16px, color #475569) + thin arrow (strokeWidth 1, stroke #94a3b8) pointing to the target |
| Speech bubble | Rounded rectangle (fill #ffffff, stroke #64748b) with hand-written text inside. Add a small triangle line below for the tail. |
| Thought bubble | Ellipse (fill #f8fafc, stroke #94a3b8) with wavy/cloud-like feel. Place 2-3 small ellipses trailing toward the character. |
| Red X | Two crossing lines (stroke #dc2626, strokeWidth 3) — 30×30 |
| Green check | Two lines forming a checkmark (stroke #16a34a, strokeWidth 3) |
| Question marks | Free-floating text ? in various sizes (16-28px), scattered, color #ca8a04 or #dc2626 |
| Exclamation marks | Free-floating text ! (20-28px), color #ca8a04 |
| Scattered symbols | Small text elements (@, #, %, *, ?) in varied sizes around a focal point to convey noise/chaos |
| Icon: gear | Small diamond (20×20) or use text ⚙ |
| Icon: magnifying glass | Small ellipse (15×15) + short line for handle |
Aim for 5-10 annotation labels per scene/panel. Each major element should have at least one label pointing to it. This density is what gives the style its editorial/explainer character.
Choose the layout that fits the concept. These can be combined.
Two panels with hand-drawn rounded-rectangle borders. Used for before/after, good/bad, two approaches.
┌─────────────────┐ ┌─────────────────┐
│ ✗ Bad Title │ │ ✓ Good Title │
│ │ │ │
│ [robot scene] │ → │ [robot scene] │
│ │ │ │
│ caption text │ │ caption text │
└─────────────────┘ └─────────────────┘
3+ scenes arranged horizontally with thick directional arrows between them. Used for processes, chains of events, cause-and-effect.
[Scene 1] ──→ [Scene 2] ──→ [Scene 3]
subtitle subtitle subtitle
robot + robot + robot +
context context context
caption caption caption
A headline statement or problem at the top, with an arrow pointing down to a row of smaller scenes/solutions below.
┌──────────────────────────┐
│ Problem Statement │
└────────────┬─────────────┘
↓
[solution 1] [solution 2] [solution 3]
Central concept with radiating connections to surrounding elements. Used for "one thing connects to many."
Combine any patterns above. Common: comparison panels at top + detail row at bottom. Or sequential flow with an inset detail panel.
| Spacing | Value |
|---|---|
| Between major scenes | 100-150px |
| Between elements within a scene | 30-50px |
| Panel padding (if bordered) | 40-60px |
| Title to first panel | 60-80px |
| Robot size (total height) | 100-130px |
| Minimum scene width | 300px |
Read the sample images in references/sample*.jpg using the Read tool. Internalize the robot likeness, annotation style, scene composition, and overall feel. Every diagram you produce should look like it belongs in the same series as these samples.
Based on the concept, pick from the layout patterns above (or combine them).
For each scene/panel:
Follow the base excalidraw skill's section-by-section workflow:
"robot1_head", "panel_bad_border")Use the base skill's render pipeline:
cd .claude/skills/excalidraw/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
Then Read the PNG and run the fix loop.
roughness: 2 on all shapes and linesfontFamily: 1 (Virgil) on all text#faf9f6 (cream, not white)#faf9f6), not cold white?, !, @, # symbols