Habilidades react-flow-architect

📦

react-flow-architect

Name: react-flow-architect
Author: sickn33

Revisão do conteúdo r1 Seguro ⚙️ Comandos externos

构建高级 ReactFlow 图应用

复杂的 ReactFlow 项目可能会变得缓慢且难以维护。此技能提供用于层次结构、布局、状态和性能的架构模式。

Suporta: Claude Codex Code(CC)

🥉 77 Bronze

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente

Review the Skillstore skill "react-flow-architect" from https://skillstore.io/skills/sickn33-react-flow-architect.md and its manifest at https://skillstore.io/api/skills/sickn33-react-flow-architect/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/sickn33-react-flow-architect.md manifest assinado GET /api/skills/sickn33-react-flow-architect/manifest lockfile assinado GET /api/skills/sickn33-react-flow-architect/lockfile

Testar

Usando "react-flow-architect". 开发者需要一个可展开的部门流程图。

Resultado esperado:

一个包含根、类别、流程和详情节点层级的层次结构模型。
一种仅渲染已展开分支的可见性策略。
一个用于选择、展开和布局更新的状态计划。

Usando "react-flow-architect". 前端团队报告数百个节点的渲染速度很慢。

Resultado esperado:

一份用于记忆化节点组件和稳定回调的性能检查清单。
一种用于展开变化的增量渲染方法。
一个避免重复 Dagre 计算的布局缓存计划。

Usando "react-flow-architect". 负责人想要一个可搜索的架构图。

Resultado esperado:

一个在选择结果前先展开父路径的搜索流程。
一种隔离直接连接的聚焦模式策略。
一个在选择后使用适配视图行为的导航计划。

Auditoria de segurança

Seguro

v4 • 07/07/2026 Abrir o relatório versionado

All static findings were adjudicated as false positives after reviewing SKILL.md. The external command alerts are Markdown fences, TypeScript or JavaScript template literals, and regex text in documentation examples. No prompt injection, data exfiltration intent, or malicious operational instruction was found.

Arquivos analisados

614

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

A auditoria estática e semântica concluída mais recente não detectou achados de segurança confirmados. Isso não comprova que a skill não tenha efeitos colaterais.

Auditado por: codex Ver histórico de auditoria →

Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado

Copiar link do relatório

https://skillstore.io/skills/sickn33-react-flow-architect/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-react-flow-architect/security.svg)](https://skillstore.io/skills/sickn33-react-flow-architect?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/sickn33-react-flow-architect?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-flow-architect/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Cartão incorporável

<iframe src="https://skillstore.io/embed/skills/sickn33-react-flow-architect.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citações acadêmicas (APA · BibTeX · CFF)

Citação APA

sickn33. (2026). react-flow-architect security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-flow-architect/audits/4

Citação BibTeX

@techreport{sickn33-sickn33-react-flow-architect-2026,
  author = {sickn33},
  title = {react-flow-architect security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-react-flow-architect/audits/4},
  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-architect security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-flow-architect/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-react-flow-architect:audit:4"
    description: "Skillstore immutable audit report identifier"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Alto

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

设计产品流程图

创建可展开的流程图，让用户无需一次性渲染每个节点即可检查类别、步骤和详细信息。

优化大型图界面

通过记忆化节点、增量更新、缓存布局结果和减少不必要的重新渲染来提升 ReactFlow 性能。

规划交互式架构视图

为可搜索图表、聚焦模式、撤销历史和基于 Dagre 的布局控件构建节点和边模式。

Teste estes prompts

创建基础图

为我的数据模型构建一个基础 ReactFlow 图。包括节点字段、边字段和简单的交互处理程序。

添加树导航

设计一个可展开的 ReactFlow 树。展示应如何管理可见节点、父级关系和选中状态。

提升图性能

审查我的 ReactFlow 架构性能。推荐记忆化、增量渲染、缓存和布局改进。

设计完整工作流架构

设计一个完整的 ReactFlow 工作流，包含搜索、聚焦模式、撤销历史、Dagre 布局和大型图性能防护。

Boas práticas

在构建交互之前，先明确节点和边的数据形状。
只渲染用户需要检查的图分支。
缓存布局结果，并对昂贵的布局重新计算进行防抖。

Evitar

在大型层次结构中为每次交互渲染所有节点。
在没有明确模式状态的情况下混用手动定位和自动布局。
向本应记忆化的自定义节点组件传入不稳定的 props。

Perguntas frequentes

此技能可以帮助构建什么？

它帮助设计具有层次结构、搜索、聚焦模式、布局和性能模式的 ReactFlow 应用。

它包含完整的库吗？

不。它提供架构指导和示例，供开发者在自己的 React 应用中调整使用。

它能帮助处理大型图吗？

可以。它涵盖增量渲染、记忆化、布局缓存和面向虚拟化的设计选择。

它支持 Dagre 布局吗？

支持。该技能包含用于定位节点和缓存布局结果的 Dagre 布局模式。

Claude、Codex 或 Claude Code 可以使用它吗？

可以。报告列出了对 Claude、Codex 和 Claude Code 工作流的支持。

它会运行命令或安装包吗？

不能。该技能仅为文档，不包含可执行安装程序或命令运行器。

Detalhes do desenvolvedor

Autor

sickn33

Licença

MIT

Revisão da Skillstore

Aviso de versão

O autor não declarou uma versão.

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-architect

Referência

9f814fc6a43fd99946f2da5e0df231c65a38bc76

Atualidade da manutenção

18/07/2026

Uso

9 downloads · 107 visualizações

Estrutura de arquivos

📄 SKILL.md

react-flow-architect

Instalar com meu Agente

Recursos legíveis por agentes

Testar

Auditoria de segurança

Fatores de risco

Copiar link do relatório

Badge Markdown

Badge HTML

Cartão incorporável

Citação APA

Citação BibTeX

CITATION.cff

Pontuação do Skillstore

O que você pode criar

设计产品流程图

优化大型图界面

规划交互式架构视图

Teste estes prompts

Boas práticas

Evitar

Perguntas frequentes

Detalhes do desenvolvedor