React

repo-scan é um skill de auditoria de código cross-stack que classifica arquivos, detecta bibliotecas de terceiros incorporadas e ajuda a avaliar o que é núcleo, duplicado ou peso morto. É útil para repo-scan para Code Review, migrações de legado e planejamento de refatoração. Veja no skill as orientações de instalação e uso do repo-scan.

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 шаблон?

frontend-patterns é uma skill prática para desenvolvimento frontend com React e Next.js, ajudando você a escolher padrões sustentáveis para componentes, estado, formulários, roteamento, acessibilidade e performance. Use o guia frontend-patterns quando precisar de orientação clara de implementação e seleção de padrões, e não apenas de boas práticas genéricas.

O skill click-path-audit ajuda a rastrear handlers de UI por cada mudança de estado para identificar bugs de sequência, colisões de estado compartilhado e divergências de estado final após refatorações ou durante code review.

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.

A skill fullstack-developer é um pacote de prompts reutilizável para trabalho com apps web modernos em JavaScript e TypeScript, cobrindo React, Next.js, Node.js, APIs, bancos de dados, autenticação e deployment. Ela funciona melhor para planejamento e implementação em múltiplas camadas, com um único arquivo SKILL.md que define escopo e fluxo de trabalho, em vez de fornecer scripts ou templates.

A skill prototype ajuda você a criar código descartável que responde a uma pergunta concreta antes de investir em uma implementação de verdade. Use-a para testar lógica, transições de estado, formato de dados ou a direção de uma interface com um protótipo executável que siga as convenções do repositório hospedeiro. É ideal quando você precisa de um guia rápido de prototype, e não de uma funcionalidade final.

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.

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.

react-state-management é uma skill prática para escolher e usar ferramentas de estado no React, como Redux Toolkit, Zustand, Jotai, React Query, SWR e RTK Query, com base no tipo de estado, na escala da aplicação e nas necessidades de migração.

nextjs-app-router-patterns ajuda desenvolvedores a planejar arquiteturas com Next.js 14+ App Router, incluindo Server Components, streaming, caching, route handlers e Server Actions para desenvolvimento full-stack e migrações do Pages Router.

react-native-architecture ajuda a planejar apps React Native e Expo para produção, com roteamento, limites de estado, módulos nativos, fluxos offline-first e os trade-offs entre Expo e bare.

react-modernization é uma skill focada em migração para atualizar apps em React 16/17 para 18+, converter componentes de classe em hooks, atualizar as APIs de root e planejar refatorações em etapas com orientação compatível com codemods.

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.

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.

vercel-react-best-practices é uma skill da Vercel Engineering que orienta agentes de IA a otimizar a performance de React e Next.js, com regras priorizadas para waterfalls, tamanho de bundle e rendering.

overdrive é uma skill do GitHub para trabalhos ambiciosos de design de UI, com foco em contexto, planejamento orientado por proposta e qualidade excepcional de interação. Use-a para instalar e aplicar overdrive em transições cinematográficas, interfaces responsivas e experiências de produto de alto impacto.

A skill optimize diagnostica e corrige problemas de performance de UI em velocidade de carregamento, renderização, animações, imagens e tamanho do bundle. Use quando precisar de um guia estruturado do optimize para otimização de performance, com troubleshooting orientado por métricas para experiências web lentas, travadas ou pouco fluidas.

A skill source-driven-development ancora a programação específica de frameworks em documentação oficial, ajudando você a validar padrões antes de implementar. É ideal para usar source-driven-development em React, Vue, Next.js, Svelte, Angular e stacks semelhantes quando correção, procedência e decisões sensíveis à versão importam.

A skill de performance optimization ajuda você a medir primeiro, encontrar o gargalo real, corrigir e validar os resultados. Use quando houver requisitos de desempenho, quando houver suspeita de regressão ou quando for preciso melhorar Core Web Vitals, tempos de carregamento ou a latência de interação.