Repolode
Enviar
juliobsz

juliobsz/skills

Uma skill para agentes de programação com IA criarem sites premiados e bem projetados a partir de um briefing de uma linha, acompanhada da skill /jury para avaliar sites.

Ver no GitHub
Estrelas
475
Forks
16
Issues abertas
0
Último commit
anteontem

O que é?

awwwards é uma skill para agentes de programação, como Claude Code, Codex e Antigravity. A partir de um briefing curto, como "faça um portfólio para mim, meu nome é Julio", ela conduz as etapas de conceito, direção de arte, desenvolvimento e QA, buscando evitar o visual genérico de template comum à maioria dos sites gerados por IA. Ela registra um sistema de design em DESIGN.md, escolhe um conceito e um momento de movimento marcante, e desenvolve com Next.js ou Astro, usando GSAP, Lenis e OGL para animações e WebGL.

Antes de entregar um site, a skill executa um build de produção, uma auditoria de rastreamento que cobre SEO, acessibilidade e textos provisórios, e captura screenshots em um navegador real nas configurações para desktop, mobile e movimento reduzido. Ela mede LCP e CLS em um celular com conexão limitada e executa verificações com axe, depois faz ajustes até atingir as pontuações definidas pela rubrica. Conteúdo provisório para informações ausentes é identificado claramente. A implantação na Vercel, Netlify ou Cloudflare só acontece depois da confirmação do usuário.

O repositório também inclui /jury, uma skill separada que avalia qualquer site em design, usabilidade, criatividade e conteúdo, além de verificações voltadas a desenvolvedores, e retorna uma lista ordenada de ajustes. Também estão incluídos scripts independentes de QA para auditoria e captura de screenshots.

Recursos principais

  • 01Transforma um briefing de uma linha em um conceito, sistema de design e site pronto
  • 02Registra regras de paleta, tipografia, grid e movimento em DESIGN.md
  • 03Desenvolve com Next.js (App Router) ou Astro, usando GSAP, Lenis e OGL
  • 04Verifica o resultado com builds de produção, auditorias de rastreamento, axe e screenshots em um navegador real
  • 05Inclui /jury para avaliar qualquer site e ordenar os ajustes pelo ganho esperado

Casos de uso

  • Gerar um portfólio pessoal ou site de estúdio a partir de uma descrição curta, usando um agente de programação com IA
  • Reformular uma landing page existente para causar um impacto visual maior
  • Auditar SEO, acessibilidade e desempenho de um site com os scripts do jury
  • Comparar o site de um concorrente com uma rubrica de design estruturada

Início rápido

  1. 1

    Instale a skill awwwards globalmente com a CLI skills

    npx skills add juliobsz/skills -g
  2. 2

    Abra uma nova sessão do agente e peça um site ou digite /awwwards

Antes de usar

  • Uma execução completa exige uma sessão longa e consome muitos tokens.
  • Os resultados dependem da capacidade do modelo subjacente de avaliar as próprias capturas de tela.
  • Os sites vêm com conteúdo de placeholder que você precisa substituir por projetos e textos reais.
  • A pontuação de /jury é uma estimativa independente, validada em apenas dois sites.

Tópicos

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

Perguntas frequentes

O que é skills?
Uma skill para agentes de programação com IA criarem sites premiados e bem projetados a partir de um briefing de uma linha, acompanhada da skill /jury para avaliar sites. awwwards é uma skill para agentes de programação, como Claude Code, Codex e Antigravity. A partir de um briefing curto, como "faça um portfólio para mim, meu nome é Julio", ela conduz as etapas de conceito, direção de arte, desenvolvimento e QA, buscando evitar o visual genérico de template comum à maioria dos sites gerados por IA. Ela registra um sistema de design em DESIGN.md, escolhe um conceito e um momento de movimento marcante, e desenvolve com Next.js ou Astro, usando GSAP, Lenis e OGL para animações e WebGL.
skills é gratuito? Qual é a licença?
skills é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
skills ainda é mantido?
Manutenção ativa. O último commit de skills foi em 18 de out. de 2026.
Para que posso usar skills?
Gerar um portfólio pessoal ou site de estúdio a partir de uma descrição curta, usando um agente de programação com IA Reformular uma landing page existente para causar um impacto visual maior Auditar SEO, acessibilidade e desempenho de um site com os scripts do jury Comparar o site de um concorrente com uma rubrica de design estruturada
Como instalar skills?
Instale a skill awwwards globalmente com a CLI skills: npx skills add juliobsz/skills -g Abra uma nova sessão do agente e peça um site ou digite /awwwards
Onde consigo skills?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/juliobsz/skills

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados