Menu
Design modern, intuitive DAG/workflow visual editors that feel like LEGO, not LabView
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/curiositech/port-daddy --skill dag-visual-editor-designThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Reference for the Giant Squid Harness hook tentacles (bin/pd-hook-prompt, bin/pd-hook-pre-tool, bin/pd-hook-post-tool, bin/pd-hook-stop) — the per-vendor event contracts, dial resolution, output channels, loop guards, and test seams that govern how Port Daddy rides inside Claude Code, Gemini CLI, Codex CLI, and Antigravity lifecycles. Use when editing a tentacle, wiring a new hook event, debugging a hook that fired wrong (or not at all), or verifying vendor block contracts. NOT for operating Port Daddy on another project (use port-daddy-agent-skill) and NOT for general repo contribution mechanics (use port-daddy-internal-dev).
Contributor manual for agents working ON the Port Daddy codebase itself — the daemon, MCP server, FleetBar / Fleet Control Center, website, CLI surface, distribution mirrors, internal recovery ledger, and the named internal actors (Coxswain / Navigator / Cartographer / Lookout / Quartermaster + Shipwright). Use when editing the port-daddy repo. NOT for agents using Port Daddy on other projects (use port-daddy-agent-skill for that), and NOT distributed to public skill catalogs — this skill is private to the port-daddy repo.
Take a formal result to publication when it sits between fields — choosing a venue and positioning against the right literature, finding prior art that uses none of your vocabulary, making imported machinery graspable, and structuring the paper the way the target community expects. Use when drafting or revising a paper for EC/AAMAS/CAV/S&P/OSDI/POPL-class venues, writing a related-work or contributions section, checking whether a term or result is already taken, or preparing a submission-readiness pass. NOT for doing the underlying proof, derivation or experiment; NOT for house voice on internal write-ups (use harbor-exposition); NOT for grant proposals, theses, or blog posts.
Showing SKILL.md
| license | BSL-1.1 |
| name | dag-visual-editor-design |
| version | 1.0.0 |
| description | Design modern, intuitive DAG/workflow visual editors that feel like LEGO, not LabView |
| category | Agent & Orchestration |
| tags | ["dag","visual-editor","design","ui","graph-editing"] |
| trigger_phrases | ["design dag editor","workflow builder ui","node graph ux","visual programming interface","make dag editor intuitive"] |
| allowed-tools | ["Read","Write","Edit","WebSearch","WebFetch"] |
| io-contract | {"kind":"deliverable","produces":[{"kind":"design-doc","description":"DAG visual editor design with component library, interaction patterns, layout algorithms, and accessibility compliance"}]} |
| metadata | {"recognition-cues":[],"expectancies":[],"decision-cues":[],"adaptive-workarounds":[],"execution-pattern":"sequential","needs-cdm":true} |
Design modern, intuitive DAG and workflow visual editors following the LEGO philosophy: snap blocks together simply rather than wire complex ports.
Node Count < 20 AND Simple Flow?
├─ YES → Force-directed layout (React Flow default)
│ • Fast rendering
│ • Good for exploring connections
│
└─ NO → Node Count > 100?
├─ YES → Hierarchical (Dagre) + Virtualization
│ • Set viewport culling
│ • Lazy load node details
│
└─ NO → Branch Factor > 3 per node?
├─ YES → ELK Layered Algorithm
│ • Handles complex routing
│ • Minimizes edge crossings
│
└─ NO → Dagre LR (Left-Right)
• Standard choice
• rankdir: 'LR', ranksep: 80
Data Type Diversity?
├─ Single type (e.g., JSON) → Implicit connections
│ • No handles visible by default
│ • Snap zones on hover
│
├─ 2-3 types → Color-coded handles
│ • Red: Error streams
│ • Blue: Data streams
│ • Green: Success/completion
│
└─ 4+ types → Bundled connections
• Group related channels
• Label bundles clearly
• Consider type coercion nodes
User Skill Level?
├─ Beginner → Canvas + Sidebar
│ • Drag nodes from categorized list
│ • Template-based workflows
│
├─ Intermediate → Quick Add (Slash Commands)
│ • Type "/" for node search
│ • Context-aware suggestions
│
└─ Expert → Keyboard First
• Hotkeys for common nodes
• Text-based node creation
• Batch operations
Symptoms: Edges crossing everywhere, impossible to follow data flow, users getting lost Detection: If >30% of edges cross other edges, or users spend >20s tracing a path Fix:
Symptoms: Pan/zoom feels broken, users can't find their content, minimap unhelpful Detection: Users hitting zoom limits frequently, >5 seconds to locate nodes after navigation Fix:
Symptoms: Users connecting wrong ports, type errors, unexpected data flow >20% connection error rate, frequent undo of connections
Symptoms: Editor freezes with >50 nodes, stuttering during pan/zoom Detection: Frame rate drops below 30fps, render times >100ms Fix:
Symptoms: Users don't know if workflow is running, what failed, or why it stopped Detection: Users asking "is it working?" or clicking run button multiple times Fix:
Scenario: Design editor for CSV → Transform → Database pipeline
Step 1: Choose Layout
rankdir: 'LR', ranksep: 120 for readable spacingStep 2: Design Node Structure
const TransformNode = ({ data }) => (
<div className="w-64 border-2 border-gray-200 rounded-lg bg-white">
<div className="bg-blue-50 px-3 py-2 border-b">
<h3>🔄 Transform Data</h3>
</div>
<div className="p-3">
<div className="text-sm">Filter: {data.filter}</div>
<div className="text-sm">Sort: {data.sort}</div>
</div>
<Handle type="target" position={Position.Left} />
<Handle type="source" position={Position.Right} />
</div>
);
Step 3: Connection Logic
Novice Miss: Would add separate handles for each column Expert Catch: Keeps single connection, shows column mapping in node detail
Don't use DAG editors for:
Delegate to other skills: