Layout

Use o frontend-design para criar interfaces frontend distintas e prontas para produção, com um ponto de vista visual claro. Esta skill de frontend-design foi feita para landing pages, dashboards, shells de app e componentes em que hierarquia, tipografia, movimento e acabamento importam tanto quanto a implementação. Ela inclui orientações de instalação e uso para um trabalho de UI orientado por design desde o início.

Use a skill design-system para gerar ou auditar um sistema de UI, extrair tokens de código existente e revisar a consistência de estilos em repositórios reais.

ux-designer é uma skill estruturada de design de UX para pesquisa, acessibilidade, arquitetura da informação, fluxos de interação, orientação para wireframes e UX writing. Ela ajuda equipes a transformar ideias iniciais de produto em decisões de design mais claras e baseadas em critérios, usando `AGENTS.md` e arquivos de regras focados.

design-review é uma skill de QA de design com foco em UX para auditar interfaces em produção, identificar problemas de espaçamento, hierarquia, consistência visual e interação, e corrigi-los de forma iterativa com verificação. Ela oferece suporte à revisão em modo de plano antes da implementação e é útil quando você quer um guia de design-review com mudanças concretas no código-fonte, em vez de conselhos vagos.

design-consultation é uma skill de design-consultation para transformar uma ideia inicial de produto em uma direção de design completa. Ela cria uma fonte única de verdade em DESIGN.md, previews e orientações em nível de sistema para tipografia, cor, espaçamento, layout e motion. É ideal para novos produtos e superfícies de UI que precisam de um ponto de partida coeso.

A skill mobile-ios-design ajuda agentes a produzir orientações de UI com aparência nativa do iOS, com princípios do Apple HIG, padrões de SwiftUI, recomendações de navegação, acessibilidade e layouts adaptativos para iPhone e iPad.

react-native-design é uma skill focada em padrões de UI para React Native, cobrindo estilização com StyleSheet, React Navigation tipado e uso de Reanimated 3 em telas multiplataforma.

Use a skill responsive-design para planejar e implementar layouts de UI adaptáveis com container queries, tipografia fluida, CSS Grid, Flexbox e breakpoints mobile-first do repositório wshobson/agents.

typeset melhora a tipografia de interfaces ao ajustar escolha de fontes, hierarquia, tamanhos, pesos e legibilidade, para que o texto pareça mais intencional. Use a skill typeset para UI Design quando o texto parecer genérico, inconsistente ou difícil de escanear, e você quiser um sistema tipográfico mais claro, com menos tentativa e erro.

quieter é uma skill de refinamento de design de UI que reduz a agressividade visual em interfaces ruidosas ou excessivamente estimulantes, sem abrir mão de clareza, hierarquia e intenção da marca. Funciona melhor depois da skill pai `$impeccable` e ajuda equipes a diagnosticar as fontes de intensidade antes de fazer ajustes pontuais.

polish é uma skill de revisão final de UI para identificar problemas de alinhamento, espaçamento, consistência, uso de tokens e microdetalhes antes do lançamento. Funciona melhor em telas, fluxos ou componentes que já estão funcionando, mas ainda não parecem totalmente refinados. Use para aumentar a prontidão para lançamento, melhorar o alinhamento com o design system e elevar a qualidade geral sem redesenhos desnecessários.

A skill layout ajuda a melhorar espaçamento, hierarquia e composição quando uma interface parece chapada, carregada ou organizada de forma mecânica. Use-a para problemas de layout, alinhamento e ritmo visual, com um guia prático de layout para UI Design em vez de orientações genéricas de estilo. Ela funciona melhor quando você precisa de ajustes estruturais, agrupamento mais claro e uma ordem de leitura melhor.

distill ajuda a simplificar interfaces confusas ao remover ruído, hierarquia fraca e opções redundantes, para deixar a tarefa principal clara. Use quando uma tela precisa de redução com critério, prioridades mais nítidas e uma rodada de simplificação mais focada.

A skill harden ajuda a deixar designs de UI e especificações de interface prontos para produção, testando casos extremos, estados vazios, tratamento de erros, textos longos, localização, permissões e outros modos de falha do mundo real. Use-a para harden for UI Design quando você quiser menos surpresas de layout e regras de comportamento mais completas.

Use a skill delight para dar mais refinamento à UI, com microinterações e personalidade em estados de sucesso, carregamento, vazio e onboarding, sem prejudicar a usabilidade nem tirar o foco.

A skill layout ajuda a revisar e melhorar a composição da UI, espaçamento, hierarquia, alinhamento e ritmo visual. É mais indicada para telas poluídas ou com estrutura fraca e depende de /impeccable para levantar o contexto antes do uso.

brandkit é uma skill premium de geração de imagens para brand kits, voltada para trabalhos de branding, incluindo sistemas de logo, decks de identidade, boards de diretrizes visuais e apresentações de marca com direção de arte. Ela foi criada para entregar resultados coesos, com aparência de estúdio, em startups, ferramentas para desenvolvedores, segurança, games, apps de consumo e conceitos de luxo. Use brandkit quando você quiser um universo de marca refinado em vez de um moodboard genérico de IA.

O skill industrial-brutalist-ui para UI Design cria interfaces mecânicas e de alta densidade, com grids no estilo suíço, contraste tipográfico extremo, paletas utilitárias e textura analógica. Use este guia de industrial-brutalist-ui para dashboards, sistemas editoriais e páginas de portfólio que precisam de uma aparência disciplinada de painel de controle.

bolder ajuda a deixar interfaces seguras e sem graça mais marcantes, sem perder usabilidade. Entenda quando usar a skill bolder, o pré-requisito obrigatório $frontend-design e orientações práticas para criar prompts melhores, diagnosticar problemas e aumentar o impacto visual com controle.

arrange ajuda a diagnosticar e melhorar layout de UI, espaçamento e hierarquia visual. Use a skill arrange para corrigir telas poluídas, grids repetitivos e composições fracas, com configuração obrigatória via $frontend-design e contexto opcional de $teach-impeccable.

A skill typeset audita e aprimora a tipografia de interfaces, corrigindo escolhas de fontes, hierarquia, tamanhos, pesos e legibilidade. É mais indicada para interfaces de produto, dashboards e landing pages. Requer antes o contexto de /frontend-design e, se não houver contexto de design, /teach-impeccable.

A skill polish ajuda equipes a fazer uma revisão final da qualidade da UI antes do lançamento. Use para identificar problemas de espaçamento, alinhamento, estados de interação, texto e casos de borda depois que a interface já estiver funcionalmente completa e o contexto de design já tiver sido definido.

A skill normalize audita um recurso de UI e o realinha ao seu design system. Veja as opções de instalação do normalize, a preparação necessária em frontend-design e como usar na prática em páginas, rotas e componentes.

distill é uma skill de design de UI voltada a reduzir telas, componentes e fluxos ao seu objetivo essencial. Use-a para diminuir a desordem, o ruído visual e o excesso de funcionalidades, mas tenha em mente que distill depende de /frontend-design e, em alguns casos, de /teach-impeccable antes do uso.