Habilidades react-ui-patterns
📦

react-ui-patterns

Seguro

Implementar Patrones de UI en React

También disponible en: ChrisWiles

Crear componentes de React con estados de carga adecuados, manejo de errores y retroalimentación al usuario es desafiante y a menudo resulta en una UX confusa. Esta habilidad proporciona patrones de UI probados en batalla para manejar operaciones asíncronas, mostrar retroalimentación apropiada y crear experiencias de usuario fluidas.

Soporta: Claude Codex Code(CC)
🥉 72 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "react-ui-patterns". ¿Cómo muestro estados de carga sin parpadeo al volver a obtener datos?

Resultado esperado:

Usa el patrón: solo muestra el indicador de carga cuando loading Y no existen datos. Esto previene el parpadeo cuando hay datos en caché disponibles. Ejemplo: if (loading && !data) return <Skeleton />;

Usando "react-ui-patterns". ¿Cuál es la forma adecuada de manejar errores en React?

Resultado esperado:

Siempre muestra los errores a los usuarios con mensajes claros. Usa una jerarquía: errores en línea para formularios, toasts para errores recuperables, banners para problemas a nivel de página y pantallas de error completas para fallos irrecuperables.

Usando "react-ui-patterns". ¿Cómo debería manejar los estados de botones durante el envío de formularios?

Resultado esperado:

Deshabilita el botón durante el envío Y muestra un indicador de carga. Esto previene envíos duplicados y da retroalimentación a los usuarios de que su acción está en progreso.

Auditoría de seguridad

Seguro
v1 • 2/24/2026

Static analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.

1
Archivos escaneados
295
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
30
Comunidad
100
Seguridad
100
Cumplimiento de la especificación

Lo que puedes crear

Construir componentes de React basados en datos

Al crear componentes que obtienen datos de APIs, aplicar estados apropiados de carga, error y vacío siguiendo patrones establecidos.

Manejar envíos de formularios

Al implementar formularios con envíos asíncronos, asegurar que los botones estén deshabilitados durante el envío y mostrar retroalimentación de carga apropiada.

Mejorar la experiencia del usuario

Al refactorizar código React existente para eliminar parpadeos de carga confusos y errores ocultos.

Prueba estos prompts

Estado de carga básico 
Muéstrame cómo implementar un estado de carga para un componente React que obtiene datos. Quiero evitar mostrar un spinner cuando ya existen datos en caché.
Patrón de manejo de errores 
Crea un componente de estado de error para React que muestre el mensaje de error e incluya un botón de reintento. ¿Cómo debería integrar esto con Apollo o React Query?
Envío de formulario con retroalimentación 
Escribe un patrón de envío de formulario en React que deshabilite el botón de envío durante la mutación, muestre un spinner de carga y muestre toasts de éxito o error.
Componente de datos completo 
Construye un componente React completo que maneje todos los estados de UI: carga (con skeleton), error (con reintento), vacío (con llamada a la acción) y éxito (con visualización de datos).

Mejores prácticas

  • Nunca muestres UI obsoleta - los spinners de carga solo deben aparecer cuando no hay datos para mostrar
  • Siempre muestra los errores a los usuarios - nunca tragues errores silenciosamente sin retroalimentación
  • Deshabilita botones durante operaciones asíncronas para prevenir envíos duplicados

Evitar

  • Mostrar spinner de carga cada vez que loading es true, sin importar si existen datos en caché
  • Capturar errores y solo registrarlos en consola sin mostrar retroalimentación al usuario
  • Permitir que los usuarios hagan clic en enviar múltiples veces durante el envío del formulario

Preguntas frecuentes

¿Cuál es la regla de oro para los estados de carga?
Muestra el indicador de carga SOLO cuando no hay datos para mostrar. Esto previene parpadeos de UI al volver a obtener datos en caché.
¿Cuándo debería usar skeleton loaders vs spinners?
Usa skeletons para formas de contenido conocidas como listas y tarjetas. Usa spinners para formas de contenido desconocidas, modales y envíos de botones.
¿Cómo manejo los errores en React?
Siempre muestra los errores a los usuarios. Usa handlers onError en mutaciones para mostrar toasts o estados de error. Nunca captures errores silenciosamente.
¿Por qué necesito estados vacíos?
Cada lista y colección necesita un estado vacío para guiar a los usuarios. Los estados vacíos deben ser contextuales y proporcionar acciones cuando sea posible.
¿Cómo prevengo envíos de formularios dobles?
Deshabilita el botón de envío durante el envío y muestra un indicador de carga. También valida el formulario antes de habilitar el botón.
¿Qué son las actualizaciones optimistas de UI?
Las actualizaciones optimistas hacen que la UI se sienta instantánea mostrando inmediatamente el resultado esperado antes de que el servidor lo confirme. Revierte si la operación falla.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-ui-patterns

Ref.

main

Estructura de archivos

📄 SKILL.md