ReddRadar
Agent skill
pneuma-draw
Pneuma Draw Mode workspace guidelines. Use for ANY task in this workspace: creating or editing diagrams, flowcharts, wireframes, mind maps, architecture diagrams, org charts, sketches, or any visual content on the Excalidraw canvas. This skill defines the Excalidraw JSON format, element types, binding rules, and color palette. Consult before your first edit in a new conversation.
Install this agent skill to your Project
npx add-skill https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill
SKILL.md
Pneuma Draw Mode — Excalidraw Skill
You are an expert at creating and editing Excalidraw diagrams. The user sees your changes live on an Excalidraw canvas in their browser.
Credits
This mode uses Excalidraw — an open-source, MIT-licensed virtual whiteboard by the Excalidraw team.
File Format
Excalidraw files use .excalidraw extension and are JSON:
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": { "viewBackgroundColor": "#ffffff" },
"files": {}
}
Element Types
| Type | Extra Properties | Usage |
|---|---|---|
rectangle |
roundness |
Boxes, containers, cards |
ellipse |
— | Circles, ovals, bubbles |
diamond |
— | Decision nodes, conditions |
line |
points, startBinding, endBinding |
Lines, connectors |
arrow |
points, startBinding, endBinding |
Directed connections |
text |
text, fontSize, fontFamily, textAlign |
Labels, annotations |
freedraw |
points, simulatePressure |
Freehand sketches |
image |
fileId, status |
Embedded images |
frame |
— | Grouping frames |
For full JSON schema of each type (common properties, text properties, line/arrow point arrays, binding mechanics), read {SKILL_PATH}/references/element-types.md.
Binding
Excalidraw requires bidirectional binding — if only the arrow references the shape but not vice versa, the connection breaks when the user interacts with the canvas. Always set both:
- Arrow's
startBinding/endBinding→ references shape IDs - Shape's
boundElements→ references arrow ID
Same pattern for text inside shapes: shape's boundElements references the text, text's containerId references the shape.
Colors
Stroke Colors
#1e1e1e— Black (default)#e03131— Red#2f9e44— Green#1971c2— Blue#f08c00— Orange#6741d9— Purple
Background Colors
transparent— None (default)#ffc9c9— Light red#b2f2bb— Light green#a5d8ff— Light blue#ffec99— Light yellow#d0bfff— Light purple
ID Generation
Each element needs a unique id. Use descriptive IDs like "start-node", "arrow-1", "label-process". The seed field should be a random integer — Excalidraw uses it for hand-drawn rendering variations, so different seeds give different "wobble" patterns.
Common Patterns
Flowchart
- Create shape elements (rectangles, diamonds) positioned in a grid
- Add text labels bound to each shape
- Connect shapes with arrows using bindings
Wireframe
- Use rectangles for containers and sections
- Add text for labels and placeholder content
- Use lines for dividers
- Set
roughness: 0for clean wireframes — the hand-drawn look doesn't suit UI mockups
Mind Map
- Central ellipse or rectangle
- Lines/arrows radiating outward
- Text labels at each node
Tips
- Position elements on multiples of 20-40 — this aligns with Excalidraw's snap grid and produces clean diagrams
- Keep 40-60px gaps between connected elements — tighter gaps make arrows hard to see, wider gaps waste canvas space
- Use
roundness: { "type": 3 }for rounded rectangles - Set
roughness: 0for clean/professional look,1for hand-drawn style - Always generate unique
idvalues and randomseedvalues - When modifying existing diagrams, preserve unchanged elements exactly — changing IDs or seeds causes visual flicker on the canvas
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
pandazki/pneuma-skills
pneuma-illustrate
Pneuma Illustrate Mode workspace guidelines. Use for ANY task in this workspace: generating images, creating illustrations, editing visuals, managing content sets, organizing rows, crafting prompts, adjusting styles, or any image generation task. This skill defines the generation workflow, manifest format, prompt engineering, and content set organization for the AI illustration studio. Consult before your first edit in a new conversation.
pandazki/pneuma-skills
pneuma-preferences
Persistent user preference memory across sessions. Consult this skill BEFORE making any design, style, or aesthetic decisions — choosing colors, themes, layouts, fonts, tone of voice, content density, or visual direction. Also consult when starting a new creative task in any mode, when the user corrects your style choices, or when asked to analyze or refresh user preferences. Even if you think you know what to do, check preferences first — the user may have recorded specific constraints.
pandazki/pneuma-skills
pneuma-webcraft
Pneuma WebCraft Mode workspace guidelines with Impeccable.style design intelligence. Use for ANY web design or development task: building pages, components, layouts, styling, animations, responsive design, accessibility, performance optimization, design system extraction, UX writing, and visual refinement. This skill defines how the live-preview environment works, the Impeccable design principles to follow, and the 20 design commands available. Consult before your first edit in a new conversation.
pandazki/pneuma-skills
skill
pandazki/pneuma-skills
pneuma-doc
Pneuma Doc Mode workspace guidelines. Use for ANY task in this workspace: writing, editing, creating documents, reports, articles, READMEs, notes, outlines, research summaries, translations, restructuring, formatting, or any markdown content. This skill defines how the live-preview environment works and how to edit effectively. Consult before your first edit in a new conversation.
pandazki/pneuma-skills
pneuma-{{modeName}}
TODO: Describe what this mode's agent does and when it should activate. Example: "Expert at creating and editing [content type] in Pneuma {{displayName}} Mode. Works in a WYSIWYG environment where the user sees edits live in a browser preview panel."
Didn't find tool you were looking for?