gedsys/react-flow-usage
Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.
95
95%
Does it follow best practices?
Impact
Pending
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 follows best practices. It uses third person voice, provides comprehensive specific capabilities, includes a well-structured 'Use when...' clause with seven distinct trigger scenarios, and contains natural keywords users would actually use when needing this skill. The description is distinctive enough to avoid conflicts with general React or visualization skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'building flow editors or node-based interfaces', 'creating custom nodes and edges', 'implementing drag-and-drop workflows', 'optimizing performance for large graphs', 'managing flow state and interactions', 'implementing auto-layout or positioning', and 'TypeScript integration'. | 3 / 3 |
Completeness | Clearly answers both what ('Comprehensive React Flow patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams') AND when with explicit 'Use when...' clause listing seven specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes excellent natural keywords users would say: 'React Flow', '@xyflow/react', 'node-based UIs', 'workflow editors', 'interactive diagrams', 'custom nodes and edges', 'drag-and-drop', 'auto-layout', 'TypeScript'. Covers both the library name and common use case terminology. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche targeting the specific '@xyflow/react' library. The combination of 'React Flow', 'node-based UIs', 'workflow editors', and 'interactive diagrams' creates a unique fingerprint unlikely to conflict with general React or diagramming skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
87%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality skill with excellent actionability and progressive disclosure. The code examples are production-ready and well-organized, with clear references to deeper documentation. Minor improvement could be made to workflow clarity by adding explicit validation steps in the save/restore pattern.
Suggestions
Add explicit validation checkpoint in restoreFlow before applying state (e.g., validate node/edge structure, check for required fields)
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, providing executable code examples without explaining basic React or JavaScript concepts Claude already knows. Every section delivers actionable information without padding. | 3 / 3 |
Actionability | All code examples are fully executable and copy-paste ready with proper imports, TypeScript types, and complete implementations. The patterns cover real-world scenarios like drag-and-drop, save/restore, and connection validation. | 3 / 3 |
Workflow Clarity | While individual patterns are clear, the save/restore workflow lacks explicit validation checkpoints before applying restored state. The drag-and-drop includes a warning but no explicit recovery step if node creation fails. | 2 / 3 |
Progressive Disclosure | Excellent structure with a quick start, essential patterns inline, and clear one-level-deep references to detailed rules in `rules/` directory, full documentation in `AGENTS.md`, and scraped docs in `scraped/`. Navigation is well-signaled with organized categories. | 3 / 3 |
Total | 11 / 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.
Reviewed
Table of Contents