emil-design-eng (emilkowalski/skills)

Reseña

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC Windows dedicado a pruebas, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill condensado en una frase añadida al prompt (grupo del prompt de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo el texto indicado abajo). Las mismas tres tareas que la prueba de frontend-design (una landing page de Tidepool, un panel de calidad del agua y un rediseño de la página de inicio de un gimnasio de escalada), escritas como archivos HTML autocontenidos. Los prompts no mencionan animación ni la skill; el grupo con skill simplemente tiene la skill instalada.

Comparación de tres ramas

Medido con Codex CLI en 18 ejecuciones, puntuado con comprobaciones basadas en reglas y sin juez LLM. Total 26.2 / 30, veredicto Recomendada.

Veredicto: Recomendada (26.2 / 30). Fuente: emilkowalski/skills, skills/emil-design-eng, fijada en el commit a81dbca. Instalación: npx skills@latest add emilkowalski/skills --skill emil-design-eng. Licencia: MIT (LICENSE del repositorio).

Qué es

La skill emil-design-eng de emilkowalski/skills: las reglas de ingeniería de diseño de Emil Kowalski para pulir interfaces, unas 4,000 palabras en un único SKILL.md. Cubre cuándo animar siquiera, curvas ease-out personalizadas en lugar de las predeterminadas, duraciones de 150-300 ms, animar solo transform y opacity, feedback al pulsar (scale(0.97) en :active), no animar nunca desde scale(0), escalonado, hover limitado con (hover: hover), movimiento reducido y detalles invisibles como las áreas de pulsación. Sin scripts.

Cómo lo probamos

Codex CLI 0.166 (gpt-6-astra, razonamiento bajo) en un PC de pruebas Windows dedicado, un proyecto temporal nuevo y HOME/TMPDIR/cachés temporales por ejecución, skill instalada (tratamiento) o ausente (control) o ausente con el requisito central de la skill comprimido en una frase añadida al final del prompt (grupo de una frase), 2 ejecuciones por grupo y tarea, red desactivada, escrituras en /tmp bloqueadas. Los prompts nunca mencionan la skill (salvo la formulación indicada abajo).

Las mismas tres tareas que la prueba de frontend-design (una landing page de Tidepool, un panel de calidad del agua y un rediseño de la página de inicio de un rocódromo), escritas como archivos HTML autocontenidos. Los prompts no mencionan animación ni la skill; el grupo con la skill simplemente tiene la skill instalada.

1. Nueva landing page a partir de un brief — Crea una landing de una sola página para Tidepool, una marca de snacks de algas de pequeño lote que vende por suscripción (tres sabores, $14/caja, envío mensual). Escribe un único index.html autocontenido con CSS en línea y JS mínimo solo si hace falta. Sin frameworks, sin compilación…
2. Interfaz de panel con muchos datos — Crea una página de panel para un equipo municipal de monitorización de la calidad del agua: lecturas actuales de 6 estaciones (pH, turbidez, cloro, temperatura), una tendencia de 7 días para cada una y un panel de alertas. Un único dashboard.html autocontenido con CSS/JS en línea y datos predefinidos…
3. Reforma una página existente y sosa — old.html es la página de inicio actual del Granite Peak Climbing Gym (Boulder, CO). Rediséñala en new.html: conserva todo su contenido real (precios, clases, horarios, dirección) pero haz que la página parezca propia de este gimnasio concreto. HTML/CSS autocontenido, sin frameworks…

La puntuación es programática (tests ocultos / detección de problemas sembrados / comprobaciones de restricciones / renderizado + OCR cuando corresponde), 0–5 por ejecución. Ningún juez LLM decidió ninguna puntuación. Como esta skill trata de movimiento y detalles de interacción que una captura de pantalla no puede mostrar, la puntuación es una lista de comprobación basada en reglas aplicada al CSS generado (10 comprobaciones: feedback al pulsar con :active, cubic-bezier personalizada, nada de ease-in/linear/ease predeterminada, nada de transition: all, solo transform/opacity/color animados, duraciones <= 300 ms, movimiento reducido, escalonado, nada de scale(0), hover limitado por (hover: hover)), 0-5 por ejecución. Esto se alinea mucho con las propias reglas de la skill, así que mide «¿siguió la skill?», no «¿es mejor la página?».

Resultados

La frase única que recibió el tercer grupo: "Pule como un ingeniero de diseño: curvas de easing personalizadas (ease-out para las entradas, nunca la predeterminada ni ease-in), duraciones de 150-300 ms, anima solo transform y opacity, feedback al pulsar como scale(0.97) en :active, nunca animes desde scale(0), escalona las entradas, respeta prefers-reduced-motion y cuida los detalles invisibles (estados hover, active y focus, áreas de pulsación de 44 px)."

Puntuación media: 3.33 sin vs 4.75 con la skill (delta +1.42). Tokens por ejecución: 133k vs 149k (1.12x); tiempo 178s vs 163s. Grupo de una frase: 4.5 (la ganancia de la skill sobre la frase única: +0.25; la ganancia de la frase única sobre sin skill: +1.17); tokens de la frase única 127k por ejecución, así que la skill cuesta 1.17x la frase única.

Qué ocurrió

• Codex sin más nunca escribe feedback al pulsar ni una curva de easing personalizada: 0/6 páginas de control tienen una regla de escala en :active o un cubic-bezier, frente a 6/6 del grupo de una frase y 6/6 (pulsación) y 5/6 (curva) con la skill. Puntuación 3.33 control, 4.50 una frase, 4.75 skill.
• La única regla que el prompt de una frase no incluía, limitar los estilos hover con @media (hover: hover), la siguieron 5/6 páginas con skill y 0/12 de las demás páginas. Ese es todo el margen de la skill sobre la frase (+0.25).
• Los buenos hábitos ya eran comunes en todas partes: nada de transition: all, solo transform/opacity/color animados, soporte de movimiento reducido, nada de scale(0). Los controles acertaron esto 6/6 veces, así que la skill aporta las reglas de pulido específicas, no lo básico.
• Mirando las páginas a ciegas (capturas de escritorio, barajadas), las 18 están pulidas y ninguna está rota; la calidad de diseño estático de los tres grupos es indistinguible. La skill cambia el comportamiento que se siente, no lo que muestra una captura.
• Coste: 149k tokens por ejecución frente a 133k (1.12x) y 127k del grupo de una frase, la sobrecarga de skill más baja que hemos medido entre las skills de diseño.

Puntuaciones por dimensión

Límites de esta prueba

• Las reglas de movimiento se comprueban a partir del texto CSS, no viendo la página; una transición puede existir y aun así sentirse mal.
• La lista de comprobación deriva de las propias reglas de la skill, y el prompt de una frase enuncia la mayoría, así que el grupo de una frase es un límite superior para un prompt corto.
• Solo tres briefs de páginas estáticas; no se pidieron componentes interactivos (desplegables, toasts, cajones), en los que la skill emplea la mayor parte de sus palabras.
• n = 2 por grupo y tarea: las diferencias de menos de ~1 punto son ruido.
• La puntuación basada en reglas mide lo que las comprobaciones pueden ver; no puede juzgar el gusto ni si el resultado es el mejor posible.

Seguridad

Consulta security.md. Escaneo: 0 CRITICAL / 0 HIGH / 0 MEDIUM. Veredicto: segura de ejecutar (sandbox sin red). Un escaneo limpio no demuestra que una skill sea segura.

Conclusión

Si quieres páginas con feedback al pulsar, curvas ease-out y hover limitado sin pedirlo, la skill lo entrega casi sin coste de tokens. Una frase que enumere las mismas reglas llega al 94% del resultado, así que el valor de la skill es que no tienes que conocer las reglas.