Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Frontend UI Engineering skill
Constrói interfaces acessíveis, responsivas e prontas para produção, com componentes e páginas
- instalações
- 67,2 mil
- estrelas no GitHub
- 110,5 mil
- No skills.sh desde
- fevereiro de 2026
- Licença
- MIT
Atualizada no GitHub em 13 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing…
Segurança
Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.
- Gen Agent Trust HubPassou
- SocketPassou
- SnykPassou
Perguntas
Como instalar a Frontend UI Engineering no Claude Code?
Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Frontend UI Engineering, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.
Levar essa skill
1x frontend-ui-engineeringR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/addyosmani/agent-skills
Aprenda a usar
- Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.
Na mesma prateleira
Ver as 1.731 skills do corredorVercel Labs
vercel-
O Claude escreve e revisa seu app em React Native ou Expo seguindo regras que deixam lista, animação e navegação fluidas no celular.OficialAuditada254,5 mil instalações, grátisreact- native- skills emilkowalski
animate-
O Claude escreve a animação do seu app Expo decidindo antes se ela deve existir, e entrega código pensado pra rodar liso até em Android antigo.Auditada137,5 mil instalações, grátisexpo Anthropic
web-
O Claude cria uma interface com vários componentes, estado e navegação e entrega tudo num arquivo HTML só, sem servidor pra configurar.Oficial112,6 mil instalações, grátisartifacts- builder Cloudflare
web-
O Claude grava o carregamento real da página, mede LCP, CLS e a resposta do servidor e diz exatamente o que corrigir, com o ganho estimado de cada mudança.Oficial110 mil instalações, grátisperf Google Labs
stitch-
O Claude gera cada página no Stitch, encaixa no site com a navegação ligada e deixa escrito qual é a próxima, pro ciclo continuar.OficialAuditada56,4 mil instalações, grátisloop vuejs-ai
vue-
Componentes Vue com estado previsível e cada parte cuidando de uma coisa, num código que outra pessoa, ou o próprio Claude, entende e altera depois.Auditada42,8 mil instalações, grátisbest- practices Expo
upgrading-
Seu app em Expo sobe de versão seguindo o passo a passo do próprio time do Expo, com as trocas de pacote e as armadilhas já mapeadas.Oficial42,2 mil instalações, grátisexpo antfu
vite
O Claude mexe no seu projeto Vite com a documentação da versão 8 na mão, incluindo o que mudou com a chegada do Rolldown.Auditada39,9 mil instalações, grátis
Mais da loja addyosmani
Ver a loja addyosmaniaddyosmani
security-
Protege o código contra vulnerabilidades: entrada de usuário, autenticação e armazenamento de dadosAuditada70 mil instalações, grátisand- hardening performance-
Otimiza a performance de front-end, back-end, queries e bancos de dados, medindo antes de mexerAuditada65 mil instalações, grátisoptimization spec-
O Claude para de sair codando no chute: primeiro escreve o que vai ser feito e como saber que ficou pronto, e só segue com o seu ok.Auditada64,8 mil instalações, grátisdriven- development planning-
Quebra um trabalho em tarefas pequenas, ordenadas e verificáveis a partir de uma specAuditada64,1 mil instalações, grátisand- task- breakdown accessibility
Audita e melhora a acessibilidade web seguindo a WCAG 2.2, de leitor de tela a contrasteAuditada64,1 mil instalações, grátisdocumentation-
Registra decisões de arquitetura (ADRs) e documenta o porquê das escolhas feitas no códigoAuditada63,7 mil instalações, grátisand- adrs debugging-
Guia a depuração sistemática até a causa raiz quando teste falha, build quebra ou algo para de funcionar62,6 mil instalações, grátisand- error- recovery api-
Guia o desenho de APIs REST e GraphQL e de interfaces públicas estáveis e difíceis de usar erradoAuditada62,4 mil instalações, grátisand- interface- design test-
Conduz o desenvolvimento com testes no ciclo red-green-refactor, escrevendo o teste antes do códigoAuditada61,8 mil instalações, grátisdriven- development incremental-
Entrega mudanças em fatias finas e verificáveis, implementando e testando uma peça de cada vezAuditada61,7 mil instalações, grátisimplementation context-
Ajusta o contexto do agente para ele render melhor ao iniciar sessão ou trocar de tarefa61,4 mil instalações, grátisengineering git-
Organiza o fluxo de Git: commits, branches, conflitos e versionamento como pontos de salvamentoAuditada59,4 mil instalações, grátisworkflow- and- versioning