react-flow-node
Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
Install with Tessl CLI
npx tessl i github:microsoft/agent-skills --skill react-flow-nodeOverall
score
93%
Does it follow best practices?
Validation for skill structure
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 a well-crafted skill description that excels across all dimensions. It provides specific capabilities (React Flow nodes, TypeScript, Zustand), includes natural trigger terms users would actually use, explicitly states both what it does and when to use it, and targets a clear niche that won't conflict with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Create React Flow node components', 'TypeScript types', 'handles', 'Zustand integration', 'building custom nodes', 'creating visual workflow editors', 'implementing node-based UI components'. | 3 / 3 |
Completeness | Clearly answers both what ('Create React Flow node components with TypeScript types, handles, and Zustand integration') and when ('Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'React Flow', 'node components', 'TypeScript', 'Zustand', 'custom nodes', 'canvas', 'visual workflow editors', 'node-based UI'. Good coverage of domain-specific terms. | 3 / 3 |
Distinctiveness Conflict Risk | Very specific niche targeting React Flow library with distinct triggers like 'React Flow', 'node-based UI', 'visual workflow editors'. Unlikely to conflict with general React or TypeScript skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
88%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-crafted skill that efficiently communicates React Flow node patterns with executable code and clear file organization. The main weakness is the integration workflow lacks validation steps—there's no guidance on testing the node after registration or verifying it appears correctly in the canvas.
Suggestions
Add a validation step after integration (e.g., 'Verify node renders in canvas by adding it via AddBlockMenu and checking console for errors')
Consider adding a troubleshooting note for common issues like missing nodeTypes registration or type mismatches
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Content is lean and efficient, assuming Claude knows React, TypeScript, and React Flow basics. No unnecessary explanations of what nodes are or how React works—just the patterns needed. | 3 / 3 |
Actionability | Provides executable TypeScript/TSX code patterns that are copy-paste ready, concrete file paths, and specific placeholder conventions. The integration steps list exact file locations. | 3 / 3 |
Workflow Clarity | Integration steps are listed clearly but lack validation checkpoints. No guidance on verifying the node works after registration, testing the component, or handling common errors during integration. | 2 / 3 |
Progressive Disclosure | Well-structured with quick start overview, clear references to template files in assets/, and inline patterns for immediate use. One-level-deep references are clearly signaled. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
88%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 14 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
Total | 14 / 16 Passed | |
- 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.