CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

react-flow-node-ts

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

Quality

69%

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 ./skills/react-flow-node-ts/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%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.

A tight, code-centric skill body with genuinely useful patterns and a concrete integration checklist, undermined by referencing template files missing from the bundle and by the total absence of validation steps. The dead-weight "When to Use" section reads like boilerplate and should be replaced with real applicability guidance.

Suggestions

Ship the referenced bundle files (assets/template.tsx, assets/types.template.ts) or remove the "Copy templates from assets/" instruction and make the inline patterns the canonical source.

Add validation checkpoints to the integration steps (e.g., run the TypeScript compiler, confirm the node renders in the canvas after registering nodeTypes) so errors surface before later steps.

Replace the filler "When to Use" sentence with actual applicability guidance (when to create a new node type vs. modify an existing one), and give concrete code for the registration and menu steps.

DimensionReasoningScore

Conciseness

The body is lean and code-first with no explanations of concepts Claude already knows; every section except the circular filler "This skill is applicable to execute the workflow or actions described in the overview." and the H1 repeating the description earns its place. Not 5 because those two elements are pure waste; not 3 because the padding is minor rather than a pattern.

4 / 5

Actionability

The inline Node Component and Type Definition patterns are complete executable code, and the placeholder substitution plus six integration steps cite specific file paths. Not 5 because "Copy templates from assets/" points to files that do not exist in the bundle, and steps like "Register in canvas nodeTypes" and "Add to AddBlockMenu and ConnectMenu" give no code or example.

4 / 5

Workflow Clarity

The Integration Steps form a clear, ordered six-step sequence with real target paths, but there are no validation checkpoints at all (no typecheck, no verify-the-node-renders step) — matching anchor 3 (sequence present, checkpoints missing or implicit). Not 4 because the gap is total rather than minor.

3 / 5

Progressive Disclosure

The body is organized into well-labeled sections and keeps its length appropriate, but its two bundle references — "assets/template.tsx - Node component" and "assets/types.template.ts - TypeScript definitions" — point to files that do not exist in the bundle, breaking the primary navigation path the Quick Start depends on. Not 4 because broken references are more than a minor organization gap; not 2 because the section structure itself is clean and nothing is inlined that belongs elsewhere.

3 / 5

Total

14

/

20

Passed

Description

61%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.

A concise, concrete description for a well-defined niche, weakened by the complete absence of any "when to use" trigger guidance. Adding an explicit "Use when..." clause with natural trigger phrases would raise both completeness and trigger coverage.

Suggestions

Append an explicit trigger clause, e.g. "Use when the user asks to create or modify React Flow (ReactFlow/xyflow) node components or add new node types to the canvas."

Include natural synonyms and library aliases (ReactFlow, xyflow, custom node types) so the description matches how users actually phrase the request.

Optionally enumerate the concrete deliverables (component, types, store defaults, registration) to lift specificity beyond a single action.

DimensionReasoningScore

Specificity

"Create React Flow node components" names the domain and one concrete action, with "TypeScript types and store integration" as facets of that single action rather than several distinct actions. It matches anchor 3 (domain plus 1-2 concrete actions, not comprehensive); a 4 would require listing several separate capabilities.

3 / 5

Completeness

The "what" is clear (create React Flow node components with TypeScript types and store integration), but there is no "Use when..." clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. Not 2 because the "what" is concrete and specific.

3 / 5

Trigger Term Quality

"React Flow node components", "TypeScript", and "store" are natural terms a user working on this task would say, giving good keyword coverage. Not 5 because common variations and synonyms ("ReactFlow", "xyflow", "custom node") are absent.

4 / 5

Distinctiveness Conflict Risk

"React Flow node components" carves out a clear niche that would rarely trigger the wrong skill, with only minor overlap risk against generic React/TypeScript component skills. Not 5 because the description includes no explicit distinct trigger phrases that further separate it.

4 / 5

Total

14

/

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.

Validation — 14 / 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

Path

skills/react-flow-node-ts/SKILL.md

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.