Tailwind CSS

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.

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.

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.

Use a skill tailwind-design-system para criar design systems em Tailwind CSS v4 com tokens, temas, variantes, acessibilidade e orientações de migração do v3 para o v4.

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.

frontend-dev é uma skill de frontend-dev para criar páginas web polidas e prontas para produção, com UI premium, motion cinematográfico, mídia gerada por IA, copy persuasiva e arte generativa. Use em landing pages, sites de marketing, páginas de produto, dashboards e outros trabalhos de frontend em que design, conteúdo e detalhes de implementação precisam permanecer alinhados.

A skill frontend-ui-dark-ts ajuda você a criar UI React com tema escuro usando TypeScript, Tailwind CSS, Framer Motion e tokens de design reutilizáveis. Ela é indicada para dashboards, painéis administrativos, telas de analytics e outras interfaces ricas em dados que precisam de uma estética escura refinada e padrões consistentes de componentes.

expo-tailwind-setup é um guia prático para instalar e configurar o Tailwind CSS v4 no Expo com react-native-css e NativeWind v5 para iOS, Android e web.

ui-web ajuda você a projetar e estilizar componentes de UI web com verificações de WCAG 2.1 AA, alto contraste, controles visíveis e padrões Tailwind amigáveis ao modo escuro. Use este skill ui-web para front ends em estilo React quando precisar de orientação prática de UI Design que melhore a acessibilidade e reduza a dúvida na hora de decidir.

A skill redesign-existing-projects eleva sites e apps existentes a um nível premium. Ela faz uma auditoria do design atual, identifica padrões genéricos de IA e aplica uma implementação de design sofisticada sem quebrar a funcionalidade. Funciona com qualquer framework CSS ou com CSS puro.

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.

O skill shadcn-ui ajuda você a planejar, instalar e adaptar componentes do shadcn/ui em um app real. Use este guia de shadcn-ui para implementação de design, descoberta de componentes, customização e uso prático do shadcn-ui em formulários, tabelas, fluxos de autenticação e layouts.

web-artifacts-builder ajuda você a iniciar um projeto com React, Tailwind CSS e shadcn/ui, desenvolver normalmente e depois empacotar tudo em um único artefato `bundle.html`. É mais indicado para artefatos frontend complexos, com estado, rotas ou UI mais rica, e não para demos simples de um arquivo só.