CtrlK
BlogDocsLog inGet started
Tessl Logo

react-flow-best-practices

Best practices for writing, reviewing, and refactoring React Flow / @xyflow/react v12 canvases. Use when work touches React Flow components, custom nodes, custom edges, handles, node data typing, viewport controls, MiniMap/Background/Panel usage, NodeToolbar, NodeResizer, or workflow-builder review tasks.

68

Quality

81%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

Quality

Content

62%

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

This is a well-structured review-oriented skill with a clear workflow and specific domain knowledge about React Flow v12 pitfalls. Its main weaknesses are the lack of executable code examples (surprising for a React component skill) and some verbosity that could be trimmed. The progressive disclosure structure is reasonable but unverifiable without bundle files.

Suggestions

Add 2-3 concrete code examples showing correct patterns (e.g., memoized nodeTypes definition, typed NodeProps usage, nodrag/nopan on interactive elements inside nodes) to improve actionability.

Remove the promotional Casely mention and the 'Documentation Base' section to improve conciseness — neither adds actionable value for Claude.

Consider moving the 'Common Red Flags' list into the referenced review-checklist.md to reduce main file length and improve progressive disclosure.

DimensionReasoningScore

Conciseness

Generally efficient and assumes Claude's competence with React Flow concepts, but some sections are slightly verbose — e.g., the 'Common Red Flags' list could be tighter, and the 'Documentation Base' section adds little value. The promotional Casely mention is unnecessary filler.

2 / 3

Actionability

Provides specific, concrete guidance on what to check (handle IDs, nodeTypes placement, CSS imports) and names exact APIs/props, but lacks any executable code examples. For a code-centric skill about React components, the absence of even one concrete code snippet (e.g., correct nodeTypes definition, typed NodeProps usage, nodrag attribute placement) limits copy-paste actionability.

2 / 3

Workflow Clarity

The review workflow is clearly sequenced in six numbered steps with logical progression from architecture mapping → identity contracts → state → components → viewport/a11y → reporting. Each step includes specific validation criteria and explains the risk of failures, forming implicit feedback loops (e.g., 'confirm whether canvas is static/editable — this changes which issues matter').

3 / 3

Progressive Disclosure

References three specific files in 'references/' directory (canvas-state-and-viewport.md, custom-nodes-handles-and-edges.md, review-checklist.md) with clear guidance on when to use each, which is good structure. However, no bundle files were provided, so these references cannot be verified. The main file also inlines substantial content (Common Red Flags, full Review Workflow) that could arguably live in the referenced checklist file.

2 / 3

Total

9

/

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 an excellent skill description that clearly defines its scope around React Flow / @xyflow/react v12, lists concrete actions and components, and includes an explicit 'Use when...' clause with comprehensive trigger terms. It uses proper third-person voice and is concise yet thorough, making it easy for Claude to select this skill precisely when needed.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions ('writing, reviewing, and refactoring') and enumerates specific components and concepts (custom nodes, custom edges, handles, node data typing, viewport controls, MiniMap/Background/Panel, NodeToolbar, NodeResizer).

3 / 3

Completeness

Clearly answers both 'what' (best practices for writing, reviewing, and refactoring React Flow canvases) and 'when' (explicit 'Use when...' clause listing specific trigger scenarios including component types and task types).

3 / 3

Trigger Term Quality

Excellent coverage of natural terms a user would mention: 'React Flow', '@xyflow/react', 'v12', 'custom nodes', 'custom edges', 'handles', 'MiniMap', 'Background', 'Panel', 'NodeToolbar', 'NodeResizer', 'workflow-builder'. These are the exact terms developers would use when working with this library.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with a clear niche targeting React Flow / @xyflow/react v12 specifically. The library-specific component names (NodeToolbar, NodeResizer, MiniMap) and package name make it very unlikely to conflict with general React or other visualization library 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.