Habilidades css-development-refactor
📦

css-development-refactor

v1.0.0 Riesgo bajo ⚙️ Comandos externos📁 Acceso al sistema de archivos

Refactorizar CSS en componentes semánticos

Los estilos inline dispersos y las clases de utilidad repetidas hacen que el código frontend sea difícil de mantener. Esta skill guía a Claude, Codex y Claude Code en la extracción semántica de CSS con modo oscuro y pruebas.

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

Pruébalo

Usando "css-development-refactor". Un archivo de componente contiene muchos botones con la misma lista larga de clases de utilidad.

Resultado esperado:

La skill recomienda una clase semántica de botón, actualiza cada botón para usarla y registra el recuento de reemplazos.

Usando "css-development-refactor". Un componente de tarjeta usa estilos inline de fondo, padding, borde y sombra.

Resultado esperado:

La skill mueve esos estilos a una clase de tarjeta con nombre, añade equivalentes de modo oscuro y sugiere una prueba de renderizado.

Usando "css-development-refactor". Un proyecto tiene clases de componentes existentes que se solapan con el nuevo patrón.

Resultado esperado:

La skill pide al agente reutilizar o extender clases existentes antes de añadir nuevo CSS.

Auditoría de seguridad

Riesgo bajo
v5 • 6/27/2026

Static analysis reported many command, filesystem, weak-crypto, and network-reconnaissance patterns, but review found these are Markdown examples and normal CSS refactoring instructions. No malicious intent, exfiltration, prompt injection, or executable bundled script was found in SKILL.md.

1
Archivos escaneados
416
Líneas analizadas
2
Review items
4
False positives ignored
Static false positives ignored (4)

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:112-116SKILL.md:286-289SKILL.md:326-329
External Command Guidance Is Benign
The reported command patterns are Markdown examples that recommend searching with grep and running npm test during CSS refactoring. These are expected developer actions and do not include shell interpolation, hidden downloads, persistence, or exfiltration.
The lines are fenced Markdown examples or explicit test commands. The context shows ordinary project-local validation, not dynamic command execution or attacker-controlled input.
Bajo
SKILL.md:224-226SKILL.md:265-275
Filesystem Access Is Expected For Refactoring
The skill instructs the agent to read component and CSS files, edit markup, and add tests. This is necessary for a CSS refactoring workflow and no sensitive file targets or broad destructive operations are requested.
The file operations are limited to project CSS, components, and tests. There is no evidence of credential access, deletion, or unauthorized file collection.
Bajo
SKILL.md:3SKILL.md:299-302
Weak Cryptography Matches Are Textual False Positives
The reported weak-cryptography locations occur in descriptive prose about CSS styles and documentation. No cryptographic API, hash function, encryption routine, or security-sensitive algorithm appears in the skill.
The matched lines discuss CSS refactoring and documentation content. The file contains no code invoking DES, MD5, SHA1, or any cryptographic primitive.
Bajo
SKILL.md:151-152SKILL.md:397-400
Network Reconnaissance Matches Are Textual False Positives
The network-reconnaissance alerts map to normal prose and CSS documentation examples, not network tooling. No instruction asks the agent to scan hosts, open sockets, enumerate services, or contact external endpoints.
The context around the lines concerns creating CSS classes and summarizing maintainability. No network commands or external targets are present.

Factores de riesgo

⚙️ Comandos externos (3)
SKILL.md:112-116 SKILL.md:286-289 SKILL.md:326-329
📁 Acceso al sistema de archivos (2)
SKILL.md:224-226 SKILL.md:265-275

Patrones detectados

Project-Local Shell Commands In Documentation
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

Consolidar clases de utilidad repetidas

Convierte combinaciones repetidas de utilidades para botones, tarjetas, insignias o paneles en clases de componentes con nombre.

Migrar estilos inline de forma segura

Mueve estilos inline desde componentes a clases CSS mientras mantiene el diseño y el comportamiento actuales.

Añadir modo oscuro durante la limpieza

Refactoriza estilos de componentes existentes y añade variantes correspondientes de modo oscuro en la misma pasada.

Prueba estos prompts

Encontrar objetivos de refactorización CSS 
Usa esta skill para inspeccionar mis archivos frontend en busca de estilos inline y grupos repetidos de clases de utilidad. Informa primero los mejores objetivos de refactorización.
Extraer clases semánticas 
Refactoriza las clases de utilidad repetidas en estos componentes en clases semánticas dentro del archivo CSS del proyecto. Conserva el comportamiento existente y las sobrescrituras específicas de clases.
Añadir variantes de modo oscuro 
Usa esta skill para añadir variantes de modo oscuro mientras extraes clases CSS semánticas. Revisa fondos, colores de texto, bordes y estados interactivos.
Refactorizar y validar 
Refactoriza CSS disperso en patrones semánticos de componentes, actualiza el marcado, añade pruebas enfocadas, ejecuta la validación disponible y resume los archivos modificados y las comprobaciones de comportamiento.

Mejores prácticas

  • Empieza con un inventario de patrones y refactoriza primero la duplicación de mayor frecuencia.
  • Reutiliza clases de componentes existentes antes de añadir nuevos nombres de clases semánticas.
  • Ejecuta las pruebas disponibles e inspecciona los modos claro y oscuro después de cada cambio significativo.

Evitar

  • No renombres clases sin revisar el marcado actual, las variantes y las pruebas.
  • No elimines clases de utilidad puntuales que expresan diferencias locales de diseño.
  • No afirmes que el comportamiento visual no ha cambiado sin evidencia de validación.

Preguntas frecuentes

¿Esta skill reescribe CSS automáticamente?
No. Proporciona un flujo de trabajo estructurado para que un agente inspeccione archivos, edite estilos y verifique el resultado.
¿Requiere Tailwind CSS?
Los ejemplos usan Tailwind @apply, pero el enfoque de refactorización semántica puede adaptarse a CSS normal.
¿Puede añadir soporte de modo oscuro?
Sí. El flujo de trabajo revisa explícitamente fondos, colores de texto, bordes y estados interactivos para variantes de modo oscuro.
¿Preservará el comportamiento existente?
Ese es el objetivo. La skill indica al agente que ejecute pruebas y verifique la salida visual después de la refactorización.
¿Qué archivos suele cambiar?
Normalmente cambia el marcado de componentes, archivos CSS compartidos y pruebas enfocadas relacionadas con los componentes refactorizados.
¿Es segura para sistemas de diseño grandes?
Sí, cuando se usa de forma incremental. Empieza con patrones repetidos, mantén los cambios pequeños y valida cada grupo de componentes.

Detalles del desarrollador

Licencia

MIT

Version

v1.0.0

Repositorio

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

Ref.

main

Estructura de archivos

📄 SKILL.md