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.

54

Quality

62%

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

71%Weight 40%Scale 1-5

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

The body is efficient and actionable with concrete code and a clear integration sequence, but it suffers from broken asset references and a vague trailing 'When to Use' section. Fixing the missing template files would meaningfully raise its quality.

Suggestions

Either add the missing assets/template.tsx and assets/types.template.ts files, or remove the 'Templates' / 'Quick Start' references to them and keep only the inline patterns that actually exist.

Replace the filler 'When to Use' sentence with concrete trigger conditions (e.g. 'Use when adding a new React Flow node type to the canvas') to remove redundancy and improve trigger clarity.

Add a short verification checkpoint to the integration steps, e.g. 'Confirm the new node renders by adding it via AddBlockMenu and checking the canvas,' to strengthen workflow clarity.

DimensionReasoningScore

Conciseness

The body is lean — Quick Start, placeholder substitution, two compact code patterns, and numbered integration steps with no explanation of concepts Claude already knows; the only padding is the vague 'When to Use' section ('This skill is applicable to execute the workflow or actions described in the overview'), matching 'efficient; minor instances that could be trimmed'.

4 / 5

Actionability

Provides concrete inline code (memo node component with Handle/NodeResizer, a typed interface), explicit placeholder substitution, and six integration steps with specific file paths; the gap is that the referenced template files (assets/template.tsx, types.template.ts) do not exist, slightly reducing copy-paste readiness.

4 / 5

Workflow Clarity

The 'Integration Steps' section gives a clear, ordered 1-6 sequence with concrete target paths (types/index.ts, components/nodes/, app-store.ts, nodeTypes, AddBlockMenu); this is a non-destructive scaffolding task so the missing-validation cap does not apply, but there are also no checkpoints, so it sits below a 5.

4 / 5

Progressive Disclosure

Sections are well-organized, but the body references assets/template.tsx and assets/types.template.ts while no assets/ directory exists — the references are broken; scoring against the actual (absent) bundle structure places this at 'some structure but references not clearly signaled / should be separate', and the broken links prevent a higher score.

3 / 5

Total

15

/

20

Passed

Description

53%Weight 40%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 states a clear, niche-specific purpose but omits any explicit 'when to use' trigger guidance, which caps its completeness. It is reasonably specific and distinct but would benefit from natural trigger terms and a use-when clause.

Suggestions

Add an explicit 'Use when ...' clause naming natural triggers, e.g. 'Use when creating or scaffolding React Flow node components, adding a new node type, or wiring nodes into the app store.'

Replace the generic phrase 'following established patterns' with concrete capabilities (e.g., 'with Handles, NodeResizer, memoization, and Zustand store bindings') to lift specificity.

Include common user-facing synonyms/extensions such as 'React Flow', '@xyflow/react', 'custom node', and 'node type registration' to improve trigger-term coverage.

DimensionReasoningScore

Specificity

Quotes 'Create React Flow node components following established patterns with proper TypeScript types and store integration' — names the domain plus a few concrete aspects (types, store integration), but 'following established patterns' is generic filler and coverage is not comprehensive, matching the anchor that names the domain and 1-2 concrete actions.

3 / 5

Completeness

It clearly states what the skill does ('Create React Flow node components ... with proper TypeScript types and store integration') but provides no 'Use when ...' clause or equivalent trigger guidance; per the rubric a missing explicit trigger caps completeness at 3.

3 / 5

Trigger Term Quality

Relevant keywords like 'React Flow', 'node components', 'TypeScript types', and 'store integration' are present, but it lacks common variations or a natural trigger phrase a user would say, fitting the 'some relevant keywords but missing variations' anchor.

3 / 5

Distinctiveness Conflict Risk

'React Flow node components' is a specific niche with low conflict risk versus unrelated skills, though it could marginally overlap with other React/frontend scaffolding skills, fitting the 'mostly distinct; minor overlap risk' anchor rather than a clear niche 5.

4 / 5

Total

13

/

20

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

referenced_paths_exist

Referenced path issues: 2 missing

Warning

Total

14

/

16

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.