CtrlK
BlogDocsLog inGet started
Tessl Logo

react-flow-node-ts

Create React Flow node components following established patterns with proper TypeScript types and store integration.

52

Quality

59%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/react-flow-node-ts/SKILL.md

The canonical home for this skill is react-flow-node-ts in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

64%Scale 1-5

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

A reasonably well-structured skill that provides concrete code patterns and clear file paths for React Flow node creation. Its main weaknesses are the absence of validation/verification steps in the multi-file integration workflow and some ambiguity between the template files and inline code examples. The 'When to Use' section is a vacuous placeholder that should be removed or replaced with meaningful trigger conditions.

Suggestions

Add a verification step after integration (e.g., 'Verify the node appears in AddBlockMenu and renders correctly in the canvas') to improve workflow clarity.

Clarify the relationship between the assets/ templates and the inline code patterns — state explicitly whether the inline code is a summary of the templates or an alternative approach.

Replace the 'When to Use' section with actual trigger conditions (e.g., 'Use when adding a new visual block type to the canvas') or remove it entirely.

Add a brief example of the store defaults entry or nodeTypes registration since those are less obvious integration steps.

DimensionReasoningScore

Conciseness

Generally efficient and assumes Claude's competence. The 'When to Use' section is a meaningless tautology that wastes tokens, and there's minor redundancy between the Quick Start placeholders and the inline code examples, but overall it's lean.

4 / 5

Actionability

Provides concrete, executable code patterns for both the component and type definitions, plus a clear list of integration steps with specific file paths. Minor gap: no example of the store defaults or nodeTypes registration code, which are non-obvious steps.

4 / 5

Workflow Clarity

The 6 integration steps are clearly sequenced, but there are no validation checkpoints — no guidance on how to verify the node renders correctly, no feedback loop for common errors (e.g., missing registration causing silent failures). Since this involves multi-file integration, the lack of verification steps is a notable gap.

3 / 5

Progressive Disclosure

References assets/template.tsx and assets/types.template.ts appropriately, but no bundle files were provided to verify these exist. The inline code examples partially duplicate what the templates presumably contain. The structure is reasonable but the relationship between templates and inline examples is unclear — should the user use templates or the inline patterns?

3 / 5

Total

14

/

20

Passed

Description

53%Scale 1-5

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

The description identifies a clear domain (React Flow node components) and mentions key technical aspects (TypeScript types, store integration), giving it reasonable specificity. However, it lacks a 'Use when...' clause which is critical for skill selection, and could benefit from more natural trigger terms and synonyms that users might actually say when needing this skill.

Suggestions

Add a 'Use when...' clause with trigger phrases like 'Use when the user needs to create or modify React Flow nodes, build node-based editors, or work with flow diagrams.'

Include natural synonyms and related terms such as 'custom nodes', 'flow diagram', 'node-based UI', 'graph editor', 'node handles', or 'reactflow'.

Enumerate more specific actions such as 'define node data types, configure input/output handles, wire up Zustand store slices, and style node components'.

DimensionReasoningScore

Specificity

Names the domain (React Flow node components) and mentions a couple of concrete aspects (TypeScript types, store integration), but doesn't enumerate specific actions like creating handles, defining node data schemas, connecting to state management, etc.

3 / 5

Completeness

Has a clear 'what' (create React Flow node components with TypeScript types and store integration) but completely lacks a 'when' clause. Per rubric guidelines, missing 'Use when...' caps completeness at 3.

3 / 5

Trigger Term Quality

Includes 'React Flow', 'node components', 'TypeScript', and 'store integration' which are relevant but somewhat technical. Missing natural user phrases like 'flow diagram', 'graph editor', 'custom nodes', 'drag and drop nodes', or 'node-based UI'.

3 / 5

Distinctiveness Conflict Risk

Fairly distinct due to the specific mention of 'React Flow' which narrows the domain significantly. Minor overlap risk with general React component creation skills, but the React Flow specificity helps differentiate it.

4 / 5

Total

13

/

20

Passed

Validation

90%

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

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-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.