Cómo se eligieron estas cinco
SkillSignal comparó Skills indexadas que cubren partes diferentes del trabajo frontend: dirección visual, restricciones específicas del producto, reglas de interfaz, revisión visual en varios tamaños y evidencia de comportamiento en el navegador. El orden combina fuente y revisión documental, mantenimiento, señales de adopción atribuidas, compatibilidad con el Agent, permisos y solapamiento de roles.
Es una clasificación editorial basada en fuentes, no un benchmark de ejecución. Un mismo Skill puede comportarse de forma distinta según el repositorio, el Agent, el modelo, el navegador y la revisión del código fuente. La pregunta útil es qué rol ausente reduce más incertidumbre en el proyecto actual.
1. frontend-design — dirección visual
La fuente de Anthropic es un buen punto de partida cuando las interfaces generadas parecen plantillas intercambiables. Orienta al Agent hacia un concepto visual concreto, tipografía deliberada, composición, color y movimiento, y pide que la complejidad de la implementación sea coherente con esa dirección.
Su fortaleza es la dirección artística, no la prueba independiente de usabilidad. Puede producir controles inaccesibles, estados incompletos o regresiones específicas del proyecto.
2. anti-ui-slop — contrato específico del producto
Cuando ya existe contexto de producto, anti-ui-slop ayuda a que los nombres, acciones, estados y referencias de la interfaz pertenezcan al producto real. Convierte evidencia del repositorio y referencias seleccionadas en un contrato de diseño y usa una comprobación final para detectar patrones genéricos y estados ausentes.
La fuente indexada está orientada a GitHub Copilot y puede necesitar red para consultar referencias públicas. Para otro Agent, trátala como una hipótesis portable y verifica primero que el descubrimiento y los permisos funcionen.
3. web-design-guidelines — revisión ligera de reglas
La Skill de Vercel es adecuada cuando la interfaz ya existe y necesita una revisión estructurada de reglas web y accesibilidad. Su perfil principalmente de lectura suele ser más estrecho que el de una Skill que controla el navegador o reescribe el repositorio.
Una revisión de reglas no ve todos los estados renderizados ni demuestra el uso con teclado, lector de pantalla, móvil o usuarios reales. Úsala como una barrera temprana, no como certificación de accesibilidad.
4. web-design-reviewer — revisión visual responsive
web-design-reviewer inspecciona un sitio en ejecución en móvil, tablet, escritorio y pantallas anchas; localiza el problema en el código, aplica cambios limitados y vuelve a comprobar el resultado. Es el rol más directo para detectar recortes, desbordamiento, espaciado irregular, jerarquía débil y fallos de breakpoint.
El control del navegador y la escritura en el repositorio amplían la superficie de permisos. Define los viewports y los criterios de aceptación antes de empezar.
5. webapp-testing — evidencia de comportamiento
Una página visualmente pulida todavía puede fallar en su flujo principal. webapp-testing completa la lista con un flujo orientado a navegador que puede conservar capturas y registros para que una persona los revise.
Una prueba correcta solo demuestra ese flujo, entorno, navegador y revisión de fuente. No certifica pagos, seguridad, datos de producción, todos los navegadores ni el rendimiento de la tarea.
Orden de instalación seguro
Instala el rol que falta, no toda la lista. Para una interfaz nueva, comienza con frontend-design. Si el resultado sigue siendo genérico, añade anti-ui-slop cuando el contexto y el Agent sean compatibles. Usa web-design-guidelines para una revisión de reglas; añade web-design-reviewer solo si necesitas inspección visual en varios viewports. Finalmente, usa webapp-testing cuando exista un flujo de valor que pueda comprobarse.
Cada incorporación debe tener un artefacto distinto, un revisor, una comprobación de aceptación y una condición de retirada. Si dos Skills producen el mismo tipo de resultado, conserva la que tenga la fuente, los permisos y la evidencia más claros.
- La página tiene un concepto visual y una jerarquía coherentes.
- El texto, las acciones, los estados y los componentes pertenecen al producto real.
- Se revisan reglas de accesibilidad y los estados que realmente existen.
- Los viewports objetivo no muestran recortes, desbordamiento ni contenido perdido.
- Un flujo de valor deja evidencia reproducible en el navegador.
- La fuente, la versión, los permisos y las limitaciones quedan visibles antes de instalar.