Communitygithub.com

Horace-Maxwell/ui-master

Skill de roteamento de UI. Use-o quando o usuário quiser criar/modificar interfaces web ou de aplicativo, buscar um visual 'bonito/avançado/com design', efeitos ou estilos visuais específicos, ou precisar de bibliotecas de componentes, ícones, fontes, paletas de cores, inspiração ou MCPs relacionados a UI. Ele seleciona bibliotecas de componentes, receitas de estilo, terminologia de efeitos e comandos de instalação a partir do diretório verificado desta pasta e, em seguida, implementa a solução.

O que é ui-master?

O skill **UI Master** foi projetado para que agentes de IA (como Claude Code, Cursor ou Codex) criem interfaces de usuário que não pareçam feitas por IA. Ele resolve dois problemas comuns: o uso inadequado de bibliotecas de componentes prontas e a dificuldade em nomear o efeito visual desejado. O fluxo de trabalho começa esclarecendo plataforma (React/Next.js, Vue, React Native, HTML puro), tipo de página, estilo e intensidade de animação. Com base nisso, uma tabela de decisão sugere a base ideal (shadcn/ui, Tremor, Magic UI, etc.) e os componentes adicionais. O skill também fornece instruções detalhadas sobre como instalar componentes usando namespaces do shadcn (ex: @magicui, @aceternity), incluindo dicas para evitar erros comuns. Por fim, orienta a definição de um sistema de design (cores, fontes, cantos arredondados), a verificação do resultado em um navegador e a eliminação de características 'comuns de IA', como gradientes roxos e azuis, fonte Inter padrão e cards com cantos arredondados e sombras idênticas. Suporta os principais frameworks e inclui catálogos de componentes, efeitos e inspiração na pasta `catalog/`.

Funciona com✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Horace-Maxwell/ai-master-prompt/tree/HEAD/ui
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Mestre em UI: criando interfaces que não parecem feitas por IA

Convenção de caminhos: Este arquivo está no diretório ui/ do repositório. Os diretórios catalog/ e prompts/ estão no mesmo nível e acompanham o Skill.

  • Em um repositório completo (ou instalado via setup.sh --link-skills com link simbólico): primeiro use realpath para encontrar a raiz do repositório e então utilize python3 <raiz-do-repositorio>/scripts/find.py <palavra-chave> para pesquisar em todos os módulos.
  • Instalação isolada (npx skills add Horace-Maxwell/ai-master-prompt, contendo apenas a pasta ui/): não há script de busca; use grep catalog/*.md diretamente. Para outros módulos (scaffolds, Skills, ferramentas) consulte https://github.com/Horace-Maxwell/ai-master-prompt.

A UI feita por IA fica feia, geralmente não por falta de capacidade, mas porque ① não se usa uma biblioteca de componentes pronta adequadamente e ② não se sabe como chamar o efeito desejado. Este Skill resolve esses dois problemas.

Fluxo de trabalho

1. Primeiro, esclareça quatro pontos

  • Plataforma e stack tecnológico: Web (React/Next? Vue? HTML puro?) ou React Native/Expo? Projeto existente ou novo?
  • Tipo de página: Landing page / Dashboard / Aplicação SaaS / Produto de chat com IA / Aplicativo mobile / Portfólio…
  • Estilo: O usuário especificou algum estilo ou site de referência?
  • Intensidade de animação: Discreto / Moderado / Chamativo

Quando perguntar e quando executar diretamente: Pergunte apenas se a plataforma e o tipo de página não estiverem claros (no máximo uma rodada de perguntas). Para o restante, use os valores padrão e explique na resposta o que você escolheu:

Não informadoPadrão
Stack tecnológicoEm projeto existente, siga o projeto; para novo projeto Web, use Next.js + Tailwind + shadcn/ui
EstiloOfereça 2–3 direções para o usuário escolher (consulte prompts/style-recipes.md); se o usuário disser 'você decide', escolha o estilo mais adequado ao tipo de página
Intensidade de animaçãoProduto: discreto; landing page: moderado; portfólio/página de evento: pode ser chamativo

Quando o usuário não souber descrever o efeito, use os nomes em prompts/effect-vocabulary.md para confirmar (ex.: 'Você quer dizer Text Scramble, onde as letras saltam aleatoriamente e depois se fixam no texto correto?').

2. Escolha a base conforme a tabela de decisão

Quando o usuário especificar um estilo, a linha do estilo tem prioridade: landing page com estilo à mão livre use biblioteca à mão livre; não adicione componentes chamativos de estilo escuro como Aceternity.

SituaçãoBaseO que adicionar
Projeto React/Next novo (padrão)npx create-next-app@latest e depois npx shadcn@latest initConforme necessário, adicione componentes do registry de namespaces
Com estilo definido (mão livre/retrô/brutalista/vidro/terminal)Biblioteca de estilo correspondente (consulte style-recipes)A maioria é registry shadcn; instale e substitua diretamente os componentes de mesmo nome
Landing page / Hero / Página de marketing (sem estilo definido)shadcn + Magic UI / Aceternity / React BitsRolagem suave com Lenis; animação de rolagem com GSAP ScrollTrigger ou Motion
Dashboard / Painel administrativoshadcn + Tremor ou shadcn chartsKibo UI para componentes avançados
Chat com IA / Produto de agenteshadcn + AI Elements ou assistant-uiaffectUI para painéis de observabilidade do agente; dados do Langfuse / Phoenix; backend Python usa o protocolo AG-UI para conectar ao frontend
React Native / Exponpx create-expo-app@latest + React Native Reusables ou ExpoKitVidro líquido com expo-glass-effect, vidro fosco com expo-blur; beUI para animações
Vue / NuxtNuxt UI ou shadcn-vueInspira UI para efeitos; goopUI (efeitos líquidos, pré-alpha)
HTML puro / sem frameworkdaisyUI ou Tailwind + CSS nativoAnimate.css, Hover.css, GSAP

Lista completa de candidatos:

3. Instalação de componentes: uso de namespaces no shadcn

Namespaces incluídos no índice oficial (548 itens) não exigem nenhuma configuração:

npx shadcn@latest add @magicui/marquee
npx shadcn@latest add @aceternity/spotlight
npx shadcn@latest search @aceternity --query "card"     # Se não souber o nome do item: pesquise primeiro
npx shadcn@latest list @magicui                    # Ou liste todos os itens do namespace
npx shadcn@latest view @magicui/border-beam        # Veja o código antes de instalar

Três armadilhas comuns:

  1. Não adivinhe o nome do item. O <item> no diretório é um placeholder; cada biblioteca tem nomes diferentes. Use search ou list primeiro.
  2. Os itens do React Bits têm sufixos de variante: <nome-do-componente>-<TS|JS>-<TW|CSS>, por exemplo npx shadcn@latest add @react-bits/DecryptedText-TS-TW. Sem o sufixo, retorna 404.
  3. Bibliotecas não incluídas no índice oficial (Looseleaf, Rare UI, etc.) têm duas formas de instalação:

    • Forneça diretamente a URL completa ou o caminho do GitHub, sem configuração: npx shadcn@latest add https://kevintngo.github.io/looseleaf/r/button.json, npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

    • Ou registre uma vez em components.json e depois use @looseleaf/button:

      { "registries": { "@looseleaf": "https://kevintngo.github.io/looseleaf/r/{name}.json" } }

Namespaces comuns de consulta rápida (todos no índice oficial): @magicui @aceternity @react-bits @animate-ui @motion-primitives @cult-ui @kokonutui @coss @shadcnblocks @tailark @kibo-ui @8bitcn @neobrutalism @retroui @glasscn @glassyui @ai-elements @assistant-ui @prompt-kit @affectui @beui @shaderscn @threecn @lucide-animated @svgl

4. Instale ferramentas para o Agente (após obter consentimento do usuário)

Combinação mínima (usando Claude Code como exemplo; para outros Agentes, coloque o mesmo comando npx … após -- na configuração MCP deles – a tabela de correspondência está em AGENTS.md na raiz do repositório):

npx shadcn@latest mcp init --client claude                    # Navegar/instalar componentes de centenas de registries (também suporta --client cursor / vscode)
claude mcp add context7 -- npx -y @upstash/context7-mcp        # Documentação mais recente de qualquer biblioteca
npx skills add anthropics/skills --skill frontend-design       # Linha de base estética, removendo o 'cheiro de IA'

Adicione conforme necessário: Magic UI MCP, 21st MCP, Figma MCP (quando houver design), Motion AI Kit (npx motion-ai), skills GSAP, MCPs para capturas de referência como Mobbin / Refero / Lazyweb (todos requerem conta). Lista completa em catalog/12.

5. Defina o sistema de design primeiro, depois escreva as páginas

  1. Defina os tokens de estilo: paleta de cores (gere com Realtime Colors / tweakcn), fontes (não use Inter como padrão: escolha um par com personalidade no Fontshare ou Google Fonts), cantos arredondados, sombras, espaçamento. Se o usuário forneceu uma marca de referência, procure o DESIGN.md correspondente em awesome-design-md e coloque na raiz do projeto.
  2. Estrutura da página: Consulte a ordem dos blocos em páginas similares nos sites de inspiração (catalog/10).
  3. Reutilize componentes primeiro: Não escreva manualmente o que puder ser instalado com npx shadcn@latest add.
  4. Animações com propósito: Animação de entrada uma vez, feedback ao hover, narrativa de rolagem. Respeite prefers-reduced-motion.

6. Auto-verificação (não pule)

  • Abra a página em um navegador (Playwright / Chrome DevTools MCP / navegador embutido) e compare com a lista abaixo de características 'comuns de IA'
  • Verifique a largura mobile (375px)
  • Console sem erros; animações sem travamentos (mexa apenas transform/opacity)

Características comuns de IA (evitar): Gradiente roxo-azulado + Inter + título centralizado grande; todos os cards com o mesmo canto arredondado e a mesma sombra; emoji como ícone; glassmorphism em toda a tela; texto cinza sem hierarquia; cada bloco com 'fade in e move up'.

Quando precisar de vocabulário de efeitos/estilos

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community