skills.rest
jonnymuir
jonnymuirCOMMUNITY
Explore all skills by this author →
Website𝕏@jonnymooGitHub

workflow-canvas-slot-matrix

Implement gateway-first slot matrices with lane-based row bands and corridor routing.

1|Updated Dec 23, 2025
Search Tags:#workflow#frontend#diagramming#canvas#ui-design#layout-engine
One-click install
npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-canvas-slot-matrix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: workflow-canvas-slot-matrix
Source: https://github.com/jonnymuir/Umbraco.Prism/tree/main/.claude/skills/workflow-canvas-slot-matrix
Command: npx skills add https://github.com/jonnymuir/Umbraco.Prism --skill workflow-canvas-slot-matrix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common issue of visual clutter and spaghetti-like node connections in workflow editors by enforcing a structured, gateway-first layout system.

Core Features & Use Cases

  • Structured Lane Layouts: Automatically organizes nodes into vertical row bands and lanes to prevent overlapping.
  • Corridor Routing: Implements standardized edge routing to ensure clear, readable paths between stages and gateways.
  • Use Case: Use this when building a complex service blueprint editor to ensure that multi-lane split/join flows remain readable and maintainable as the workflow grows.

Quick Start

Apply the workflow-canvas-slot-matrix pattern to the current canvas by initializing the lane-column grid and setting the gateway-first routing constraints.

Frequently Asked Questions about workflow-canvas-slot-matrix

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent overlapping node connections in a complex workflow canvas?▼

Workflow canvas layouts prevent visual clutter by enforcing a gateway-first slot matrix with lane-based row bands. This structured layout engine standardizes node organization and eliminates spaghetti-like edge routing in complex diagrams.

What is the best way to structure a multi-lane service blueprint editor?▼

Structuring a multi-lane service blueprint editor requires corridor routing and lane-based row bands. This layout approach ensures multi-lane split and join flows remain readable and maintainable as the service workflow scales.

How do I route edges cleanly between stages in a state machine visualization?▼

Routing edges cleanly in state machine visualizations requires standardized corridor routing. This method enforces clear, non-overlapping paths between stages and gateways across the entire process diagram canvas.

How do I apply a slot matrix layout to a frontend diagramming canvas?▼

Applying a slot matrix layout to a frontend diagramming canvas involves initializing a lane-column grid and setting gateway-first routing constraints. This establishes the structured framework required for rendering non-overlapping process diagrams.

When should I use ghost placeholders in a workflow canvas layout?▼

Ghost placeholders are used in a workflow canvas layout to maintain visual clarity during complex routing. Strict adherence to contextual ghost placeholder placement ensures node-to-node rail drawing remains readable.

Related Skills

Explore More Design & Creative Skills→
jhlee0409jhlee0409

canvas-debugging

Diagnose Konva canvas layout and grid alignment issues.

Community
Intermediate
jonnymuirjonnymuir
1

workflow-gateway-model-source-of-truth

Enforce diamond gateways as the exclusive routing mechanism in workflow models.

Community
Advanced
xiang2007xiang2007

canvas

Create custom Obsidian canvases with zones for notes and images.

Community
Intermediate
maedmattmaedmatt
3

json-canvas

Create and edit valid JSON Canvas files with nodes, edges, and groups.

Community
Basic