Habilidades css-development-validate
📦

css-development-validate

v1.0.0 Riesgo bajo

Validar la calidad del CSS

Los cambios de CSS pueden desviarse de los estándares de nomenclatura, modo oscuro y pruebas. Esta skill guía a Claude, Codex y Claude Code a través de una revisión estructurada de hojas de estilo.

Compatible con: Claude Codex Code(CC)
🥉 79 Bronce
1

Descargar el ZIP de la habilidad

2

Subir en Claude

Ve a Configuración → Capacidades → Habilidades → Subir habilidad

3

Activa y empieza a usar

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-validate.md Manifest firmado GET /api/skills/2389-research-css-development-validate/manifest Lockfile firmado GET /api/skills/2389-research-css-development-validate/lockfile

Pruébalo

Usando "css-development-validate". Una hoja de estilo contiene nombres de clases basados en utilidades y varios componentes con color sin variantes de modo oscuro.

Resultado esperado:

El informe enumera problemas de nomenclatura semántica, identifica cobertura faltante de modo oscuro y recomienda nombres de clases de componentes más claros.

Usando "css-development-validate". Una biblioteca de componentes repite estilos de tarjeta similares en varias clases.

Resultado esperado:

El informe identifica el patrón repetido, sugiere una clase base compartida y explica el beneficio esperado para el mantenimiento.

Usando "css-development-validate". Se agregó un nuevo componente CSS sin pruebas ni comentarios de uso.

Resultado esperado:

El informe marca la falta de pruebas estáticas y de renderizado, y luego recomienda comentarios de documentación para la nueva clase.

Auditoría de seguridad

Riesgo bajo
v4 • 6/27/2026

Static analysis reported command execution, weak cryptography, and network reconnaissance patterns, but review found these are Markdown backticks, prose, and CSS example snippets. No executable scripts, network behavior, prompt injection, credential access, or malicious intent were found in SKILL.md. The skill is safe to publish with a low risk note for false-positive static detections.

1
Archivos escaneados
357
Líneas analizadas
0
Review items
3
False positives ignored
Static false positives ignored (3)

These static matches were dismissed by semantic review or matched schema-only tokens, so they are shown for transparency but do not drive the quality score.

Bajo
SKILL.md:12-18SKILL.md:31-35SKILL.md:51-61SKILL.md:70-76SKILL.md:89-97SKILL.md:110-128SKILL.md:134-143SKILL.md:158-173SKILL.md:189-208SKILL.md:223-236SKILL.md:256-262SKILL.md:278-339
False positive: Markdown backticks flagged as command execution
The external command detections are Markdown inline code spans and fenced examples in SKILL.md. They describe CSS review steps and sample CSS, HTML, TypeScript, and Markdown output rather than Ruby backtick execution or shell command execution.
The flagged syntax appears inside Markdown formatting and example blocks only. I found no executable script, command string construction, or instruction to run external commands.
Bajo
SKILL.md:3SKILL.md:10SKILL.md:54SKILL.md:86SKILL.md:95
False positive: Prose flagged as weak cryptography
The weak cryptographic algorithm detections occur in ordinary descriptive text and class naming examples. No evidence found of cryptographic functions, password handling, hashing calls, MD5, DES, SHA1, or encryption code.
The semantic context is CSS review documentation, not security-sensitive code. The static matches appear to come from substrings in words such as description or examples.
Bajo
SKILL.md:121SKILL.md:185
False positive: CSS review text flagged as network reconnaissance
The network reconnaissance detections are inside a sample HTML button and prose about repeated style patterns. No evidence found of network scanning, host discovery, sockets, HTTP requests, or data exfiltration behavior.
The referenced lines contain CSS validation examples, not networking APIs or reconnaissance tooling. The surrounding workflow remains limited to reading and reviewing project CSS files.
No se encontraron problemas de seguridad
Auditado por: codex Ver historial de auditorías →

Puntuación de calidad

55
Arquitectura
100
Mantenibilidad
87
Contenido
69
Comunidad
95
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

Revisión de hojas de estilo previa a la fusión

Revisar CSS modificado antes de fusionarlo para detectar problemas de nomenclatura, modo oscuro y cobertura de pruebas.

Auditoría de consistencia del sistema de diseño

Comprobar si las clases de componentes siguen patrones compartidos de nomenclatura y composición en todo un proyecto.

Planificación de refactorización para deuda de CSS

Identificar estilos repetidos, documentación faltante y clases que deberían renombrarse antes de una fase de limpieza.

Prueba estos prompts

Revisar una hoja de estilo 
Revisa este archivo CSS en cuanto a nomenclatura semántica, uso de Tailwind @apply, cobertura de modo oscuro, pruebas y documentación.
Auditar estilos de componentes 
Audita estos estilos de componentes y los archivos de componentes relacionados. Informa problemas de nomenclatura, utilidades repetidas, variantes de modo oscuro faltantes y pruebas faltantes.
Preparar para refactorización 
Valida el CSS actual e identifica oportunidades de refactorización. Prioriza patrones repetidos, nombres de clases poco claros y cobertura faltante.
Controlar una pull request 
Revisa este cambio de CSS como control de una pull request. Proporciona una recomendación de aprobación o rechazo con referencias a archivos, gravedad y correcciones recomendadas.

Mejores prácticas

  • Revisar el CSS con los archivos de componentes relacionados para que el uso de clases sea claro.
  • Pedir referencias de archivo y línea para cada problema informado.
  • Priorizar los vacíos de modo oscuro y pruebas antes de limpiar la documentación.

Evitar

  • No usarlo como reemplazo de las pruebas de regresión visual.
  • No aplicar la orientación de Tailwind @apply a proyectos que evitan Tailwind intencionalmente.
  • No renombrar clases sin comprobar el uso en componentes y las pruebas.

Preguntas frecuentes

¿Esta skill modifica archivos CSS automáticamente?
No. Guía la revisión y el informe. El usuario puede solicitar correcciones después del informe.
¿Puede revisar proyectos de Tailwind?
Sí. Comprueba específicamente si las utilidades de Tailwind se componen en clases semánticas con @apply.
¿Requiere un framework de pruebas específico?
No. Busca pruebas estáticas de CSS y pruebas de renderizado de componentes en la estructura del proyecto.
¿Puede encontrar problemas de modo oscuro?
Sí. Comprueba estilos con color e interactivos para detectar variantes de modo oscuro faltantes.
¿Es esta una skill de escaneo de seguridad?
No. Es una skill de revisión de calidad de CSS frontend, no un escáner de vulnerabilidades.
¿Cuándo debería usarla?
Úsala antes de fusionar cambios de CSS, durante auditorías del sistema de diseño o antes de planificar una refactorización de CSS.

Detalles del desarrollador

Licencia

MIT

Version

v1.0.0

Repositorio

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills/validate

Ref.

main

Estructura de archivos

📄 SKILL.md