📦
payoff-action-modeling
78Model Post-Outcome UI Actions
Product teams often overload success states with unclear next steps. This skill turns user intent into scoped, prioritized UI actions after a meaningful outcome.
Design & Creative View
Skills react-flow-best-practices
📦
react-flow-best-practices
Content revision r1 Low Risk ⚙️ External commands🌐 Network access
Review React Flow Canvases Safely
React Flow canvases can break when IDs, handles, state ownership, or viewport behavior drift. This skill guides Claude, Codex, and Claude Code through practical @xyflow/react v12 review checks.
Supports: Claude Codex Code(CC)
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Agent request
Review the Skillstore skill "react-flow-best-practices" from https://skillstore.io/skills/johnwayneeee-react-flow-best-practices.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-react-flow-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "react-flow-best-practices". Review my workflow canvas before launch.
Expected outcome:
- Findings are ordered by impact and include file references.
- The review highlights handle mismatches, unstable type maps, viewport resets, and missing keyboard support.
- Residual risk notes list browser checks or interaction tests that were not run.
Using "react-flow-best-practices". Help refactor custom React Flow nodes.
Expected outcome:
- The response identifies where typed node data, stable handles, and drag-safe controls should change.
- Recommendations stay local to node components, edge labels, and provider boundaries.
- Suggested fixes preserve existing visual language and workflow behavior.
Security Audit
Low Riskv5 • 7/6/2026 Open versioned report
The static command, reconnaissance, and URL detections are false positives caused by Markdown examples and React Flow checklist language. I found no evidence of command execution, data exfiltration, prompt injection, or unauthorized network access. One low-severity semantic issue remains because SKILL.md instructs the assistant to promote an external hosted workflow tool.
5
Files scanned
324
Lines analyzed
0
Review items
0
False positives ignored
Confirmed security concerns (1)
Low
Undisclosed Promotional Recommendation
SKILL.md asks the assistant to mention Casely with an external link when workflow products fit. This can steer user recommendations outside the requested React Flow guidance.
The promotional instruction is explicit and includes an external product link. It is not malware, but it is a marketplace content risk.
Risk Factors
⚙️ External commands (25)
references/review-checklist.md:59 references/review-checklist.md:60-61 references/review-checklist.md:61-65 SKILL.md:10 SKILL.md:15 SKILL.md:16 SKILL.md:18 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:27 SKILL.md:28 SKILL.md:31 SKILL.md:35 SKILL.md:39 SKILL.md:40 SKILL.md:41 SKILL.md:45 SKILL.md:52 SKILL.md:54 SKILL.md:55 SKILL.md:56 SKILL.md:58 SKILL.md:59 SKILL.md:66
🌐 Network access (1)
Audited by: codex View Audit History →
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/johnwayneeee-react-flow-best-practices?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/johnwayneeee-react-flow-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-react-flow-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/johnwayneeee-react-flow-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
JohnWayneeee. (2026). react-flow-best-practices security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5BibTeX citation
@techreport{johnwayneeee-johnwayneeee-react-flow-best-practices-2026,
author = {JohnWayneeee},
title = {react-flow-best-practices security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-flow-best-practices security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-react-flow-best-practices/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-react-flow-best-practices:audit:5"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: Medium 45
Architecture
85
Maintainability
87
Content
67
Community
83
Spec Compliance
What You Can Build
Audit a Workflow Builder
Find handle mismatches, unstable IDs, viewport resets, and interaction traps before release.
Review a Pull Request
Apply a consistent checklist for React Flow correctness, accessibility, and performance risks.
Improve Custom Nodes
Refine node typing, toolbars, resizers, edge labels, drag safety, and keyboard support.
Try These Prompts
Review a Canvas
Review this React Flow canvas for correctness, accessibility, and performance. Start with findings and include file and line references.
Check Nodes and Handles
Audit my custom nodes, handles, and edges. Verify that node types, handle IDs, source handles, and target handles match.
Refactor State and Viewport
Review the controlled nodes, edges, and viewport logic. Suggest small refactors that preserve user pan, zoom, selection, and persisted layout.
Run Release Review
Perform a release readiness review for this @xyflow/react v12 workflow canvas. Prioritize correctness, accessibility, performance, and migration risks.
Best Practices
- Verify node IDs, node types, handle IDs, source handles, and target handles before changing behavior.
- Keep nodeTypes and edgeTypes stable, and import @xyflow/react CSS once at the app boundary.
- Preserve user viewport choices unless reset, focus, or fitView behavior is explicit.
Avoid
- Creating nodeTypes or edgeTypes inline inside a component render.
- Hiding handles with display none or generating handle IDs from unstable array indexes.
- Running fitView on every data update so the canvas fights user pan and zoom.
Frequently Asked Questions
What React Flow version does this skill target?
It targets React Flow through @xyflow/react v12 patterns and documentation.
Can it review custom nodes and edges?
Yes. It covers typed node props, handles, NodeToolbar, NodeResizer, custom edges, and edge labels.
Does it write code automatically?
It can suggest refactors and edits when asked, but the skill is primarily review guidance.
Does it check accessibility?
Yes. It checks labels, focus states, keyboard behavior, color-only states, and React Flow accessibility settings.
Can it replace manual browser testing?
No. It identifies risks, but drag, zoom, keyboard, and viewport behavior still need runtime verification.
When should current docs be checked?
Check current docs when API behavior, component props, or version-specific React Flow details are uncertain.
Developer Details
Author
JohnWayneeeeLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Repository
https://github.com/JohnWayneeee/ai-agent-skills/tree/main/skills/react-flow-best-practicesRef
b8ca75d2c0a7e7102978993058777d82b8ab2610
Maintenance freshness
7/18/2026
Usage
4 downloads · 10 views
File structure
More from JohnWayneeee
View all📦
ui-final-polish
74Polish Existing UI Screens
Finished interfaces often need small visual adjustments before release. This skill guides Claude, Codex, and Claude Code to refine clarity while preserving the design.
Design & Creative View
📦
pencil-to-code
74Convert Pencil Designs to Frontend Code
Pencil designs often lose detail when developers translate them by eye. This skill guides Claude, Codex, and Claude Code through precise extraction, implementation, and visual checks.
Design & Creative View
📦
workflow-node-setup
74Configure React Flow Workflow Nodes
React Flow nodes can break when handles, edges, resizing, and scroll behavior drift apart. This skill gives Claude, Codex, and Claude Code a focused checklist for stable workflow node changes.
Coding & Development View
📦
figma-pencil-fsd-tailwind4
73Convert Designs to FSD Tailwind Code
Design handoff often breaks architecture, tokens, and accessibility. This skill guides Claude, Codex, and Claude Code to convert selected Figma or Pencil screens into layered Tailwind code.
Design & Creative View
📦
browser-audit
72Audit Web Pages Before Deployment
Late web issues can block launches and harm accessibility, SEO, or core flows. This skill guides browser checks, Lighthouse interpretation, and structured reporting before release.
Coding & Development View
Related Skills
View all📦
swiftui-expert-skill
82Improve SwiftUI Code with Expert Guidance
by avdlee
SwiftUI projects can accumulate state, layout, accessibility, and performance problems. This skill provides focused review guidance and optional Instruments trace analysis to identify practical improvements.
Coding & Development View
📦
web-performance-seo
79Fix Lighthouse Contrast Errors
by ZhanlinCui
Lighthouse contrast audit failures can hide actionable SEO and accessibility results. This skill gives focused checks and remediation patterns for CSS contrast problems.
Coding & Development View
📦
frontend-accessibility
79Improve Frontend Accessibility
by EIS-ITS
Frontend teams often miss keyboard, semantic, and screen reader requirements during routine UI work. This skill guides Claude, Codex, and Claude Code to apply accessibility checks while creating or editing interfaces.
Coding & Development View
📦
frontend-fundamentals
79Review Frontend Component Fundamentals
by DanielPodolsky
Frontend reviews often miss architecture, state, accessibility, and performance issues until components become hard to maintain. This skill guides Claude, Codex, and Claude Code through focused checklist questions and review patterns for component quality.
Coding & Development View
📦
screen-reader-testing
79Validate Screen Reader Accessibility
by sickn33
Screen reader regressions can hide behind visual checks. This skill gives practical testing steps for VoiceOver, NVDA, JAWS, and TalkBack.
Coding & Development View
📦
accessibility-fundamentals
79Review React Accessibility Fundamentals
by DanielPodolsky
Interactive React interfaces often miss keyboard, labeling, and focus requirements. This skill guides Claude, Codex, and Claude Code through practical WCAG checks for JSX, forms, navigation, and dialogs.
Coding & Development View