Habilidades css-development

📦

css-development

Name: css-development
Author: 2389-research

Revisión del contenido r1 Seguro ⚙️ Comandos externos📁 Acceso al sistema de archivos

Crear componentes CSS coherentes

Los estilos CSS suelen desviarse entre componentes y clases de utilidad. Esta skill guía la creación de clases semánticas, la composición con Tailwind, la cobertura de modo oscuro, las pruebas y la refactorización.

Compatible con: Claude Codex Code(CC)

🥉 78 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 "css-development" from https://skillstore.io/skills/2389-research-css-development.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development/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/2389-research-css-development.md Manifest firmado GET /api/skills/2389-research-css-development/manifest Lockfile firmado GET /api/skills/2389-research-css-development/lockfile

Pruébalo

Usando "css-development". Crea un estilo de botón principal con soporte para modo oscuro.

Resultado esperado:

Nombre semántico sugerido: button-primary.
Composición agrupada recomendada de Tailwind para color, espaciado, tipografía, foco y transiciones.
Plan de pruebas que cubre la existencia de la clase, utilidades de modo oscuro y aplicación de la clase del componente.

Usando "css-development". Revisa un archivo CSS antes de fusionar.

Resultado esperado:

Informe de buenos patrones, problemas de nomenclatura, variantes de modo oscuro faltantes y brechas de pruebas.
Correcciones priorizadas con referencias de archivo y línea cuando los archivos del proyecto estén disponibles.
Siguiente paso sugerido para refactorizar problemas estructurales solo cuando sea necesario.

Usando "css-development". Refactoriza clases de utilidad repetidas en varios componentes.

Resultado esperado:

Inventario de patrones visuales repetidos y su frecuencia.
Nombres de clases semánticas propuestos y archivos afectados.
Lista de verificación para pruebas, paridad visual y comportamiento en modo oscuro.

Auditoría de seguridad

Seguro

v6 • 6/7/2026 Abrir el informe versionado

Static analysis produced many hits because Markdown backticks, CSS examples, and fixed local test snippets were interpreted as executable Ruby, shell, or filesystem behavior. I found no evidence of prompt injection, data exfiltration, network reconnaissance, or dynamic command construction in the reviewed files.

Archivos escaneados

1,311

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (188)

📁 Acceso al sistema de archivos (5)

create-component/SKILL.md:230 create-component/SKILL.md:234 refactor/SKILL.md:268 refactor/SKILL.md:273 SKILL.md:100

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/2389-research-css-development/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/2389-research-css-development/security.svg)](https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2389-research-css-development/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/2389-research-css-development.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

2389-research. (2026). css-development security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development/audits/6

Cita BibTeX

@techreport{2389-research-2389-research-css-development-2026,
  author = {2389-research},
  title = {css-development security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/2389-research-css-development/audits/6},
  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: "css-development security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "2389-research"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/2389-research-css-development/audits/6"
identifiers:
  - type: other
    value: "skillstore:2389-research-css-development:audit:6"
    description: "Skillstore immutable audit report identifier"

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

Crear estilos de UI reutilizables

Añade estilos para botones, tarjetas, insignias o formularios con nombres semánticos, variantes de modo oscuro y pruebas correspondientes.

Auditar la coherencia del CSS

Revisa nombres de clases, composición con Tailwind, documentación y cobertura de pruebas antes de fusionar cambios del sistema de diseño.

Refactorizar marcado con muchas utilidades

Convierte combinaciones repetidas de utilidades en clases de componentes mantenibles, preservando el comportamiento y el resultado visual.

Prueba estos prompts

Crear un componente CSS

Crea un componente CSS semántico para un botón principal. Incluye composición con Tailwind, variantes de modo oscuro, notas de uso y sugerencias de prueba.

Validar estilos existentes

Revisa mi archivo components.css en cuanto a nomenclatura semántica, uso de Tailwind @apply, cobertura de modo oscuro, documentación y pruebas faltantes.

Refactorizar marcado repetido

Encuentra patrones repetidos de utilidades Tailwind en estos componentes y propone clases semánticas que preserven el comportamiento visual actual.

Planificar una migración CSS

Crea un plan de migración por etapas desde clases de utilidad dispersas hacia componentes CSS semánticos con pruebas, puntos de revisión y orientación para reversión.

Mejores prácticas

Lee el CSS existente antes de añadir nuevas clases de componentes.
Usa nombres semánticos que describan el propósito, no solo el color o el tamaño.
Añade variantes de modo oscuro y pruebas para cada componente visual reutilizable.

Evitar

Crear una clase nueva cuando las clases existentes pueden componer el mismo resultado.
Dejar combinaciones repetidas de utilidades dispersas en muchos componentes.
Añadir estilos con color o interactivos sin cobertura de modo oscuro.

Preguntas frecuentes

¿Esta skill escribe CSS automáticamente?

Proporciona un flujo de trabajo y ejemplos. Las ediciones de archivos siguen dependiendo del asistente de codificación conectado y del contexto del proyecto.

¿Se requiere Tailwind?

La guía está optimizada para patrones de Tailwind @apply. Los proyectos sin Tailwind pueden necesitar ejemplos CSS adaptados.

¿Puede revisar CSS existente?

Sí. El flujo de trabajo de validación comprueba nomenclatura, composición, cobertura de modo oscuro, pruebas y documentación.

¿Puede ayudar con React y Vue?

Sí. Los ejemplos incluyen patrones de integración con React, Vue y HTML estándar.

¿Reemplaza la QA visual?

No. Recomienda comprobaciones, pero la paridad visual necesita revisión en navegador, capturas de pantalla o pruebas del proyecto.

¿Qué la hace útil para Claude Code y Codex?

Ofrece a Claude, Claude Code y Codex un flujo de trabajo CSS estructurado con puntos de control claros y resultados esperados.