Repolode
Enviar
juliobsz

juliobsz/skills

Una skill para que los agentes de programación con IA creen sitios web de diseño cuidado y estilo premiado a partir de una sola línea, junto con la skill complementaria /jury, que los evalúa.

Ver en GitHub
Estrellas
475
Forks
16
Issues abiertos
0
Último commit
anteayer

¿Qué es?

awwwards es una skill para agentes de programación como Claude Code, Codex y Antigravity. A partir de un brief breve como «hazme un portafolio, me llamo Julio», desarrolla el concepto, la dirección de arte, la implementación y el control de calidad, con el objetivo de evitar el aspecto de plantilla genérica de muchos sitios generados por IA. Escribe un sistema de diseño en DESIGN.md, elige un concepto y un momento de animación distintivo, y crea el sitio con Next.js o Astro, usando GSAP, Lenis y OGL para las animaciones y WebGL.

Antes de entregar el sitio, la skill ejecuta una compilación de producción y una auditoría de rastreo que revisa el SEO, la accesibilidad y los textos provisionales; también toma capturas de pantalla en un navegador real en escritorio, móvil y con la opción de movimiento reducido activada. Mide LCP y CLS en un teléfono con la conexión limitada y ejecuta comprobaciones de axe; luego, itera hasta alcanzar las puntuaciones establecidas en su rúbrica. Los marcadores de posición del contenido que falta se señalan claramente. El despliegue en Vercel, Netlify o Cloudflare solo se realiza después de que el usuario lo confirme.

El repositorio también incluye /jury, una skill independiente que puntúa cualquier sitio web en diseño, usabilidad, creatividad y contenido, además de realizar comprobaciones orientadas a desarrolladores, y devuelve una lista de mejoras ordenada por prioridad. También incluye scripts de QA independientes para auditorías y capturas de pantalla.

Funciones clave

  • 01Convierte un brief de una línea en un concepto, un sistema de diseño y un sitio terminado
  • 02Define las reglas de paleta, tipografía, cuadrícula y animación en DESIGN.md
  • 03Crea sitios con Next.js (App Router) o Astro, usando GSAP, Lenis y OGL
  • 04Comprueba el resultado con compilaciones de producción, auditorías de rastreo, axe y capturas de pantalla en un navegador real
  • 05Incluye /jury para puntuar cualquier sitio web y ordenar las mejoras según el beneficio esperado

Casos de uso

  • Generar un portafolio personal o el sitio de un estudio a partir de una descripción breve con un agente de programación con IA
  • Rediseñar una landing page existente para lograr un mayor impacto visual
  • Auditar el SEO, la accesibilidad y el rendimiento de un sitio con los scripts de jury
  • Comparar el sitio web de un competidor con una rúbrica de diseño estructurada

Inicio rápido

  1. 1

    Instala la skill awwwards globalmente con la CLI de skills

    npx skills add juliobsz/skills -g
  2. 2

    Abre una nueva sesión del agente y pídele que cree un sitio web o escribe /awwwards

Antes de usarlo

  • Una ejecución completa requiere una sesión larga y consume muchos tokens.
  • Los resultados dependen de la capacidad del modelo subyacente para evaluar sus propias capturas de pantalla.
  • Los sitios incluyen contenido de marcador de posición que debes sustituir por proyectos y textos reales.
  • La puntuación de /jury es una estimación independiente, validada únicamente en dos sitios.

Temas

#agent-skills#claude-code#web-design#frontend#gsap#webgl#nextjs#astro#awwwards#claude-skills

Preguntas frecuentes

¿Qué es skills?
Una skill para que los agentes de programación con IA creen sitios web de diseño cuidado y estilo premiado a partir de una sola línea, junto con la skill complementaria /jury, que los evalúa. awwwards es una skill para agentes de programación como Claude Code, Codex y Antigravity. A partir de un brief breve como «hazme un portafolio, me llamo Julio», desarrolla el concepto, la dirección de arte, la implementación y el control de calidad, con el objetivo de evitar el aspecto de plantilla genérica de muchos sitios generados por IA. Escribe un sistema de diseño en DESIGN.md, elige un concepto y un momento de animación distintivo, y crea el sitio con Next.js o Astro, usando GSAP, Lenis y OGL para las animaciones y WebGL.
¿skills es gratuito? ¿Qué licencia tiene?
skills es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿skills sigue mantenido?
Mantenimiento activo. El último commit de skills fue el 18 oct 2026.
¿Para qué puedo usar skills?
Generar un portafolio personal o el sitio de un estudio a partir de una descripción breve con un agente de programación con IA Rediseñar una landing page existente para lograr un mayor impacto visual Auditar el SEO, la accesibilidad y el rendimiento de un sitio con los scripts de jury Comparar el sitio web de un competidor con una rúbrica de diseño estructurada
¿Cómo se instala skills?
Instala la skill awwwards globalmente con la CLI de skills: npx skills add juliobsz/skills -g Abre una nueva sesión del agente y pídele que cree un sitio web o escribe /awwwards
¿Dónde consigo skills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/juliobsz/skills

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados