rn-styling
Aplicar patrones de estilo de React Native
El estilo en React Native puede volverse inconsistente entre temas, pantallas y plataformas. Esta skill ofrece patrones prácticos de NativeWind y BrandColors para apps de Expo.
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 "rn-styling" from https://skillstore.io/skills/cjharmath-rn-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-rn-styling/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 "rn-styling". Un componente de tarjeta usa colores oscuros codificados y espaciado inconsistente.
Resultado esperado:
- Mueve los colores semánticos a BrandColors y mantén el espaciado de diseño en clases de NativeWind.
- Usa un hook de color consciente del tema antes de agregar variantes de modo oscuro.
- Mantén las sombras en reglas de estilo específicas de plataforma para un comportamiento fiable en iOS y Android.
Usando "rn-styling". Una pantalla de formulario queda oculta por el teclado e ignora las inserciones de área segura.
Resultado esperado:
- Envuelve la pantalla con manejo de área segura para los bordes superior e inferior.
- Usa comportamiento de evasión del teclado con desplazamientos específicos por plataforma.
- Prueba el diseño final en teléfonos pequeños y tablets.
Usando "rn-styling". Un equipo quiere una lista de verificación de revisión de estilos para pantallas de Expo.
Resultado esperado:
- Comprueba el uso de colores semánticos, el orden de clases, el diseño responsive, las sombras de plataforma, las áreas seguras y los arrays de estilos animados.
- Marca las suposiciones de Tailwind exclusivas de web antes de que lleguen a producción.
- Confirma el comportamiento del tema y del ancho de pantalla durante la revisión.
Auditoría de seguridad
SeguroI found no evidence that the flagged backtick patterns execute commands. The references are Markdown code fences, inline code, JSX snippets, and prose in SKILL.md, so all static findings are false positives. No prompt injection, data exfiltration intent, or system reconnaissance instruction was found.
Factores de riesgo
⚙️ Comandos externos (30)
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/cjharmath-rn-styling/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/cjharmath-rn-styling?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/cjharmath-rn-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-rn-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/cjharmath-rn-styling.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
CJHarmath. (2026). rn-styling security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-rn-styling/audits/8Cita BibTeX
@techreport{cjharmath-cjharmath-rn-styling-2026,
author = {CJHarmath},
title = {rn-styling security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cjharmath-rn-styling/audits/8},
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: "rn-styling security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-rn-styling/audits/8"
identifiers:
- type: other
value: "skillstore:cjharmath-rn-styling:audit:8"
description: "Skillstore immutable audit report identifier"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Estandarizar componentes móviles
Aplicar opciones coherentes de color, espaciado y diseño al crear componentes de interfaz en React Native.
Revisar pull requests de estilos
Comprobar si los cambios de componentes siguen patrones de NativeWind, BrandColors, área segura y estilos de plataforma.
Planificar soporte de temas
Diseñar el uso de temas claros y oscuros con constantes de color compartidas y responsabilidades claras de los componentes.
Prueba estos prompts
Revisa el estilo de este componente de React Native. Sugiere dónde usar BrandColors, clases de NativeWind y reglas de StyleSheet.
Inspecciona estos nombres de clase de NativeWind en busca de utilidades de espaciado, diseño y plataforma en conflicto. Explica qué estilos prevalecen y cómo simplificarlos.
Actualiza este plan de pantalla para modo claro, modo oscuro, áreas seguras, comportamiento del teclado, sombras de iOS y elevación de Android.
Audita este enfoque de estilos de React Native y crea un plan de migración desde colores codificados a BrandColors y utilidades de diseño de NativeWind.
Mejores prácticas
- Usa BrandColors para colores semánticos y NativeWind para diseño, espaciado, bordes y radio.
- Mantén explícitas las sombras específicas de plataforma con propiedades de sombra de iOS y elevación de Android.
- Prueba el comportamiento del tema, teclado, área segura y ancho de pantalla en dispositivos objetivo.
Evitar
- Codificar colores hexadecimales dentro de clases de componentes cuando existen constantes de color semánticas.
- Depender del comportamiento de Tailwind web donde el soporte de NativeWind difiere.
- Fusionar objetos de estilo con spreads dentro de rutas de renderizado para estilos animados o reutilizados.