Suporte upstream incluído

Arquivos de suporte são incluídos em caminhos relativos à skill. Veja UPSTREAM-NOTICE.md para suas fontes fixadas, licenças, hashes e alterações de importação.

Nó React Flow

Crie componentes de nó React Flow seguindo padrões estabelecidos com tipos TypeScript adequados e integração de store.

Início Rápido

Copie os modelos de assets/ e substitua os placeholders:

• {{NodeName}} → Nome do componente em PascalCase (ex: VideoNode)
• {{nodeType}} → Identificador de tipo em kebab-case (ex: video-node)
• {{NodeData}} → Nome da interface de dados (ex: VideoNodeData)

Modelos

• assets/template.tsx - Componente de Nó
• assets/types.template.ts - Definições TypeScript

Padrão de Componente de Nó

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);
  
  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

Padrão de Definição de Tipo

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

Passos de Integração

1. Adicione o tipo em src/frontend/src/types/index.ts
2. Crie o componente em src/frontend/src/components/nodes/
3. Exporte de src/frontend/src/components/nodes/index.ts
4. Adicione padrões em src/frontend/src/store/app-store.ts
5. Registre no canvas nodeTypes
6. Adicione ao AddBlockMenu e ConnectMenu

Quando Usar

Esta skill é aplicável para executar o fluxo de trabalho ou as ações descritas na visão geral.

Limitações

• Use esta skill apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.