AgriciDaniel/canvas-generate
skills/canvas-generate/SKILL.md
AI-orchestrated full canvas generation. Given a description, detects the best archetype, generates content and visuals, instantiates a template, applies layout, and produces a complete canvas. The flagship command. Dispatches canvas-media and canvas-composer agents for parallel asset generation. Triggers on: canvas generate, generate canvas, create a visual board, build me a canvas, make a canvas about, canvas from description, auto-generate canvas, full canvas generation.
$ install --global
skillsauthnpx skillsauth add AgriciDaniel/claude-canvas canvas-generateInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 3:52 PM4.2s1 file scanned
SKILL.md
- name:
- canvas-generate
- description:
- >
- Triggers on:
- canvas generate, generate canvas, create a visual board,
- user-invocable:
- false
canvas-generate: AI-Orchestrated Canvas Generation
The flagship command. Takes a high-level description and produces a complete, populated canvas.
Read ../canvas/references/template-catalog.md for archetype descriptions.
Read ../canvas/references/media-guide.md for image/SVG/GIF integration.
Read ../canvas/references/mermaid-patterns.md for native diagram options.
Read ../canvas/references/performance-guide.md for node limits.
Pipeline
User: "/canvas generate [description]"
│
▼
1. Analyze description
│
▼
2. Detect archetype
│
▼
3. Plan content (what nodes, what media)
│
▼
4. Generate in parallel:
┌─────────────┬────────────────┐
│ Composer │ Media agent │
│ (text nodes) │ (images/SVGs) │
└──────┬──────┴───────┬────────┘
│ │
▼ ▼
5. Instantiate template with content
│
▼
6. Apply layout algorithm
│
▼
7. Validate + write
Workflow
Step 1: Analyze Description
Parse the user's description to extract:
- Topic: What is the canvas about?
- Purpose: What will it be used for? (presenting, planning, exploring, showcasing)
- Content hints: Any specific items, data, or requirements mentioned?
- Visual requests: Does the user want images, diagrams, or text-only?
Step 2: Detect Archetype
Map the description to one of the 12 template archetypes:
| Keywords in description | Archetype | |------------------------|-----------| | "presentation", "slides", "deck", "present" | presentation | | "flowchart", "process", "workflow", "steps" | flowchart | | "mind map", "brainstorm", "ideas", "explore" | mind-map | | "gallery", "images", "photos", "showcase" | gallery | | "dashboard", "metrics", "KPIs", "status" | dashboard | | "storyboard", "scenes", "video", "script" | storyboard | | "knowledge graph", "entities", "relationships" | knowledge-graph | | "mood board", "inspiration", "aesthetic", "vibe" | mood-board | | "timeline", "events", "history", "milestones" | timeline | | "comparison", "vs", "compare", "options" | comparison | | "kanban", "tasks", "board", "sprint" | kanban | | "brief", "kickoff", "project plan", "objectives" | project-brief |
If the archetype is ambiguous, ask the user to clarify.
Step 3: Plan Content
Based on the archetype and description, plan:
- Node count: How many nodes does this canvas need? (respect <120 target)
- Text content: What text goes in each node?
- Media assets: What images, SVGs, or GIFs are needed?
- Mermaid diagrams: What data visualizations should be embedded as Mermaid?
- Edges: What connections exist between nodes?
Step 4: Generate Content and Media
For simple canvases (text-only, <10 nodes): Generate content inline — no agents needed.
For complex canvases (media required or >10 nodes): Dispatch agents in parallel:
a. Dispatch canvas-composer agent with:
- Archetype name
- Topic description
- Number of text nodes needed
- Any source files for context
b. Dispatch canvas-media agent with (if media requested):
- List of images/SVGs/GIFs needed
- Prompt descriptions for each
- Target dimensions
c. Wait for both agents to complete. Collect their JSON output.
Step 5: Instantiate Template
Use the template engine to create the base canvas:
python3 scripts/canvas_template.py [archetype] [output_path] \
--param title="[topic]" --param [archetype_param]=[count]
Then update each node's content with the composer agent's output using the Edit tool.
If the media agent generated images:
- Add each as a file node inside the appropriate zone/slide
- Use the auto-positioning algorithm or manual placement inside groups
Step 6: Apply Layout
If the template's built-in layout is insufficient (e.g., mind-map needs radial, knowledge-graph needs force), apply the appropriate algorithm:
python3 scripts/canvas_layout.py [output_path] [algorithm]
Step 7: Quality Gate (MANDATORY)
This is the most critical step. A canvas that passes validation but has placeholder text is a FAILURE.
-
Content check: Read every text node in the canvas. Search for these forbidden strings:
- "Describe this" — replace with real content
- "YYYY-MM-DD" — replace with real dates
- "Content goes here" — replace with real content
- "Value: 0" — replace with realistic values
- "Define this entity" — replace with real definition
- "What happened" — replace with real event If ANY are found, edit the canvas to replace them before proceeding.
-
Layout check: Verify the correct layout was applied:
- Mind-map → radial layout (nodes should expand from center, not in a grid)
- Knowledge-graph → force layout (nodes should be organically spread, not in a grid)
- Flowchart → dagre layout (hierarchical top-down or left-right flow)
If the layout looks wrong, run
python3 scripts/canvas_layout.py <path> <algorithm>.
-
Spacing check: Run validation to catch overlaps:
python3 scripts/canvas_validate.py [output_path]Must return
valid: truewith 0 errors and 0 overlap warnings. -
Visual scan: Is this canvas something you'd be proud to show? Would a user open it and immediately understand it? If not, improve it.
Only after ALL four checks pass, report success.
Examples
Example 1: Text-Only Dashboard
User: /canvas generate "project dashboard for mobile app launch"
- Archetype: dashboard
- Plan: 4 metric cards (Downloads, DAU, Crashes, Rating), 1 status zone
- Generate content inline (simple, text-only)
- Instantiate:
python3 scripts/canvas_template.py dashboard output.canvas --param title="Mobile App Launch" --param metric_count=4 - Edit metric nodes with specific content
- No layout change needed (grid is fine)
- Validate and report
Example 2: Mood Board with AI Images
User: /canvas generate "mood board for a cyberpunk game"
- Archetype: mood-board
- Plan: 8 image slots, title card with aesthetic description
- Dispatch canvas-composer: write title card content (mood, colors, style)
- Dispatch canvas-media: generate 8 images via
/banana:- "neon cityscape, cyberpunk, rain, reflections"
- "cyberpunk character portrait, augmented, glowing eyes"
- (6 more themed prompts)
- Instantiate mood-board template
- Replace placeholder text nodes with generated image file nodes
- Validate and report
Example 3: Presentation from Topic
User: /canvas generate "presentation about our Q3 results"
- Archetype: presentation
- Plan: 6 slides (title, overview, revenue, growth, challenges, next steps)
- Dispatch canvas-composer: write 6 slides of content
- Optionally dispatch canvas-media: 1-2 hero images
- Instantiate presentation template with
slide_count=6 - Edit each slide's text with composer output
- Validate and report
Fallback Behavior
| Scenario | Action | |----------|--------| | User description too vague | Ask: "What type of canvas? (presentation, mood board, dashboard, etc.)" | | Archetype detected but uncertain | Confirm: "I'll create a [archetype] canvas. Sound right?" | | Media skills not available | Build text-only canvas, suggest manual image addition | | Canvas would exceed 120 nodes | Warn and suggest splitting into sub-canvases | | Template instantiation fails | Fall back to manual canvas construction with the orchestrator |
Related Skills
AgriciDaniel/canvas
development
VerifiedTrustedCommunity
AI-orchestrated visual production for Obsidian Canvas. Create presentations, flowcharts, mood boards, knowledge graphs, galleries, storyboards, timelines, dashboards, and more with intelligent layout and AI-generated content. Claude acts as Creative Director — dispatching sub-agents for image generation, SVG diagrams, GIF creation, and spatial layout. Supports 12 template archetypes, 6 layout algorithms, and Advanced Canvas presentation mode. Triggers on: /canvas, create canvas, build canvas, make a presentation, visual board, mood board, flowchart canvas, storyboard, canvas from template, lay out canvas, export canvas, canvas layout, canvas generate, add to canvas, put this on the canvas, open canvas, canvas present, canvas template.
25SKILL.mdUpdated Apr 16, 2026
AgriciDaniel/canvas-template
content-media
VerifiedTrustedCommunity
Browse and instantiate 12 canvas template archetypes: presentation, flowchart, mind-map, gallery, dashboard, storyboard, knowledge-graph, mood-board, timeline, comparison, kanban, project-brief. Each template generates a ready-to-use canvas with proper layout, zones, and placeholder content. Triggers on: canvas template, canvas template list, browse templates, canvas from template, use template, show archetypes.
25SKILL.mdUpdated Apr 16, 2026
AgriciDaniel/canvas-present
tools
VerifiedTrustedCommunity
Build presentation-mode canvases for the Advanced Canvas plugin. Creates slide-deck canvases with 1200x675 group nodes connected by edges for arrow-key navigation. Supports title slides, content slides with images, full-text slides, and optional script annotation columns for video planning. Triggers on: canvas present, create presentation, build slide deck, canvas slides, make a presentation, presentation canvas, present from notes, slide deck canvas, canvas presentation.
25SKILL.mdUpdated Apr 16, 2026
AgriciDaniel/canvas-populate
development
VerifiedTrustedCommunity
Add content to existing Obsidian Canvas files. Supports all node types: images (with auto aspect ratio detection), text cards, PDFs, wiki notes, web links, Mermaid diagrams, SVGs, GIFs, AI-generated images via banana. Also adds zones (groups), edges between nodes, and imports recent banana images. Triggers on: canvas add, add to canvas, put on canvas, canvas zone, canvas connect, canvas from banana, add image to canvas, add text to canvas.
25SKILL.mdUpdated Apr 16, 2026