Name: react-flow-architect
Rating: 48.8 (1 reviews)
Author: administrakt0r

react-flow-architect

Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.

Quality

53%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

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-architect/SKILL.md

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

Quality

Content

53%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 a dense, executable pattern catalog with strong code examples, but it is monolithic with no progressive disclosure into bundle files and repeats material in the complete example.

Suggestions

Move the graph-analyzer script and the complete example into actual files under scripts/ and references/, then link to them from SKILL.md to enable progressive disclosure.

Remove the duplicated styledEdges/toggle-expand logic from 'Complete Example' or replace it with a reference to the earlier sections.

Delete the closing 'This comprehensive skill provides everything needed...' paragraph and the vague 'When to Use' filler line.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, code-forward content with minimal concept over-explanation, but the 'Complete Example' repeats the styledEdges and toggle-expand logic already shown, and the closing 'This comprehensive skill provides everything needed...' plus the generic 'When to Use' line are unnecessary padding.	3 / 5
Actionability	The skill provides substantial copy-paste-ready TypeScript (TreeNode schema, buildVisibleNodes, useFocusMode, dagre layout), with only minor gaps where helpers like buildIncrementalUpdate, areSetsEqual, and calculateBreadcrumbPath are referenced but not defined.	4 / 5
Workflow Clarity	Content is organized into topical sections (Quick Start, Core Patterns, Advanced Features) rather than a sequenced workflow, and there are no validation checkpoints; this fits a pattern-catalog skill but lacks the explicit sequencing the higher anchors require.	3 / 5
Progressive Disclosure	No references/, scripts/, or assets/ bundle directories exist, so all ~600 lines live in one monolithic SKILL.md; the graph-analyzer code is even annotated '// scripts/graph-analyzer.js' but the file is not materialized, inlining content that clearly belongs in separate files.	2 / 5
	Total	12 / 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 clearly states what the skill builds and targets a distinct library niche, but it lacks an explicit 'when to use' trigger clause and relies on broad capability categories rather than discrete actions.

Suggestions

Add an explicit 'Use when...' clause naming concrete trigger phrases (e.g., 'Use when building ReactFlow graphs, node editors, or hierarchical flow diagrams').

Replace broad feature categories with discrete verbs the user would recognize (e.g., 'render hierarchical trees, memoize large graphs, manage undo/redo state').

Include natural synonyms like 'flow diagram', 'node graph', and 'react flow' to improve trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ('ReactFlow applications') and three capability areas ('hierarchical navigation', 'performance optimization', 'advanced state management'), but these are broad feature categories rather than the discrete concrete actions the anchor-4 example lists (extract, fill, merge, convert).	3 / 5
Completeness	The 'what' is clearly stated ('Build production-ready ReactFlow applications...'), but there is no 'Use when...' clause or equivalent trigger guidance in the description, which caps completeness at 3 per the judging guidelines.	3 / 5
Trigger Term Quality	The strong keyword 'ReactFlow' is present alongside 'navigation', 'state management', and 'performance', but common natural synonyms users say ('flow diagram', 'node graph', 'flow chart', 'react flow') are missing.	3 / 5
Distinctiveness Conflict Risk	ReactFlow is a specific library niche with distinct triggers; overlap risk is limited to closely related graph/visualization skills, fitting the 'mostly distinct; minor overlap' anchor.	4 / 5
	Total	13 / 20 Passed

Validation

81%

Warnings & errors only

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

Validation — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (620 lines); consider splitting into references/ and linking	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
referenced_paths_exist	Referenced path issues: 1 missing	Warning

	Total	13 / 16 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: plugins/AI-Agents-Safe-Coding-Skills-claude/skills/react-flow-architect/SKILL.md
Commit: 57c135b

Reviewed: 2 days ago

Table of Contents

Discovery Implementation Validation

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.