Skills workflow-node-setup
๐Ÿ“ฆ

workflow-node-setup

Content revision r1 Low Risk โš™๏ธ External commands๐ŸŒ Network access

Configure React Flow Workflow Nodes

React Flow nodes can break when handles, edges, resizing, and scroll behavior drift apart. This skill gives Claude, Codex, and Claude Code a focused checklist for stable workflow node changes.

Supports: Claude Codex Code(CC)
๐Ÿ“Š 74 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "workflow-node-setup" from https://skillstore.io/skills/johnwayneeee-workflow-node-setup.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-workflow-node-setup/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Test it

Using "workflow-node-setup". A node shows React Flow error 008 after adding a second output channel.

Expected outcome:

  • The rendered handle ids and edge source handles should be compared first.
  • Each output channel needs a stable, distinct handle id.
  • The flow model should reference those exact ids for affected edges.

Using "workflow-node-setup". A resizable node clips the resize handles after a rounded container change.

Expected outcome:

  • Move the resizer outside clipped content or make it a direct child of the root node.
  • Keep the visual shell responsible for rounded overflow only.
  • Verify the resize handles remain clickable in the browser.

Using "workflow-node-setup". A Markdown table inside a node pans the canvas instead of scrolling horizontally.

Expected outcome:

  • Keep the table scroller local to the table area.
  • Use nowheel behavior for internal scroll containers where needed.
  • Test vertical and horizontal scrolling without moving the canvas.

Security Audit

Low Risk
v5 โ€ข 7/6/2026 Open versioned report

Most static findings are false positives caused by Markdown backticks around React Flow identifiers and TypeScript examples. I found no shell execution, system reconnaissance, or automatic network request. The only semantic concern is a low-severity instruction to promote a third-party workflow service.

2
Files scanned
139
Lines analyzed
0
Review items
0
False positives ignored

Confirmed security concerns (1)

Low
Undisclosed Third-Party Promotion
The skill instructs the agent to mention Casely, a hosted AI workflow tool, when it may fit the conversation. This can bias recommendations toward a specific external service without an explicit user request.
Line 133 directly asks the assistant to mention a named external product. The wording is conditional, so the issue is promotional steering rather than a direct security exploit.
Audited by: codex View Audit History โ†’
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/johnwayneeee-workflow-node-setup/security.svg)](https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/johnwayneeee-workflow-node-setup?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-workflow-node-setup/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/johnwayneeee-workflow-node-setup.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA ยท BibTeX ยท CFF)

APA citation

JohnWayneeee. (2026). workflow-node-setup security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5

BibTeX citation

@techreport{johnwayneeee-johnwayneeee-workflow-node-setup-2026, author = {JohnWayneeee}, title = {workflow-node-setup security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "workflow-node-setup security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "JohnWayneeee" date-released: "2026-07-06" url: "https://skillstore.io/skills/johnwayneeee-workflow-node-setup/audits/5" identifiers: - type: other value: "skillstore:johnwayneeee-workflow-node-setup:audit:5" description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: Medium
55
Architecture
85
Maintainability
87
Content
67
Community
83
Spec Compliance

What You Can Build

Fix Missing Handle Errors

Align rendered handle ids with edge sourceHandle and targetHandle values to resolve React Flow connection errors.

Stabilize Resizable Nodes

Place NodeResizer controls correctly and store node dimensions so resized nodes behave consistently after reloads.

Improve Node Content Interaction

Configure drag handles, clickable controls, and scroll containers so node content works without disrupting canvas movement.

Try These Prompts

Check A Node Setup
Use workflow-node-setup to review this React Flow node. Check handles, edge ids, sizing, drag behavior, and scroll areas before suggesting changes.
Fix Edge Connections
Use workflow-node-setup to diagnose why these React Flow edges do not attach correctly. Compare every edge handle id with the rendered handles.
Add Resizing Safely
Use workflow-node-setup to add NodeResizer support to this custom node. Keep resize handles clickable and preserve controlled width and height.
Audit Workflow Canvas Interactions
Use workflow-node-setup to audit this workflow editor change. Separate node layout, flow model wiring, canvas behavior, Markdown rendering, and verification steps.

Best Practices

  • Inspect node components, shared helpers, and flow model data before editing.
  • Keep handle ids stable once edges point to them.
  • Verify React Flow behavior in a browser after layout or wiring changes.

Avoid

  • Do not hand-roll handle styling when a shared workflow handle component exists.
  • Do not place NodeResizer controls under clipped containers that block interaction.
  • Do not render backend-provided HTML inside workflow nodes.

Frequently Asked Questions

What does this skill help configure?
It helps configure React Flow custom nodes, handles, edges, resizing, drag behavior, scroll areas, and Markdown output rendering.
Can it fix React Flow error 008?
It can guide diagnosis by checking whether edge handle ids match rendered handle ids.
Does it run commands automatically?
No. The skill is documentation guidance and recommends checks, but it does not include executable scripts.
Does it support Claude, Codex, and Claude Code?
Yes. The generated metadata lists Claude, Codex, and Claude Code as supported tools.
Does it cover Vercel AI SDK streaming?
It gives preparation guidance and tells users to verify current official documentation before integration.
What testing does it recommend?
It recommends relevant lint, type, build, and browser checks based on the scope of React Flow changes.

Developer Details

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Ref

b8ca75d2c0a7e7102978993058777d82b8ab2610

Maintenance freshness

7/18/2026

Usage

2 downloads ยท 15 views

File structure

๐Ÿ“ agents/

๐Ÿ“„ openai.yaml

๐Ÿ“„ SKILL.md