web-styling
Diseña interfaces React más rápido
Los equipos de React suelen repetir decisiones de estilo en componentes y layouts. Esta skill proporciona patrones reutilizables de Tailwind, CSS Modules, CSS-in-JS, tematización, animación y layout.
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 "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-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 "web-styling". Estiliza una tarjeta de producto responsive con Tailwind CSS.
Resultado esperado:
Un plan de estilizado mobile-first con espaciado, tipografía, estados hover, colores de modo oscuro y grupos de clases reutilizables.
Usando "web-styling". Crea variantes de botón primary, secondary, outline y danger.
Resultado esperado:
Una matriz de variantes que cubre tamaños, estados, comportamiento disabled, combinación de clases y estilizado de interacción consistente.
Usando "web-styling". Planifica un sistema de temas para un dashboard React.
Resultado esperado:
Una estrategia concisa de tokens para colores, espaciado, variables CSS, mapeo de modo oscuro y organización de archivos de componentes.
Auditoría de seguridad
SeguroAll static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
Factores de riesgo
⚙️ Comandos externos (42)
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-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-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). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7Cita BibTeX
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Crear componentes React reutilizables
Crea botones, tarjetas, modales y primitivas de layout con variantes consistentes y clases responsive.
Documentar un sistema de diseño
Estandariza espaciados, tokens de color, valores de modo oscuro y convenciones de estilizado de componentes.
Lanzar pantallas de producto pulidas
Aplica patrones de estilizado probados rápidamente sin crear una arquitectura de estilos personalizada desde cero.
Prueba estos prompts
Crea una guía de estilizado para un componente React llamado [component]. Usa Tailwind CSS, espaciado responsive, estados hover y soporte para modo oscuro.
Revisa estos requisitos de estilizado en React y propón un patrón de variantes reutilizable usando clsx, tailwind-merge o cva. Explica cuándo encaja cada opción.
Diseña un enfoque de tematización en React para [product]. Incluye tokens de color, tokens de espaciado, variables CSS, comportamiento de modo oscuro y organización de archivos.
Audita este enfoque de estilizado en React para evaluar su mantenibilidad. Identifica patrones duplicados, brechas de tokens, problemas responsive, consideraciones de animación y pasos de migración.
Mejores prácticas
- Usa reglas responsive mobile-first y mantén explícitas las restricciones de layout.
- Centraliza los tokens de diseño, las definiciones de variantes y los valores de modo oscuro.
- Usa helpers de combinación de clases cuando los componentes acepten sobrescrituras externas de clases.
Evitar
- Duplicar cadenas largas de clases de variantes en varios componentes.
- Mezclar colores y espaciados arbitrarios sin tokens de diseño compartidos.
- Añadir animaciones sin reglas de estado, límites de movimiento o comportamiento de fallback.