component-refactoring

Visión general de component-refactoring

Qué hace component-refactoring

La skill component-refactoring te ayuda a refactorizar componentes React de alta complejidad en el frontend de Dify sin tener que adivinar por dónde empezar. Está pensada para casos en los que un componente ya es demasiado grande, está demasiado anidado o resulta difícil de probar con limpieza, y necesitas un plan estructurado para dividir la UI, extraer hooks o reducir la complejidad cognitiva.

Cuándo encaja mejor

Usa la skill component-refactoring cuando pnpm analyze-component --json arroje una complejidad superior a 50, un recuento de líneas por encima de 300, o cuando el analizador recomiende explícitamente refactorizar antes de probar. También encaja bien cuando la tarea va específicamente de dividir código, extraer hooks o simplificar un componente que ha acumulado demasiadas ramas condicionales.

Por qué resulta útil

Esta skill está más orientada a la toma de decisiones que un prompt genérico de refactorización. Te ofrece un flujo de trabajo conectado a las herramientas de análisis de componentes de Dify, además de patrones concretos de reducción, como la división por secciones y la extracción de hooks. Eso importa porque el principal modo de fallo en archivos grandes de React no es la sintaxis, sino mantener el comportamiento mientras reduces el acoplamiento.

Cómo usar la skill component-refactoring

Instálala y apúntala al repositorio correcto

Instala la skill component-refactoring con npx skills add Charlie85270/Dorothy --skill component-refactoring. El flujo de trabajo asume la estructura del frontend de Dify, así que ejecuta los comandos desde web/ y usa rutas relativas a ese directorio, como app/components/....

Empieza por el análisis, no por una reescritura

Un buen flujo de component-refactoring usage es: analizar el componente, revisar el prompt generado y luego refactorizar solo las partes que realmente están empujando la complejidad. Usa pnpm analyze-component <path> --json para confirmar la puntuación y el recuento de líneas, y pnpm refactor-component <path> --json cuando quieras un brief de refactorización legible por máquina. Si el archivo no supera el umbral, puede que la skill no haga falta.

Lee primero estos archivos

Para sacar partido real a component-refactoring guide, empieza por SKILL.md y después revisa la documentación de referencia que explica los patrones detrás del prompt: references/complexity-patterns.md, references/component-splitting.md y references/hook-extraction.md. Esos archivos te dicen qué considera la skill como complejidad y qué tipos de cambios la reducen de verdad.

Convierte un objetivo vago en un mejor prompt

La skill funciona mejor cuando tu entrada nombra el componente objetivo, la meta y cualquier restricción. Por ejemplo, en lugar de “refactoriza este componente”, di: “Refactoriza app/components/foo/index.tsx para reducir la complejidad cognitiva por debajo de 50. Prioriza extraer hooks para estado/efectos y dividir la sección del modal, pero no cambies el comportamiento ni las props públicas”. Ese nivel de especificidad mejora la salida porque le dice a la skill qué preservar y qué optimizar.

Preguntas frecuentes sobre component-refactoring

¿component-refactoring es solo para Dify?

Sí, el flujo de trabajo de component-refactoring for Refactoring está diseñado en torno a las convenciones del frontend de Dify, los nombres de comandos y las rutas de componentes. Puedes adaptar las ideas a otros entornos, pero la guía de instalación y uso aporta más valor si trabajas en esa base de código o en un monorepo de React muy similar.

¿Puedo usarla en lugar de un prompt normal?

Sí, pero la skill es mejor que un prompt genérico cuando necesitas una guía de refactorización repetible y vinculada a una complejidad medible. Un prompt sencillo puede sugerir una limpieza amplia; component-refactoring resulta más útil cuando quieres que la siguiente acción se base en evidencia y esté acotada por la salida del analizador.

¿Necesito ser avanzado para usarla?

No. La skill es adecuada para principiantes que puedan identificar un archivo objetivo y ejecutar los comandos de análisis. El requisito principal es que puedas indicar una ruta de componente concreta y decirle al modelo si la prioridad es dividir, extraer hooks o rebajar la complejidad.

¿Cuándo no debería usarla?

No uses la skill component-refactoring para componentes simples, wrappers de terceros o casos en los que solo quieras pruebas sin cambiar la estructura. Si un componente ya es legible y está por debajo del umbral, refactorizarlo puede introducir trabajo innecesario.

Cómo mejorar la skill component-refactoring

Aporta métricas de entrada mejores

La forma más rápida de mejorar component-refactoring usage es incluir en tu solicitud la salida del analizador: puntuación de complejidad, maxComplexity, lineCount y cualquier texto de advertencia. Esos detalles ayudan a la skill a centrarse en el verdadero punto de presión en lugar de tratar todos los archivos grandes como si fueran iguales.

Especifica el estilo de refactorización que quieres

Si buscas un resultado concreto, dilo desde el principio. Por ejemplo: “Divide primero las secciones de UI”, “extrae un custom hook para estado/efectos compartidos” o “reduce el renderizado condicional en el return principal”. Esto es mejor que un pedido vago de “hazlo más limpio”, porque la skill puede mapear tu objetivo al patrón adecuado de las referencias.

Vigila los fallos más comunes

Los errores más frecuentes son dividir en exceso, mover lógica sin simplificarla y cambiar el comportamiento mientras se persigue una menor complejidad. Una entrada más sólida reduce esos riesgos: identifica qué props, efectos secundarios y flujos del modal deben mantenerse estables, y pide cambios mínimos en la API externa.

Itera después de la primera pasada

Después del primer refactor, vuelve a ejecutar pnpm analyze-component <path> --json y compara la puntuación con el objetivo. Si la complejidad sigue alta, pide a la skill que se concentre en el bloque restante con muchas ramas o en un solo candidato a hook, en lugar de rehacer todo el archivo otra vez.