React Flow skill

O que ela faz

A skill ensina o Claude a usar o React Flow (@xyflow/react), a biblioteca pra criar editores de fluxo, diagramas e mapas de processo arrastáveis numa aplicação React. Cobre nós, ligações, pontos de conexão e o estado controlado, que deixa o usuário arrastar, ligar e apagar elementos.

Pra deixar com a cara do produto, ele cria nós personalizados com dados tipados e ligações sob medida: curva, reta, em degrau, animada ou com botão no meio. Também controla a visão (encaixar tudo na tela, zoom, centralizar, criar nó onde se clicou) e trata clique, arraste e seleção.

Antes de dar como pronto, ele passa por três checagens que evitam os tropeços mais comuns: o CSS da biblioteca importado, os tipos de nó definidos fora do componente pra não piscar a cada render e o provedor envolvendo quem usa o hook useReactFlow.

Nas palavras de quem fez

Quando usar

• Criar um editor visual de automações dentro de um app React
• Mostrar um funil ou processo como diagrama clicável
• Pôr formulário ou botão dentro de um nó sem atrapalhar o arraste
• Validar ligações, como impedir que um nó se ligue a ele mesmo
• Consertar fluxo que pisca ou aparece sem estilo

Depois de instalar, é só pedir assim

• Cria uma tela com React Flow pra montar a automação de atendimento arrastando blocos
• Faz um nó personalizado que mostra status ativo ou inativo e uma ligação vermelha quando der erro
• Adiciona um botão de encaixar o fluxo na tela e cria um nó novo onde eu clicar

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas