Design Systems

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.

compose-multiplatform-patterns é um guia prático de Compose Multiplatform e Jetpack Compose em apps KMP. Ele cobre gerenciamento de estado, navegação, temas, desempenho e padrões de UI reutilizáveis para Android, iOS, Desktop e Web, ajudando equipes de frontend a construir telas compartilhadas e sustentáveis.

frontend-design transforma ideias vagas de UI em interfaces marcantes e prontas para produção, com código frontend real, direção estética clara e menos visual genérico de IA.

brand-guidelines dá aos agentes cores e tipografia da marca Anthropic para reestilizar documentos, slides, HTML e outros materiais focados em texto. Use para aplicar formatação consistente, hierarquia tipográfica e paleta da marca após redigir o conteúdo.

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.

vercel-react-native-skills é uma skill de React Native e Expo para desenvolvimento frontend com foco em performance. Use-a para melhorar renderização de listas, animações, navegação, padrões de UI, gerenciamento de estado e configuração de módulos nativos. Ela inclui regras práticas, orientações de instalação e padrões de uso para lidar com gargalos em apps mobile com menos tentativa e erro.

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.

impeccable ajuda você a criar interfaces frontend distintas e prontas para produção, em vez de layouts genéricos com cara de IA. Ele oferece suporte aos fluxos craft, teach e extract para páginas, componentes web, superfícies de apps, pôsteres e outros frontends com forte apelo visual, tornando a skill útil para UI Design, configuração de contexto de design e extração de padrões reutilizáveis.

O figma-code-connect-components ajuda a mapear componentes de design do Figma para componentes de código correspondentes com o Figma Code Connect. Use-o para alinhar implementação de design, fazer correspondência de variants e props e encontrar o componente local certo antes de criar mapeamentos. É ideal para fluxos de trabalho de connect, map ou link-to-code, não para escrever no canvas nem para gerar páginas completas.

Use o figma para extrair contexto de design, capturas de tela, variáveis e assets do servidor MCP do Figma e, em seguida, converter nós do Figma em decisões de UI prontas para implementação. Este skill de figma é ideal quando você tem uma URL do Figma ou um node ID e precisa de uso preciso do figma para trabalho de design para código, configuração ou troubleshooting.

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.

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

A skill react:components converte designs do Stitch em componentes modulares de Vite e React para Frontend Development. Ela usa retrieval, verificações de arquivos locais e validação baseada em AST para manter a saída alinhada com tokens de design, arquivos existentes e restrições do projeto. Use este guia do react:components quando você precisar de código de componentes estruturado, e não de um dump pontual de JSX.

A skill enhance-prompt transforma ideias vagas de UI em prompts mais claros e prontos para o Stitch, com estrutura mais forte, vocabulário de UI/UX e contexto de design system. Use este guia de enhance-prompt para aumentar a precisão dos prompts, reduzir suposições e obter resultados mais consistentes na escrita de prompts e na geração de interfaces.

vue-best-practices é uma skill para Vue 3 voltada à geração, revisão e refatoração de código. Ela orienta agentes a seguir Composition API, <script setup lang="ts">, fluxo de dados explícito, decisões compatíveis com SSR e referências essenciais sobre reatividade, SFCs, composables, Router, Pinia e apps baseados em Vite.

fireworks-tech-graph é uma skill de diagramação para transformar descrições de sistemas em diagramas SVG e PNG prontos para produção. Inclui orientação de instalação, scripts auxiliares, validação, templates e referências de estilo para diagramas técnicos, fluxogramas de arquitetura, sequências e fluxos visuais relacionados.

infocard ajuda você a criar cards informativos em estilo editorial no Markdown, incorporando HTML e CSS diretamente na página. É útil para resumos, panoramas de tópicos, painéis de destaque, cards de eventos, blocos de comparação e outros conteúdos pensados para UI Design que precisam parecer intencionalmente bem projetados. Não é indicado para diagramas nem visualização de dados; para isso, use uma skill dedicada a diagramas ou gráficos.

Architecture é uma skill de diagramas para criar visões de sistemas em camadas em HTML e CSS, com seções codificadas por cor, layouts em grade e hierarquia clara de componentes. É ideal para diagramas de usuário/aplicação/dados/infraestrutura, mapas de microsserviços e arquitetura corporativa. Use-a em vez de prompts genéricos quando quiser uma saída de architecture rápida, editável e pronta para Diagramming.

A makepad-2.0-design-judgment é a primeira skill do Makepad 2.0 a carregar para julgamento de design, arquitetura, limites entre componentes, fluxo de dados e estratégia de renderização. Use a skill makepad-2.0-design-judgment para encaminhar solicitações à skill de conformidade correta do Makepad e tomar melhores decisões de design antes da implementação.

Crie diagramas de arquitetura polidos, com tema escuro, como arquivos HTML independentes com SVG embutido. A skill architecture-diagram foi feita para diagramas de arquitetura de sistemas, infraestrutura, cloud, segurança e topologia de rede, oferecendo uma visualização pronta para o navegador com cores semânticas, relações claras entre componentes e um estilo técnico consistente.

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.

A stitch-design-taste é uma skill de sistema de design do Google Stitch para implementação de design. Ela gera orientações em DESIGN.md, pensadas para agentes, com UI premium e nada genérica, incluindo tipografia clara, cores calibradas, layouts assimétricos, regras de motion e padrões proibidos. Use quando quiser um guia repetível de stitch-design-taste, em vez de um prompt pontual.

makepad-2.0-widgets ajuda você a encontrar os widgets, propriedades e padrões de composição certos do Makepad 2.0 para implementação de design de UI. Use quando precisar de uso de makepad-2.0-widgets, consulta ao catálogo de widgets ou um guia prático para criar layouts, listas, diálogos e padrões avançados em sintaxe Splash.

baseline-ui ajuda a revisar ou gerar UI baseada em Tailwind a partir de uma linha de base opinativa para espaçamento, tipografia, acessibilidade e motion. Use o skill baseline-ui quando precisar de saídas de componentes mais seguras, decisões de UI mais claras e menos desvio dos primitives já existentes. É mais indicado para fluxos de trabalho com React/Tailwind e verificações práticas do guia baseline-ui.