react-native-design
Crear interfaces móviles con React Native
Los equipos de React Native necesitan patrones de interfaz móvil coherentes que funcionen en distintas plataformas. Esta skill proporciona orientación práctica sobre estilos, navegación, gestos y animaciones.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "react-native-design" from https://skillstore.io/skills/wshobson-react-native-design.md and its manifest at https://skillstore.io/api/skills/wshobson-react-native-design/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.
Pruébalo
Usando "react-native-design". Diseña una pantalla de ajustes para una app React Native.
Resultado esperado:
- Una estructura de pantalla con manejo de áreas seguras y secciones de ajustes agrupadas.
- Un plan de estilos para tipografía, espaciado, divisores y estados pulsados.
- Notas sobre diferencias de interacción entre iOS y Android.
Usando "react-native-design". Planifica la navegación para una app con pantallas autenticadas y públicas.
Resultado esperado:
- Una jerarquía de navegación usando flujos de autenticación, stack y pestañas.
- Orientación sobre parámetros de rutas para pantallas de detalle y modales.
- Advertencias sobre almacenamiento seguro de tokens y gestión de sesiones.
Usando "react-native-design". Mejora el rendimiento de animación de un bottom sheet.
Resultado esperado:
- Un enfoque con Reanimated usando valores compartidos y manejadores de gestos.
- Recomendaciones de comportamiento de snap points y ajuste de spring.
- Notas de rendimiento para worklets en el hilo de interfaz y limpieza.
Auditoría de seguridad
SeguroAll static findings were adjudicated as false positives after reviewing the cited markdown and TypeScript examples. The suspicious patterns are documentation fences, JavaScript template literals, React Navigation route keys, official documentation links, and ordinary mobile UI guidance. No prompt injection, secret handling, command execution, or data exfiltration intent was found.
Factores de riesgo
⚙️ Comandos externos (36)
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.
Copiar enlace del informe
https://skillstore.io/skills/wshobson-react-native-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-react-native-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/wshobson-react-native-design.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
wshobson. (2026). react-native-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-react-native-design/audits/4Cita BibTeX
@techreport{wshobson-wshobson-react-native-design-2026,
author = {wshobson},
title = {react-native-design security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-react-native-design/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-native-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-react-native-design/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-react-native-design:audit:4"
description: "Skillstore immutable audit report identifier"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Diseñar un sistema de pantallas móviles
Crear patrones reutilizables de diseño, espaciado, tipografía y componentes para una app React Native.
Planificar la navegación de la app
Elegir flujos de stack, pestañas, drawer, modal, autenticación y deep links para una app multiplataforma.
Mejorar el movimiento y los gestos
Añadir gestos, transiciones y animaciones interactivas eficientes con Reanimated sin bloquear el hilo de la interfaz.
Prueba estos prompts
Usa esta skill para diseñar una pantalla de perfil en React Native con StyleSheet, áreas seguras y una jerarquía de texto accesible.
Usa esta skill para planificar navegación con stack y pestañas para una app con pantallas de inicio, búsqueda, detalle, ajustes y autenticación.
Usa esta skill para diseñar una interacción de tarjeta deslizable con Gesture Handler y valores compartidos de Reanimated.
Usa esta skill para auditar mi app React Native en cuanto a coherencia de navegación, diferencias entre plataformas, rendimiento de animaciones y reutilización de estilos.
Mejores prácticas
- Usa tipos de TypeScript para rutas y componentes antes de añadir flujos de navegación complejos.
- Prueba diseños y gestos en dispositivos iOS y Android reales.
- Mantén las animaciones en el hilo de la interfaz y límpialas cuando los componentes se desmonten.
Evitar
- No almacenes tokens de autenticación sensibles en AsyncStorage sin cifrar.
- No dependas de un solo simulador de plataforma para tomar decisiones finales de interfaz.
- No coloques listas largas dentro de ScrollView cuando se necesita FlatList.
Preguntas frecuentes
¿Qué ayuda a crear esta skill?
¿Qué biblioteca de navegación cubre?
¿Cubre Reanimated?
¿Puede diseñar para iOS y Android?
¿Proporciona orientación completa de seguridad para producción?
¿Pueden usarla Claude, Codex y Claude Code?
Detalles del desarrollador
Autor
wshobsonLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Repositorio
https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/react-native-design/Ref.
64ca8af0f54a325752f08bd54e52151061ea659a
Actualidad del mantenimiento
26/7/2026
Uso
7 descargas · 326 vistas
Estructura de archivos