Habilidades react-ui-patterns
📦

react-ui-patterns

Seguro

Implement React UI Patterns

También disponible en: ChrisWiles

Building React components with proper loading states, error handling, and user feedback is challenging and often results in confusing UX. This skill provides battle-tested UI patterns for handling async operations, showing appropriate feedback, and creating smooth user experiences.

Soporta: Claude Codex Code(CC)
🥉 75 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". How do I show loading states without flashing when refetching data?

Resultado esperado:

Use the pattern: only show loading indicator when loading AND no data exists. This prevents the flash when cached data is available. Example: if (loading && !data) return <Skeleton />;

Usando "react-ui-patterns". What is the proper way to handle errors in React?

Resultado esperado:

Always surface errors to users with clear messaging. Use a hierarchy: inline errors for forms, toasts for recoverable errors, banners for page-level issues, and full error screens for unrecoverable failures.

Usando "react-ui-patterns". How should I handle button states during form submission?

Resultado esperado:

Disable the button during submission AND show a loading indicator. This prevents duplicate submissions and gives users feedback that their action is in progress.

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
50
Comunidad
100
Seguridad
100
Cumplimiento de la especificación

Lo que puedes crear

Building data-driven React components

When creating components that fetch data from APIs, apply proper loading, error, and empty states following established patterns.

Handling form submissions

When implementing forms with async submissions, ensure buttons are disabled during submission and show appropriate loading feedback.

Improving user experience

When refactoring existing React code to eliminate confusing loading flashes and hidden errors.

Prueba estos prompts

Basic loading state 
Show me how to implement a loading state for a React component that fetches data. I want to avoid showing a spinner when cached data already exists.
Error handling pattern 
Create an error state component for React that shows the error message and includes a retry button. How should I integrate this with Apollo or React Query?
Form submission with feedback 
Write a form submission pattern in React that disables the submit button during the mutation, shows a loading spinner, and displays success or error toasts.
Complete data component 
Build a complete React component that handles all UI states: loading (with skeleton), error (with retry), empty (with call to action), and success (with data display).

Mejores prácticas

  • Never show stale UI - loading spinners should only appear when there's no data to display
  • Always surface errors to users - never swallow errors silently without feedback
  • Disable buttons during async operations to prevent duplicate submissions

Evitar

  • Showing loading spinner whenever loading is true, regardless of whether cached data exists
  • Catching errors and only logging to console without showing user feedback
  • Allowing users to click submit multiple times during form submission

Preguntas frecuentes

What is the golden rule for loading states?
Show loading indicator ONLY when there's no data to display. This prevents UI flashes when refetching cached data.
When should I use skeleton loaders vs spinners?
Use skeletons for known content shapes like lists and cards. Use spinners for unknown content shapes, modals, and button submissions.
How do I handle errors in React?
Always show errors to users. Use onError handlers in mutations to display toasts or error states. Never silently catch errors.
Why do I need empty states?
Every list and collection needs an empty state to guide users. Empty states should be contextual and provide actions when possible.
How do I prevent double form submissions?
Disable the submit button during submission and show a loading indicator. Also validate form before enabling the button.
What is optimistic UI updates?
Optimistic updates make the UI feel instant by immediately showing the expected result before the server confirms it. Roll back if the operation fails.

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