Pular para o conteúdo
Skillpedia
Sites e telas (frontend)70 mil · #1738

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

https://github.com/code-yeongyu/oh-my-openagent/blob/dev/packages/shared-skills/skills/frontend/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/code-yeongyu/oh-my-openagent/blob/dev/packages/shared-skills/skills/frontend/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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 frontend

Ou 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.md
Conteú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.

repo: code-yeongyu/oh-my-openagent

Popularidade

Estrelas no GitHub
70 mil
Posição no ranking
#1738
Licença
NOASSERTION
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas