Typography

theme-factory é uma skill de tematização curada para slides, documentos, relatórios e landing pages. Veja o showcase, escolha entre 10 temas prontos e aplique cores e combinações de fontes consistentes ao seu material.

canvas-design ajuda a criar peças visuais estáticas originais em duas etapas: definir uma filosofia de design em Markdown e depois renderizar em .png ou .pdf. Indicado para pôsteres, capas, visuais conceituais e gráficos de campanha próximos de UI, com pouco texto.

ui-ux-pro-max é uma skill completa para design UI/UX assistido por IA. Oferece orientações estruturadas sobre layouts, estilos, sistemas de cores, tipografia e regras de UX para web e mobile. Ideal para devs e equipes que buscam decisões práticas em React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter e HTML/CSS. Use para planejar, revisar e aprimorar interfaces com inteligência de design selecionada.

ckm:ui-styling facilita a criação de interfaces acessíveis e prontas para produção usando shadcn/ui, Tailwind CSS e design visual em canvas. Ideal para projetos React que exigem layouts estruturados, componentes acessíveis, dark mode e sistemas de design consistentes. Use ckm:ui-styling para design de UI, temas e prototipagem rápida com orientações práticas para cada stack.

ckm:design é uma skill estruturada de design para direcionar e produzir logos, mockups de CIP, banners, slides e ícones SVG. Inclui referências práticas, opções baseadas em CSV e scripts em Python para fluxos de trabalho reproduzíveis, em vez de saídas genéricas só com prompt.

ckm:brand é uma skill de workflow de branding para criar, atualizar e revisar guidelines de marca, mensagens, tom de voz, identidade visual e sincronização de design tokens com scripts e checklists práticos.

ckm:banner-design ajuda a criar banners, capas, cabeçalhos, anúncios display e hero graphics para sites com briefs estruturados, fluxo orientado por tamanho e múltiplas direções visuais. É mais indicada para design de UI, peças de marketing e conceitos de banner por plataforma usando SKILL.md e a referência de tamanhos e estilos.

visual-design-foundations ajuda equipes a criar sistemas de UI práticos com escalas tipográficas, tokens de cor, regras de espaçamento e diretrizes de iconografia. Use a skill para estabelecer uma base sólida de design, criar style guides, auditar a hierarquia visual e gerar variáveis CSS prontas para implementação a partir de restrições de design bem definidas.

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.

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.

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.

frontend-design é uma skill orientada por contexto para criar código de UI frontend com identidade e acabamento. Use-a para transformar público, caso de uso e tom de marca em decisões melhores de layout, tipografia, cor, motion, estados de interação e UX writing em páginas, componentes e fluxos.

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.

bolder é uma skill de design de UI que reforça interfaces sem graça ou excessivamente conservadoras com mais contraste, hierarquia e personalidade. Use-a após a coleta de contexto com /frontend-design, ou com /teach-impeccable quando não houver contexto de design, para obter melhorias de design mais nítidas e acionáveis sem perder usabilidade.

typeset melhora a tipografia de UI ao avaliar escolha de fontes, hierarquia, tamanhos, pesos e legibilidade. Funciona melhor após /frontend-design e, se faltar contexto, com /teach-impeccable, para transformar textos genéricos em um sistema tipográfico mais claro e intencional.

A skill normalize audita uma funcionalidade de UI e a realinha ao seu design system. Entenda o contexto de instalação do normalize, a preparação necessária com /frontend-design e como usá-lo na prática em páginas, rotas e componentes.

frontend-design é uma skill com foco em design para criar interfaces frontend refinadas, com mais contexto, hierarquia, acessibilidade e comportamento responsivo. Use este guia para instalar a skill, consultar as referências principais e aplicar orientações práticas para melhorar componentes, páginas e telas de aplicativos.

bolder é uma skill de design de UI que reforça interfaces sem graça ou excessivamente seguras com hierarquia, contraste e personalidade mais marcantes, sem comprometer a usabilidade. Funciona melhor depois de /frontend-design e, se faltar contexto, também de /teach-impeccable, aplicada a um alvo específico como uma página, seção ou componente.

figma-designer analisa arquivos ou capturas de tela do Figma via Figma MCP para extrair especificações visuais, design tokens, componentes e gerar handoff em PRD pronto para implementação por equipes de design de UI.

teach-impeccable é uma skill de configuração única que analisa seu repositório, faz apenas as perguntas de UX e marca que ainda faltam e salva orientações de design persistentes para futuras sessões de IA.

quieter é uma skill de refinamento de design de UI que reduz a intensidade visual sem perder hierarquia, identidade de marca e usabilidade. Funciona melhor após /frontend-design e, se necessário, /teach-impeccable, ajudando equipes a suavizar interfaces exageradas sem exigir um redesign completo.