New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Reactflow Workflow

by veloxbase in veloxbase/veloxdb

Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance).

MITAuto-check passedFrontend & Design

Install Reactflow Workflow

skills CLI
$ npx skills add veloxbase/veloxdb --skill reactflow-workflow -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install veloxbase/veloxdb reactflow-workflow --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/veloxbase/veloxdb.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/reactflow-workflow .claude/skills/reactflow-workflow && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
reactflow-workflow
GitHub stars
646
Token cost
~897 tokens
SKILL.md length
374 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance).

  • Works in 4 steps: Keep @xyflow/react styles imported once… → Ensure the canvas parent has explicit… → Keep model state ownership in… → …
  • Working on schema diagram canvas behavior
  • SKILL.md covers Quick Start, VeloxDB Diagram Architecture, React Flow Implementation… and UX and Styling Guidance, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Reactflow Workflow is an agent skill from veloxbase/veloxdb. Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance). Use when working on schema diagram canvas behavior, replacing legacy canvas code, or improving diagram UX and scale.

Its SKILL.md is about 900 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components. It works with React, MySQL, SQLite and Tauri. The repository describes itself as: Database management, built for developers. The licence is MIT.

When your agent uses it

  • Working on schema diagram canvas behavior
  • Replacing legacy canvas code
  • Improving diagram UX and scale

Example prompts

  • “/reactflow-workflow”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Keep @xyflow/react styles imported once in the React Flow canvas module.
  2. Ensure the canvas parent has explicit width and height.
  3. Keep model state ownership in ModelWorkspace; keep ReactFlowCanvas mostly presentational and interaction-focused.
  4. Use DiagramSurfaceProps as the boundary contract between workspace state and rendering.

What it can do on your machine

Read from SKILL.md and the folder at commit 2ca04f2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • reactflow.dev

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Reactflow Workflow loads about 897 tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 374 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~71
When it runs · the whole SKILL.md, loaded when a task matches
~897

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from veloxbase/veloxdb at commit 2ca04f2, republished under its MIT licence (© veloxbase). 374 words, ~897 tokens.

Download SKILL.mdSave it as .claude/skills/reactflow-workflow/SKILL.md (or your agent's skills folder).
name
reactflow-workflow
description
Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance). Use when working on schema diagram canvas behavior, replacing legacy canvas code, or improving diagram UX and scale.

React Flow Workflow

Use this skill when implementing or improving the schema diagram surface in VeloxDB.

Quick Start

  1. Keep @xyflow/react styles imported once in the React Flow canvas module.
  2. Ensure the canvas parent has explicit width and height.
  3. Keep model state ownership in ModelWorkspace; keep ReactFlowCanvas mostly presentational and interaction-focused.
  4. Use DiagramSurfaceProps as the boundary contract between workspace state and rendering.

VeloxDB Diagram Architecture

  • src/features/model/components/ModelWorkspace.tsx:
    • owns diagram state (viewport, selection, on-canvas tables, pending FKs, groups)
    • computes display props and passes them into DiagramSurfaceAdapter
  • src/features/model/components/DiagramSurfaceAdapter.tsx:
    • forwards DiagramSurfaceProps to ReactFlowCanvas
  • src/features/model/components/ReactFlowCanvas.tsx:
    • renders React Flow nodes/edges, connects events to workspace callbacks, and exposes export handle

Keep this separation intact; avoid pushing workspace orchestration logic into the canvas.

React Flow Implementation Patterns

  • Nodes:

    • Use memoized custom node components for table rendering.
    • Keep node data minimal and serializable.
    • Derive draggable, selected, and connectability from current tool mode.

  • Edges:

    • Use routed edge points from buildRoutedDiagramEdges.
    • Keep pending edges visually distinct (dash + stronger color).
    • Prefer custom edge component only when built-in edges cannot represent routed geometry.

  • Connections:

    • Gate with isValidConnection to block invalid or duplicate FK links.
    • Parse handles with stable prefixes (in: / out:) to identify columns.

  • Viewport & controls:

    • Persist viewport to workspace via callback.
    • Throttle high-frequency viewport updates to avoid rerender storms.
    • Provide explicit fit actions (all and selection) in controls.

  • Tool modes:

    • Select mode: selection + table dragging.
    • Pan mode: canvas drag panning.
    • Connect mode: handle-to-handle links; no accidental pan.
    • Space key temporarily enables panning in any mode.
Show full SKILL.md (128 more words)Show less

UX and Styling Guidance

  • Use design tokens (--diagram-table-header, --border, --muted-foreground) for node and edge visuals.
  • Keep minimap/background enabled; they improve navigation on medium/large models.
  • Show concise mode hints in-canvas when interaction mode changes.
  • Keep selected state and focus state obvious for keyboard + mouse users.

Performance Guardrails

  • Memoize mapped nodes/edges from workspace props.
  • Avoid rebuilding heavy arrays on unrelated state changes.
  • Throttle viewport persistence callbacks.
  • Keep columns bounded for node rendering (MAX_ROWS style cap).
  • Avoid unnecessary useEffect; prefer derived state and event callbacks.

Change Checklist

  • Confirm no renderer fallback code is reintroduced.
  • Verify interactions: select, pan, connect, marquee, drag, delete/clear.
  • Verify controls: zoom, fit all, fit selection, reset behavior.
  • Verify exports (PNG/PDF) still work from current viewport/container.
  • Run lint/type checks after editing diagram components.

Reference

© veloxbase, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/reactflow-workflow of veloxbase/veloxdb.

Open the folder on GitHubat commit 2ca04f2

Compare with similar skills

Reactflow Workflow next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Reactflow Workflow compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Reactflow Workflow this skillveloxbase/veloxdb646—~897Automated safety check: PassMIT
Frontend Testhuoshen80/ReinaManager693—~180Automated safety check: PassAGPL-3.0
I18nhuoshen80/ReinaManager693—~177Automated safety check: PassAGPL-3.0
Cdphuoshen80/ReinaManager693—~178Automated safety check: PassAGPL-3.0
Brainstormbkywksj/knowledge-base330—~1.4kAutomated safety check: PassCustom licence
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0

Similar skills

  • Frontend Test

    huoshen80/ReinaManager

    在 ReinaManager 项目内进行隔离前端验证，复用测试目录并回收测试资源。需要模拟批量数据、延迟、失败或交互回归时使用。

    693 GitHub stars~180 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • I18n

    huoshen80/ReinaManager

    使用 i18next-cli 检查、同步和整理本项目的国际化资源。涉及新增、修改、删除翻译键或国际化字符串，以及修复缺失翻译时使用。

    693 GitHub stars~177 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Cdp

    huoshen80/ReinaManager

    通过 CDP 连接 ReinaManager WebView2，复现、诊断并验证真实应用的前端问题。仅在用户显式调用 /cdp 或 $cdp 进行前端调试时使用。

    693 GitHub stars~178 tokensUpdated 4 days ago
    DatabasesAuto-check passed

  • Brainstorm

    bkywksj/knowledge-base

    当需要探索方案、头脑风暴、创意思维时自动使用此 Skill. An agent skill from bkywksj/knowledge-base.

    330 GitHub stars~1.4k tokensUpdated 5 days ago
    Agent WorkflowsAuto-check passed

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

More from veloxbase/veloxdb

  • Rust Heavy Performance

    veloxbase/veloxdb

    Enforces a Rust-first approach for heavy work in VeloxDB so expensive compute stays in Tauri/Rust instead of JavaScript.

    646 GitHub stars~733 tokensUpdated 7 days ago
    Auto-check passed

  • Veloxdb Scalable Performance

    veloxbase/veloxdb

    Guides scalability and performance work for VeloxDB's Tauri + Rust PostgreSQL backend and React + TanStack frontend.

    646 GitHub stars~1.7k tokensUpdated 7 days ago
    Auto-check passed

Works with

Categories

Questions about Reactflow Workflow

What does Reactflow Workflow do?

Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance). Reactflow Workflow is an agent skill from veloxbase/veloxdb. Build and harden React Flow diagram surfaces in VeloxDB using @xyflow/react patterns (nodes, edges, viewport, controls, interactions, performance).

When should I use Reactflow Workflow?

Reactflow Workflow fits situations like: working on schema diagram canvas behavior; replacing legacy canvas code; improving diagram UX and scale.

How do I install Reactflow Workflow in Claude Code?

Run `npx skills add veloxbase/veloxdb --skill reactflow-workflow -a claude-code`. Or copy the skill folder (.cursor/skills/reactflow-workflow in veloxbase/veloxdb) into .claude/skills/reactflow-workflow in your project. Claude Code loads it when a task matches its description.

How do I install Reactflow Workflow in Codex?

Run `npx skills add veloxbase/veloxdb --skill reactflow-workflow -a codex`. Or copy the skill folder (.cursor/skills/reactflow-workflow in veloxbase/veloxdb) into .agents/skills/reactflow-workflow in your project. Codex loads it when a task matches its description.

Can I use Reactflow Workflow in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add veloxbase/veloxdb --skill reactflow-workflow -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/reactflow-workflow, .gemini/skills/reactflow-workflow, .github/skills/reactflow-workflow and .opencode/skills/reactflow-workflow in your project.

What does Reactflow Workflow need to run?

SKILL.md names no scripts, command-line tools or credentials: Reactflow Workflow is instructions for the agent only.

Does Reactflow Workflow access the network?

SKILL.md names 1 domain. As links in the text: reactflow.dev. This is read from the text; nothing was executed.

Is Reactflow Workflow safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Reactflow Workflow use?

Reactflow Workflow is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Reactflow Workflow use?

About 897 tokens (SKILL.md is roughly 3.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Reactflow Workflow?

Skills that share tags, products or a category with Reactflow Workflow: Frontend Test (huoshen80/ReinaManager, 693 stars), I18n (huoshen80/ReinaManager, 693 stars), Cdp (huoshen80/ReinaManager, 693 stars) and Brainstorm (bkywksj/knowledge-base, 330 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Reactflow Workflow?

veloxbase (a GitHub organization) maintains it in veloxbase/veloxdb, which has 646 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 30, 2026.

Source: veloxbase/veloxdb on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.