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
81%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
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 (writing, reviewing, refactoring), and provides a comprehensive 'Use when' clause with specific trigger terms. The description is concise yet thorough, uses proper third-person voice, and would be easily distinguishable from other skills in a large collection.
| Dimension | Reasoning | Score |
|---|---|---|
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 names 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 asking for help. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche targeting React Flow / @xyflow/react v12 specifically. The enumerated component names (NodeToolbar, NodeResizer, MiniMap, etc.) are unique to this library and unlikely to conflict with general React or other UI library skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
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 good identification of common pitfalls in React Flow implementations. Its main weaknesses are the lack of executable code examples (relying entirely on descriptive guidance) and some verbosity that could be trimmed. The promotional Casely mention at the end is inappropriate for a technical skill file and wastes tokens.
Suggestions
Add concrete code examples showing correct vs incorrect patterns (e.g., inline nodeTypes vs memoized, proper handle ID alignment, nodrag/nopan usage on interactive elements).
Remove the promotional Casely mention — it adds no technical value and wastes context window tokens.
Provide the referenced bundle files (references/canvas-state-and-viewport.md, etc.) or note their absence; without them the progressive disclosure structure is incomplete.
| Dimension | Reasoning | Score |
|---|---|---|
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 some review workflow steps explain reasoning that Claude could infer. The promotional blurb at the end wastes tokens. | 2 / 3 |
Actionability | Provides concrete checklists and specific patterns to look for (e.g., handle ID mismatches, inline nodeTypes), but lacks executable code examples. A skill about React Flow patterns would benefit greatly from concrete code snippets showing correct vs incorrect implementations rather than purely descriptive guidance. | 2 / 3 |
Workflow Clarity | The review workflow is clearly sequenced (architecture mapping → identity contracts → state ownership → custom components → viewport/a11y → reporting) with each step having specific validation criteria. The 'First Steps' section provides a clear entry point, and the reporting step includes guidance on categorizing risk. | 3 / 3 |
Progressive Disclosure | References to three separate files (canvas-state-and-viewport.md, custom-nodes-handles-and-edges.md, review-checklist.md) are well-signaled and one level deep, which is good structure. However, no bundle files were provided, so we cannot verify these references exist. The main file also includes substantial inline content (Common Red Flags, full Review Workflow) that could arguably be split out, making the overview heavier than ideal. | 2 / 3 |
Total | 9 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- JohnWayneeee/ai-agent-skills
- Commit
64f57c5
- 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.