frontend
Ajuda seu agente a criar e aprimorar interfaces de usuário para a web. Útil para qualquer tarefa relacionada a design visual, layout, estilo e experiência do usuário.
O que ela faz
Esta ferramenta ajuda a criar e melhorar a aparência de sites e aplicativos. Ela cuida do design, das cores, do layout e de animações para que tudo fique bonito e fácil de usar.
Quando usar
- ✓Quando você quer que um site tenha uma aparência específica.
- ✓Ao criar botões, menus ou outras partes de uma interface.
- ✓Para deixar um site mais animado ou com um visual moderno.
Exemplo do que pedir para a IA
“Faça um site com um visual moderno e minimalista, com animações sutis nos botões.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta analisa o que você quer e usa guias de design e exemplos para criar o código necessário. Ela verifica se o resultado final é bonito e funciona bem.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add code-yeongyu/oh-my-openagent --skill frontendOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/dev/packages/shared-skills/skills/frontend/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Frontend
Este arquivo é um roteador, não um manual de regras. As regras vivem em quatro conjuntos de regras em references/, e lê-las é o trabalho, não o preâmbulo para ele. Antes de tocar em qualquer arquivo, nomeie as referências para as quais a solicitação é roteada e o único motivo pelo qual cada uma é necessária, depois leia exatamente essas. Declarar o conjunto primeiro é o que torna a escolha revisável: uma referência que você nunca nomeou é uma que você decidiu pular, e uma referência que você nomeou, mas nunca abriu, é uma lacuna que você ainda deve. A improvisação além do conjunto roteado produz a saída genérica de "lixo de IA" que esta habilidade existe para prevenir.
O padrão não é limpo e correto — é um trabalho que um designer sênior da Linear, Stripe ou Supabase enviaria. Correto, mas sem graça, é uma falha, não um acabamento. Proteja a superfície com a mesma intensidade que protege a construção: o design é um entregável de primeira classe, não uma decisão única que você bloqueia e abandona.
Fase 0 — Roteamento (antes de qualquer trabalho de UI)
| A solicitação envolve… | Leia |
|---|---|
| QUALQUER implementação de UI, estilização, redesign, mockup ou decisão visual | references/design/README.md PRIMEIRO. Ele impõe dois portões obrigatórios — o Portão do Sistema de Design (um DESIGN.md deve existir antes que qualquer componente seja escrito) e o Portão de Ferramentas de Desenvolvimento React (react-grab / react-scan / react-doctor instalados por padrão) — então roteia para as referências de gosto e marca abaixo. |
| Estrutura espacial — shells de aplicativos, propriedade de rolagem, "o que vai onde", "este layout quebra em X" | TAMBÉM references/design/layout-skill.md para a mecânica, então references/design/stylegallery.md para buscar um contrato de padrão nomeado para esse problema espacial exato. Ambos se baseiam na habilidade de estilo e não adicionam nenhuma direção visual. |
| Saída paginada — um relatório PDF, uma folha de estilo de impressão, um pipeline de impressão headless-Chrome, um deck HTML impresso em papel, ou qualquer defeito de quebra "por que esta página está meio vazia" | TAMBÉM references/design/print-paged-media.md para a caixa da página, as propriedades de fragmentação, o conjunto de blocos atômicos e o efeito colateral de "manter junto" que deixa um bloco em uma página quase vazia. Ele não adiciona nenhuma direção visual e se baseia na habilidade de estilo roteada. |
| Interação ou trabalho de movimento — microinterações, componentes animados, transições, gestos, feedback de estado hover/pressionado, "torná-lo vivo" | TAMBÉM references/design/interaction-skill.md. O catálogo beui.dev é a referência de interação obrigatória: encontre o padrão mais próximo, leia sua fonte real através da receita curl do arquivo e adapte o mecanismo para DESIGN.md tokens de movimento. Ele se baseia na habilidade de estilo roteada — nunca a substitui. |
| Atmosfera ou ambiente principal — um fundo animado, shader, de partículas ou de grade; uma revelação tipográfica (split, blur, shimmer, typewriter, count-up, marquee); storytelling de rolagem; superfícies de cartão com spotlight / tilt / glare / borda brilhante; "tornar o herói deslumbrante", "adicionar um fundo vivo", "animar o título" | TAMBÉM references/design/ambience-skill.md. O catálogo react-bits é a referência de ambiente obrigatória: encontre o padrão mais próximo em seu mapa de intenção, leia sua fonte real através da receita curl do arquivo, extraia o mecanismo e execute sua lista de verificação de retrofit (redução de movimento, pausa fora da tela, apenas compositor, tokens, orçamento) antes de enviar. Ele se baseia na habilidade de estilo roteada — nunca a substitui, e nunca fornece código react-bits. |
| O tom ou a superfície do briefing cai fora de ambas as âncoras — UI de agente de IA, gráficos, seções de landing page, uma construção brutalista ou apenas Tailwind — ou uma âncora não tem um padrão próximo | TAMBÉM references/design/component-catalogs.md: qual catálogo ler para esse tom, o procedimento de exploração e o portão de licença e termos para todos os outros catálogos. |
| Escrever ou modificar código frontend, OU auditar desempenho / SEO / acessibilidade / qualidade | TAMBÉM references/perfection/README.md. Lighthouse 100 em todas as categorias, medido em Playwright Chromium real (nunca o CLI lighthouse), alcançado através da arquitetura — nunca descartando animações ou escondendo conteúdo. |
| Procurar um estilo concreto, paleta, combinação de fontes, tipo de gráfico, estrutura de landing page ou diretriz de UX — ou gerar um sistema de design a partir de palavras-chave | references/ui-ux-db/README.md. Um banco de dados CSV pesquisável com um CLI: uma ferramenta de consulta, não uma postura. design permanece a fonte da verdade para o gosto e o contrato DESIGN.md. |
…
Perguntas frequentes
O que é 'UI' e 'UX'?
UI (Interface do Usuário) é como as coisas aparecem na tela. UX (Experiência do Usuário) é como é fácil e agradável usar essas coisas.
Preciso saber programar para usar isso?
Não, você só precisa descrever como quer que as coisas pareçam ou funcionem.
O que são 'referências'?
São conjuntos de regras e exemplos que a ferramenta usa para garantir que o design seja de alta qualidade e siga as melhores práticas.
Detalhes
Descrição original do autor
Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.
Popularidade
- Estrelas no GitHub
- 70 mil
- Posição no ranking
- #1738
- Licença
- NOASSERTION
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
comment-checker
Ajuda seu agente a entender e responder a feedbacks de verificadores automáticos de comentários. É útil quando o agente precisa processar informações de ferramentas que revisam automaticamente o código ou o conteúdo.
code-yeongyu/oh-my-openagent
lcx-contribute-bug-fix
Ajuda seu agente a contribuir com correções de bugs para projetos relacionados ao LazyCodex. Ele cria issues ou pull requests para garantir a qualidade do código.
code-yeongyu/oh-my-openagent
lcx-doctor
Faz seu agente verificar a saúde da instalação do LazyCodex e Codex CLI. É útil quando o sistema se comporta de forma estranha após atualizações ou mudanças.
code-yeongyu/oh-my-openagent
lcx-report-bug
Ajuda seu agente a reportar bugs de forma detalhada em projetos do LazyCodex. Ele cria issues com informações úteis para os desenvolvedores corrigirem o problema.
code-yeongyu/oh-my-openagent
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC