C✳CODEZ.WIN
🌐 Português

Guia de leitura localizado

react-flow-node-tsFinalidade, utilização e fonte

Crie componentes de nós do React Flow com tipos TypeScript, handles e integração com Zustand. Use-os ao criar nós personalizados para o canvas do React Flow, editores visuais de fluxo de trabalho ou ao implementar componentes de interface do usuário baseados em nós.

Fonte recuperada:

Repositório de origem
microsoft/skills
SKILL.md
.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
Estrelas do repositório
3,157
Atualização do repositório
2026-10-31
Classificação de Habilidades
Serviços em nuvem
Última coleta

Licença: MIT

Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis ​​do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.

Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.

O que esta habilidade faz

Crie componentes de nós do React Flow com tipos TypeScript, handles e integração com Zustand. Use-os ao criar nós personalizados para o canvas do React Flow, editores visuais de fluxo de trabalho ou ao implementar componentes de interface do usuário baseados em nós.

Como funciona o fluxo de trabalho upstream

Início rápido

Copie os modelos da pasta assets/ e substitua os espaços reservados:{{NodeName}}→ Nome do componente PascalCase (ex:VideoNode){{nodeType}}→ identificador de tipo kebab-case (ex:video-node){{NodeData}}→ Nome da interface de dados (ex.:VideoNodeData)

Passagem a montante · L14 ↗

Etapas de integração

Adicionar tipo asrc/frontend/src/types/index.tsCriar componente emsrc/frontend/src/components/nodes/Exportar desrc/frontend/src/components/nodes/index.tsAdicionar valores padrão emsrc/frontend/src/store/app-store.ts

Passagem a montante · L63 ↗

Nó de fluxo React

Crie componentes React Flow Node seguindo padrões estabelecidos, com tipos TypeScript adequados e integração com o armazenamento.

Passagem a montante · L10 ↗
Passagem a montante · typescript ↗
export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

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

Requisitos e configuração

Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.

Limites e verificações de qualidade

Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.

Comece com um teste seguro.

  1. Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
  2. Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
  3. Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis ​​antes de permiti-las.
  4. Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.

Especificação de formato e diretório de habilidades ↗

Leia mais na fonte.

Tradução e escopo

Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.

Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.

Fonte recuperada
Commit de origem
00d66a64919edca5bca2c673373444e36a4b5461
Fonte SHA-256
f0a4f37df3e8e7ed9645e947c08470fd78483f18b9587ae8cd20720022110781
Voltar ao catálogo completo de habilidades