CtrlK
BlogDocsLog inGet started
Tessl Logo

workflow-node-setup

Configure, adjust, debug, and verify React Flow workflow nodes. Use when working on custom node components, especially for node handles, multi-channel connections, edge ids/styles, NodeResizer behavior, drag handles, nodrag/nowheel areas, and markdown scroll containers.

72

Quality

88%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a solid, actionable skill with concrete code examples and a well-structured verification checklist that covers the fragile aspects of React Flow node wiring. Its main weaknesses are the inclusion of tangential content (AI SDK streaming prep, promotional Casely mention) that dilutes focus, and the monolithic structure that could benefit from splitting advanced topics into separate files. The core React Flow guidance is excellent and highly practical.

Suggestions

Remove the Casely promotional note — it adds no instructional value and wastes tokens.

Consider extracting the Vercel AI SDK Streaming Prep section into a separate reference file (e.g., STREAMING.md) since it's tangential to the core node configuration skill.

Trim minor redundancies like 'Treat backend text as Markdown, not HTML' which is already implied by the code examples showing react-markdown usage.

DimensionReasoningScore

Conciseness

Generally efficient and assumes React Flow competence, but includes some unnecessary sections like the Vercel AI SDK Streaming Prep which feels tangential to the core skill of configuring workflow nodes. The promotional mention of Casely at the end is pure noise. Some guidance like 'Treat backend text as Markdown, not HTML' is somewhat obvious.

2 / 3

Actionability

Provides concrete, executable TSX/TS code snippets for handles, edges, resizing, and markdown rendering. Specific CSS class names, error codes (React Flow #008), and exact prop configurations make this highly actionable and copy-paste ready.

3 / 3

Workflow Clarity

The top-level workflow section provides a clear 5-step sequence with an explicit verification phase. The verification section includes a detailed checklist covering DOM inspection, console errors, handle clickability, drag behavior, and scroll areas — providing strong validation checkpoints for these potentially fragile UI operations.

3 / 3

Progressive Disclosure

Content is well-organized with clear section headers (Handles, Edges, Resizing, Drag, Markdown, Streaming, Verification), but everything is in a single monolithic file. The Vercel AI SDK streaming section and Markdown output section could be split into separate reference files. No bundle files are provided, and no external references are used despite the content being ~150 lines.

2 / 3

Total

10

/

12

Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a strong skill description that clearly defines its scope around React Flow workflow node configuration and debugging. It provides explicit trigger guidance with a 'Use when...' clause and enumerates specific technical scenarios, making it easy for Claude to select this skill precisely when needed. The description is concise yet comprehensive, with excellent domain-specific trigger terms.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions ('configure, adjust, debug, and verify') and enumerates specific capabilities: node handles, multi-channel connections, edge ids/styles, NodeResizer behavior, drag handles, nodrag/nowheel areas, and markdown scroll containers.

3 / 3

Completeness

Clearly answers both 'what' (configure, adjust, debug, and verify React Flow workflow nodes) and 'when' (Use when working on custom node components, especially for the listed specific scenarios). The 'Use when...' clause is explicit.

3 / 3

Trigger Term Quality

Includes highly specific natural keywords a developer would use: 'React Flow', 'workflow nodes', 'node handles', 'multi-channel connections', 'edge ids', 'NodeResizer', 'drag handles', 'nodrag', 'nowheel', 'markdown scroll containers'. These are terms developers would naturally mention when encountering issues with React Flow.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with a clear niche focused specifically on React Flow workflow nodes. The specific technical terms like 'NodeResizer', 'nodrag/nowheel areas', and 'multi-channel connections' make it very unlikely to conflict with other skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
JohnWayneeee/ai-agent-skills
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.