Habilidades react-ui-patterns

📦

react-ui-patterns

Name: react-ui-patterns
Author: sickn33

Revisión del contenido r1 Seguro ⚙️ Comandos externos

Crear estados de IU de React fiables

Las interfaces de React suelen fallar en torno a la carga, los errores y los datos vacíos. Esta skill proporciona patrones prácticos para estados de IU asíncronos predecibles.

Compatible con: Claude Codex Code(CC)

🥉 77 Bronce

Maintain this Skill? Claim it 🥉 77 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-ui-patterns" from https://skillstore.io/skills/sickn33-react-ui-patterns.md and its manifest at https://skillstore.io/api/skills/sickn33-react-ui-patterns/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-ui-patterns.md Manifest firmado GET /api/skills/sickn33-react-ui-patterns/manifest Lockfile firmado GET /api/skills/sickn33-react-ui-patterns/lockfile

Pruébalo

Usando "react-ui-patterns". Una página de lista sigue mostrando un spinner durante el refetch.

Resultado esperado:

Mantén visible la lista existente durante el refetch. Usa carga completa solo cuando no existan datos, y muestra un progreso sutil para las actualizaciones.

Usando "react-ui-patterns". Una mutación registra errores, pero los usuarios no ven ninguna retroalimentación.

Resultado esperado:

Muestra el fallo mediante un toast o un mensaje inline. Proporciona orientación para reintentar y mantén visible el estado fallido.

Usando "react-ui-patterns". Se puede hacer clic varias veces en un botón de envío.

Resultado esperado:

Deshabilita el botón mientras se envía. Muestra un estado de carga y evita envíos inválidos antes de llamar a la mutación.

Auditoría de seguridad

Seguro

v4 • 7/7/2026 Abrir el informe versionado

Static analysis flagged Markdown code fences as Ruby or shell backtick execution and flagged JSX disabled props as reconnaissance. Context shows all instances are documentation examples in SKILL.md, with no executable commands, network activity, data access, or prompt injection evidence.

Archivos escaneados

290

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

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-ui-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/sickn33-react-ui-patterns.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-ui-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4

Cita BibTeX

@techreport{sickn33-sickn33-react-ui-patterns-2026,
  author = {sickn33},
  title = {react-ui-patterns security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4},
  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-ui-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "sickn33"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/sickn33-react-ui-patterns/audits/4"
identifiers:
  - type: other
    value: "skillstore:sickn33-react-ui-patterns:audit:4"
    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

ChrisWiles Recomendado

chriswiles-react-ui-patterns

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 17

Actualizado

2026-09-09

sickn33 Actual

sickn33-react-ui-patterns

Puntuación de Skillstore 77

Confianza de la evidencia Alto

Uso en Skillstore 16

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

Estabilizar pantallas asíncronas

Aplicar patrones de carga, error, vacío y éxito a pantallas que obtienen datos remotos.

Revisar la cobertura de estados de IU

Revisar pull requests en busca de retroalimentación faltante, errores ocultos o activadores de acciones repetidas.

Definir reglas de interacción del producto

Crear expectativas coherentes sobre cómo se comportan formularios, listas y mutaciones ante fallos.

Prueba estos prompts

Agregar estados de IU faltantes

Revisa este componente de React y agrega estados claros de carga, error, vacío y éxito usando la skill react-ui-patterns.

Mejorar el comportamiento de refetch

Usa react-ui-patterns para revisar esta pantalla de datos de modo que el contenido en caché permanezca visible durante los refetches en segundo plano.

Reforzar el envío de formularios

Aplica react-ui-patterns a este formulario para que la validación, la carga durante el envío, la prevención de duplicados y la retroalimentación de errores se gestionen de forma coherente.

Auditar un flujo de funcionalidad

Audita esta funcionalidad de React con react-ui-patterns e informa estados faltantes, comportamiento asíncrono riesgoso y cambios de IU recomendados.

Mejores prácticas

Muestra estados de carga completos solo cuando no hay datos útiles disponibles.
Acompaña cada acción asíncrona con retroalimentación visible para el usuario sobre éxito o fallo.
Deshabilita activadores repetidos mientras las solicitudes están en curso.

Evitar

Reemplazar contenido en caché con spinners durante refetches en segundo plano.
Registrar errores sin mostrar a los usuarios una ruta de recuperación.
Enviar formularios cuando son inválidos o ya están cargando.

Preguntas frecuentes

¿Qué ayuda a crear esta skill?

Ayuda a crear interfaces de React con estados claros de carga, error, vacío, botones y envío.

¿Incluye componentes de producción?

No. Proporciona patrones y ejemplos que los desarrolladores adaptan a su biblioteca de componentes.

¿Puede ayudar con refetches de datos en caché?

Sí. Recomienda mantener visibles los datos existentes y usar indicadores de carga solo cuando no haya datos disponibles.

¿Cubre la validación de formularios?

Cubre puertas de validación, carga de mutaciones, botones de envío deshabilitados y retroalimentación de errores visible para el usuario.

¿Pueden usarla Claude, Codex y Claude Code?

Sí. Los metadatos indican compatibilidad con Claude, Codex y Claude Code.

¿Reemplaza las pruebas de accesibilidad?

No. La accesibilidad, el comportamiento del teclado y las pruebas con lectores de pantalla aún necesitan una revisión separada.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Revisión de Skillstore

Aviso de versión

El autor no declaró una versión.

Repositorio

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

Ref.

9f814fc6a43fd99946f2da5e0df231c65a38bc76

Actualidad del mantenimiento

18/7/2026

Uso

7 descargas · 139 vistas

Estructura de archivos

📄 SKILL.md

react-ui-patterns

Instalar con mi Agente

Recursos legibles por agentes

Pruébalo

Auditoría de seguridad

Factores de riesgo

Copiar enlace del informe

Insignia Markdown

Insignia HTML

Tarjeta para insertar

Cita APA

Cita BibTeX

CITATION.cff

Comparar variantes

Puntuación de Skillstore

Lo que puedes crear

Estabilizar pantallas asíncronas

Revisar la cobertura de estados de IU

Definir reglas de interacción del producto

Prueba estos prompts

Mejores prácticas

Evitar

Preguntas frecuentes

Detalles del desarrollador