Habilidades react-modernization

📦

react-modernization

Name: react-modernization
Author: sickn33

Revisión del contenido r1 Seguro ⚡ Contiene scripts⚙️ Comandos externos🌐 Acceso a red

Moderniza aplicaciones React con hooks y React 18

El código React heredado puede ralentizar las actualizaciones, las pruebas y el trabajo de rendimiento. Esta habilidad guía migraciones de clases a hooks, adopción de React 18, conversión a TypeScript y planificación de codemods.

Compatible con: Claude Codex Code(CC)

🥉 79 Bronce

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

Review the Skillstore skill "react-modernization" from https://skillstore.io/skills/sickn33-react-modernization.md and its manifest at https://skillstore.io/api/skills/sickn33-react-modernization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/sickn33-react-modernization.md Manifest firmado GET /api/skills/sickn33-react-modernization/manifest Lockfile firmado GET /api/skills/sickn33-react-modernization/lockfile

Pruébalo

Usando "react-modernization". Un equipo necesita mover una app React 16 hacia React 18 sin una reescritura completa.

Resultado esperado:

Un plan de actualización por etapas que empieza con la revisión de dependencias, luego compatibilidad con React 17, cambios de raíz de React 18, correcciones de StrictMode y pruebas de regresión enfocadas.

Usando "react-modernization". Un componente de clase usa estado, lógica de montaje, lógica de actualización y limpieza.

Resultado esperado:

Una explicación de migración que asigna el estado a hooks, mueve el comportamiento del ciclo de vida a efectos, preserva la limpieza y enumera el comportamiento que se debe probar.

Usando "react-modernization". Un dashboard tiene renderizado lento de listas después de una pasada de modernización.

Resultado esperado:

Una revisión de rendimiento que comprueba causas de renderizado, valor de la memoización, estabilidad de callbacks, code splitting y validación medible antes y después.

Auditoría de seguridad

Seguro

v5 • 7/7/2026 Abrir el informe versionado

The static findings are false positives in React tutorial examples and Markdown references. Dynamic imports and fetch calls are illustrative application code, not skill execution, and no prompt injection or data exfiltration intent was found.

Archivos escaneados

548

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚡ Contiene scripts (2)

resources/implementation-playbook.md:400 resources/implementation-playbook.md:401

⚙️ Comandos externos (4)

resources/implementation-playbook.md:105-129 resources/implementation-playbook.md:129-154 SKILL.md:30 SKILL.md:34

🌐 Acceso a red (2)

resources/implementation-playbook.md:105 resources/implementation-playbook.md:129

La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.

Auditado por: codex Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/sickn33-react-modernization/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/sickn33-react-modernization/security.svg)](https://skillstore.io/skills/sickn33-react-modernization?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/sickn33-react-modernization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/sickn33-react-modernization/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/sickn33-react-modernization.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citas académicas (APA · BibTeX · CFF)

Cita APA

sickn33. (2026). react-modernization security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-modernization/audits/5

Cita BibTeX

@techreport{sickn33-sickn33-react-modernization-2026,
  author = {sickn33},
  title = {react-modernization security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/sickn33-react-modernization/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-modernization security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-modernization/audits/5"
identifiers:
  - type: other
    value: "skillstore:sickn33-react-modernization:audit:5"
    description: "Skillstore immutable audit report identifier"

Comparar variantes

2 variantes instalables

Cada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.

Por qué esta variante es la primera

Mayor puntuación de Skillstore

Autor / fuente Puntuación de Skillstore Confianza de la evidencia Uso en Skillstore Actualizado

sickn33 Recomendado Actual

sickn33-react-modernization

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 15

Actualizado

2026-09-09

wshobson

wshobson-react-modernization

Puntuación de Skillstore 77

Confianza de la evidencia Alto

Uso en Skillstore 13

Actualizado

2026-09-09

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Planificación de Actualización

Crear un plan incremental de actualización de React con riesgos, puntos de control de pruebas y pasos de despliegue.

Migración a Hooks

Convertir componentes de clase en componentes funcionales mientras se preservan el comportamiento del ciclo de vida y la limpieza.

Revisión de Rendimiento

Identificar mejoras útiles de React 18, memoización y code splitting para una interfaz de producción.

Prueba estos prompts

Evaluar una Actualización

Revisa este contexto de proyecto React y propone un plan de modernización incremental. Incluye pasos de versión, riesgos probables y puntos de control de validación.

Convertir un Componente

Convierte este componente de clase en un componente funcional con hooks. Preserva el comportamiento del estado, el timing del ciclo de vida, la limpieza y las props públicas.

Adoptar Funciones de React 18

Revisa este código React 17 y recomienda cambios de React 18. Cubre la configuración de la raíz, los efectos de StrictMode, batching, transiciones, Suspense y actualizaciones de pruebas.

Planificar Trabajo con Codemods

Diseña un plan de migración asistido por codemods para esta base de código React. Incluye transformaciones candidatas, pasos de revisión manual, puntos de rollback y tareas de verificación.

Mejores prácticas

Actualizar de forma incremental y mantener cada cambio vinculado a un punto de control comprobable.
Empezar las migraciones a hooks con componentes hoja simples antes que con contenedores compartidos.
Medir el rendimiento antes de añadir memoización o code splitting.

Evitar

Migrar todos los componentes a la vez sin validación por etapas.
Añadir hooks mecánicamente sin comprobar el comportamiento del ciclo de vida y la limpieza.
Ejecutar codemods sin revisión, pruebas y planificación de rollback.

Preguntas frecuentes

¿Puede esta habilidad actualizar automáticamente una app React completa?

No. Proporciona planes, patrones y orientación de revisión. Un desarrollador todavía aplica los cambios y valida el comportamiento.

¿Admite migraciones a React 18?

Sí. Cubre createRoot, batching, efectos de StrictMode, transiciones, Suspense y preocupaciones relacionadas con pruebas.

¿Puede ayudar a convertir componentes de clase a hooks?

Sí. Mapea estado, métodos de ciclo de vida, contexto, limpieza y lógica reutilizable a hooks.

¿Incluye orientación sobre codemods?

Sí. Sugiere flujos de trabajo con codemods para cambios repetitivos y enfatiza la revisión antes de fusionar ediciones generadas.

¿Es útil para migraciones a TypeScript?

Sí. Incluye tipado de props de componentes y patrones de componentes genéricos para código React.

¿Qué entradas mejoran los resultados?

Proporciona la versión actual de React, framework, restricciones de paquetes, componentes representativos, cobertura de pruebas y objetivos de actualización.