Design Implementation

swiftui-patterns é um guia prático de Frontend Development para plataformas Apple. Ele cobre gerenciamento de estado em SwiftUI, fluxos com NavigationStack, composição de views e orientações de desempenho para ajudar você a escolher o padrão certo para código real de app. Use a skill swiftui-patterns ao refatorar ou criar telas com responsabilidade bem definida e menos re-renderizações.

remotion-video-creation é uma skill focada em Remotion para trabalho com vídeo em React. Ela ajuda a reduzir erros de renderização com 29 regras que cobrem animações, assets, áudio, legendas, gráficos, composições e transições. Use em fluxos de Video Editing, explicadores em шаблон?

O manim-video ajuda você a planejar e produzir vídeos explicativos limpos com base em Manim para gráficos, fluxos de trabalho, diagramas de sistema, demonstrações de produto e visuais de lançamento. Use o skill manim-video quando quiser uma explicação animada precisa, com fluxo de trabalho centrado em cenas, e não uma edição em formato talking head. Ele inclui etapas práticas do guia do manim-video para instalação, planejamento de cenas e renderização.

A skill liquid-glass-design ajuda você a implementar o sistema Liquid Glass da Apple no iOS 26 para SwiftUI, UIKit e WidgetKit. Use para botões, cartões, barras de ferramentas, contêineres e widgets com aparência de vidro, com orientação sobre forma, tonalidade, interatividade e quando o efeito realmente faz sentido em uma UI.

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.

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.

Use a skill shadcn para inspecionar o contexto do projeto, executar os comandos de CLI corretos, instalar componentes e compor interfaces com padrões documentados para base vs radix, formulários, temas e registries.

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.

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.

gstack é uma skill de IA orientada por navegador para testes de QA, dogfooding, validações de release e captura de bugs. Ela abre páginas reais, clica pela interface, verifica estados, compara antes e depois, testa layouts responsivos e captura evidências com screenshots. É especialmente útil para revisão de UI Design e validação de deploy quando você precisa de resultados confiáveis no navegador com a skill gstack.

O improve-codebase-architecture ajuda você a identificar atritos arquiteturais, módulos superficiais e oportunidades de aprofundamento em uma codebase. Use-o em revisões de refatoração, melhorias de testabilidade e decisões de design navegáveis por IA, especialmente quando quiser que a skill respeite `CONTEXT.md` e orientações em `docs/adr/`.

A skill design-an-interface ajuda você a explorar formatos de interface de API e de módulos radicalmente diferentes antes de fechar a decisão. Ela foi feita para desenvolvimento frontend e outros trabalhos de design de módulos em que você quer primeiro entender os requisitos, depois comparar várias opções, avaliar trade-offs e chegar a um contrato mais limpo para quem vai chamar a interface.

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-system ajuda você a criar tokens em três camadas, especificações de componentes, variáveis CSS, mapeamentos Tailwind e slides alinhados à marca a partir de uma arquitetura de tokens clara.

design-system-patterns ajuda equipes a criar bases de UI escaláveis com estrutura de tokens, arquitetura de temas e padrões reutilizáveis de API de componentes para design systems e bibliotecas de componentes.

A skill interaction-design ajuda equipes a projetar e implementar motion intencional em UI, microinterações, transições, estados de carregamento e padrões de feedback, com referências práticas voltadas a React e orientações de uso.

A skill web-component-design ajuda equipes a projetar componentes de UI reutilizáveis para React, Vue e Svelte, com padrões sólidos de API, orientações de acessibilidade e referências sobre trade-offs de estilização para design systems.

mobile-android-design ajuda agentes a orientar interfaces Android nativas com Material Design 3, Jetpack Compose, theming, navegação e padrões de layout adaptativo para celulares, tablets e foldables.

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.

vercel-composition-patterns é uma skill de composição em React para Desenvolvimento Frontend que ajuda a substituir a proliferação de props booleanas por compound components, variantes explícitas, estado elevado e APIs seguras para React 19. Use-a para revisar a arquitetura de componentes, aprimorar APIs de UI reutilizáveis e escolher o padrão de composição certo para código frontend escalável.

design-taste-frontend é uma skill anti-slop para Frontend voltada a landing pages, portfólios, páginas editoriais e redesigns. Ela ajuda um agente a ler o briefing, inferir a direção visual certa e entregar interfaces que pareçam intencionais, em vez de genéricas ou baseadas em template. É ideal para Frontend quando gosto de design, hierarquia visual e aderência à marca realmente importam.

design-taste-frontend-v1 é a skill original de taste para trabalho de frontend com alta autonomia, preservada para compatibilidade exata com versões anteriores. Ela ajuda a gerar código de UI orientado a React/Next.js com decisões de taste mais claras, checagem de dependências e guardrails práticos. Use esta skill design-taste-frontend-v1 quando você precisar do comportamento antigo em vez da reescrita experimental da v2.