React

repo-scan es una habilidad de auditoría de código multistack que clasifica archivos, detecta bibliotecas de terceros incrustadas y te ayuda a decidir qué es núcleo, qué está duplicado y qué es peso muerto. Resulta útil para revisión de código con repo-scan, migraciones de legado y planificación de refactors. Consulta en la habilidad la guía de instalación y de uso de repo-scan.

remotion-video-creation es una skill centrada en Remotion para trabajos de video con React. Ayuda a reducir errores de renderizado con 29 reglas que cubren animaciones, assets, audio, subtítulos, gráficos, composiciones y transiciones. Úsala en flujos de Video Editing, explicadores con plantillas, clips para redes sociales y motion graphics basados en datos.

frontend-patterns es una skill práctica para el desarrollo frontend con React y Next.js, pensada para ayudarte a elegir patrones mantenibles en componentes, estado, formularios, enrutado, accesibilidad y rendimiento. Usa la guía de frontend-patterns cuando necesites orientación clara para implementar y seleccionar patrones, no solo buenas prácticas genéricas.

La skill click-path-audit ayuda a rastrear los handlers de UI a través de cada cambio de estado para detectar errores de secuencia, conflictos de estado compartido y desajustes en el estado final tras refactors o durante la revisión de código.

Usa la skill shadcn para revisar el contexto del proyecto, ejecutar los comandos CLI adecuados, instalar componentes y componer interfaces con patrones documentados para base vs radix, formularios, temas y registries.

frontend-design convierte ideas vagas de UI en interfaces distintivas y listas para producción, con código frontend real, una dirección estética clara y menos estilo genérico de IA.

La skill fullstack-developer es un paquete de prompts reutilizable para trabajo moderno de apps web en JavaScript y TypeScript con React, Next.js, Node.js, APIs, bases de datos, auth y deployment. Resulta especialmente útil para planificación e implementación en varias capas, con un único archivo `SKILL.md` que define el alcance y el flujo de trabajo en lugar de aportar scripts o plantillas.

La skill prototype te ayuda a crear código desechable que responda una pregunta concreta antes de comprometerte con una implementación real. Úsala para probar lógica, transiciones de estado, forma de datos o la dirección de una UI con un prototipo ejecutable que siga las convenciones del repositorio anfitrión. Es ideal cuando necesitas una guía rápida de prototipado, no una funcionalidad final.

ui-ux-pro-max es una skill integral para diseño UI/UX asistido por IA. Brinda orientación estructurada sobre layouts, estilos, sistemas de color, tipografía y reglas UX para proyectos web y móviles. Ideal para equipos y desarrolladores que buscan decisiones de diseño prácticas en React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter y HTML/CSS. Úsala para planificar, revisar y mejorar interfaces con inteligencia de diseño curada.

ckm:ui-styling facilita la creación de interfaces accesibles y listas para producción utilizando shadcn/ui, Tailwind CSS y diseño visual basado en canvas. Es ideal para proyectos en React que requieren estructuras responsivas, componentes accesibles, modo oscuro y sistemas de diseño consistentes. Aprovecha ckm:ui-styling para diseño de UI, tematización y prototipado rápido con recomendaciones prácticas adaptadas al stack.

design-system-patterns ayuda a los equipos a diseñar bases de UI escalables con estructuras de tokens, arquitectura de temas y patrones reutilizables de API de componentes para sistemas de diseño y bibliotecas de componentes.

La skill interaction-design ayuda a los equipos a diseñar e implementar motion UI con intención, microinteracciones, transiciones, estados de carga y patrones de feedback, con referencias prácticas orientadas a React y guía de uso.

La skill web-component-design ayuda a los equipos a diseñar componentes de UI reutilizables para React, Vue y Svelte, con patrones de API sólidos, guía de accesibilidad y referencias sobre las ventajas y compromisos de estilo para sistemas de diseño.

react-state-management es una skill práctica para elegir y usar herramientas de estado en React como Redux Toolkit, Zustand, Jotai, React Query, SWR y RTK Query según el tipo de estado, la escala de la app y las necesidades de migración.

nextjs-app-router-patterns ayuda a planificar la arquitectura de Next.js 14+ con App Router, incluidos Server Components, streaming, caché, route handlers y Server Actions para desarrollo full-stack y migraciones desde Pages Router.

react-native-architecture ayuda a planificar apps de React Native y Expo para producción con routing, límites de estado, módulos nativos, flujos offline-first y decisiones entre Expo y bare.

react-modernization es una skill centrada en migraciones para actualizar aplicaciones de React 16/17 a 18+, convertir componentes de clase a hooks, renovar las APIs de root y planificar refactors por etapas con orientación compatible con codemods.

vercel-react-native-skills es una skill de React Native y Expo para desarrollo frontend orientado al rendimiento. Úsala para mejorar el renderizado de listas, las animaciones, la navegación, los patrones de UI, la gestión del estado y la configuración de módulos nativos. Incluye reglas prácticas, guía de instalación y patrones de uso para abordar cuellos de botella en apps móviles con menos improvisación.

vercel-composition-patterns es una skill de composición con React para Frontend Development que ayuda a reemplazar la dispersión de props booleanas por componentes compuestos, variantes explícitas, estado elevado y APIs seguras para React 19. Úsala para revisar la arquitectura de componentes, mejorar APIs de UI reutilizables y elegir el patrón de composición adecuado para código frontend escalable.

vercel-react-best-practices es una skill de Vercel Engineering que guía a agentes de IA para optimizar el rendimiento de React y Next.js con reglas priorizadas para waterfalls, tamaño de bundle y renderizado.

overdrive es una skill de GitHub para trabajos ambiciosos de diseño de interfaces que prioriza el contexto, la planificación basada en propuestas y una calidad de interacción excepcional. Úsala para instalar y aplicar overdrive en transiciones cinematográficas, interfaces responsivas y experiencias de producto de alto impacto.

La skill optimize diagnostica y corrige problemas de rendimiento de la UI en velocidad de carga, renderizado, animaciones, imágenes y tamaño del bundle. Úsala cuando necesites una guía estructurada de optimize para optimización del rendimiento, con un enfoque de diagnóstico basado primero en mediciones para experiencias web lentas, trabadas o poco fluidas.

La skill source-driven-development basa la implementación específica de frameworks en la documentación oficial, para que puedas verificar patrones antes de aplicarlos. Es especialmente útil para usar source-driven-development en React, Vue, Next.js, Svelte, Angular y stacks similares cuando importan la corrección, la trazabilidad de la fuente y las decisiones sensibles a la versión.

La skill performance-optimization te ayuda a medir primero, encontrar el cuello de botella real, corregirlo y verificar los resultados. Úsala cuando existan requisitos de rendimiento, sospeches una regresión o necesites mejorar Core Web Vitals, tiempos de carga o la latencia de interacción.