component-refactoring
Refatorar Componentes React Complexos
Componentes React complexos se tornam difíceis de testar e manter. Esta skill fornece padrões e fluxos de trabalho para refatorar componentes de alta complexidade extraindo hooks, dividindo subcomponentes e aplicando convenções específicas do Dify.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "component-refactoring". Analise a complexidade de web/app/components/workflow/index.tsx
Résultat attendu:
Análise de Complexidade:
- Complexidade Total: 72 (alvo: <50)
- Complexidade Máxima de Função: 28
- Contagem de Linhas: 420 (alvo: <300)
Principais Direcionadores de Complexidade:
1. callback handleSubmit: +15 complexidade (condições aninhadas)
2. useEffect para sincronização de dados: +12 complexidade (callbacks aninhados)
3. métodos render: +10 complexidade (cadeias switch/case)
Ações Recomendadas:
1. Extrair hook useWorkflowState
2. Dividir manipulação de formulário em componente separado
3. Mover lógica de sincronização de dados para hook useEffect
Utilisation de "component-refactoring". Extrair hooks do componente ConfigurationForm
Résultat attendu:
Hooks Extraídos:
- useModelConfig: Gerencia estado de configuração do modelo
- useDatasetSelection: Manipula lógica do seletor de dataset
- useFormValidation: Lógica de validação de formulário
Estrutura de Arquivos:
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
Audit de sécurité
SûrThis is a documentation and guidance skill for React component refactoring. Static analyzer flagged 214 potential issues in markdown documentation files, all of which are false positives: backticks in code examples were detected as shell commands, code patterns triggered crypto/blocker alerts, and Object.keys() was flagged as certificate/key files. The skill provides reference documentation only and does not execute any code.
Score de qualité
Ce que vous pouvez construire
Reduzir Complexidade de Componentes
Quando um componente React excede o limite de complexidade (>50) ou contagem de linhas (>300), use esta skill para reduzir sistematicamente a complexidade através de extração de hooks e divisão de componentes.
Padronizar Padrões de Hooks
Aplique convenções do Dify para organizar hooks customizados em subdiretórios hooks/ ou junto a componentes com nomenclatura de prefixo use-.
Preparar Componentes para Testes
Refatore componentes complexos antes de escrever testes para garantir que os componentes sejam testáveis e atendam aos limites de complexidade.
Essayez ces prompts
Verifique a complexidade de web/app/components/example.tsx usando pnpm analyze-component. Qual é a pontuação de complexidade e quais são os principais direcionadores de complexidade?
Analise web/app/components/form-config/index.tsx e identifique oportunidades para extrair hooks customizados. Mostre-me a estrutura de hooks proposta com as convenções do Dify.
O componente Configuration em web/app/components/config/index.tsx tem complexidade 85. Sugira como dividi-lo em subcomponentes mantendo os padrões do Dify.
Execute pnpm analyze-component em web/app/components/app/configuration/index.tsx e gere um plano completo de refatoração incluindo extrações de hooks, divisões de subcomponentes e metas de redução de complexidade.
Bonnes pratiques
- Execute análise de complexidade antes de refatorar para estabelecer métricas basais
- Extraia hooks antecipadamente quando o gerenciamento de estado exceder 3-5 chamadas useState
- Siga convenções de nomenclatura do Dify: hooks no diretório hooks/ ou prefixo use-*.ts
Éviter
- Refatorar componentes que já atendem aos limites de complexidade desnecessariamente
- Extrair hooks que são usados apenas em um único componente (prefira inline)
- Criar muitos componentes pequenos que prejudicam a navegação no código