Explorar skills

A modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

Esta skill cria pôsteres de pesquisa usando HTML/CSS, exportáveis para PDF ou PPTX. Ela oferece um design moderno baseado na web com layouts responsivos, ideal para formatos de pôster PowerPoint/PPTX.

Gera um boilerplate completo e pronto para produção de projetos SaaS, incluindo autenticação, esquemas de banco de dados, integração de faturamento, rotas de API e um painel funcional, utilizando Next.js 14+ App Router, TypeScript, Tailwind CSS, shadcn/ui, Drizzle ORM e Stripe. Utilize quando o usuário deseja criar um novo aplicativo SaaS, iniciar um projeto web baseado em assinatura ou estruturar uma aplicação Next.js.

Habilidade de desenvolvimento frontend para aplicações React, Next.js, TypeScript e Tailwind CSS. Utilize ao construir componentes React, otimizar o desempenho de Next.js, analisar tamanhos de bundle, estruturar projetos frontend, implementar acessibilidade ou revisar a qualidade do código frontend.

Gera uma landing page HTML premium de página única com animações CSS 3D, efeitos de rolagem GSAP e profundidade de paralaxe do mouse. Garante que a página reflita o produto real, definindo o posicionamento através de uma entrada detalhada antes de qualquer conteúdo ser escrito.

Gera landing pages de alta conversão em Next.js/React (TSX) com Tailwind CSS, incluindo seções como hero, preços e FAQs, construídas com frameworks de copywriting comprovados. Também gera meta tags SEO, dados estruturados e código otimizado para performance, visando os Core Web Vitals.

Um conjunto de animações CSS repetíveis que inclui um anel giratório, um globo, um temporizador e tags de paralaxe.

Frames explicativos de pixel art e tipografia cinética, com loop em CSS puro, graváveis como vídeo.

Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get design system', 'design language', 'design tokens', 'what colors/fonts does this site

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Habilidade de desenvolvimento frontend para aplicações React, Next.js, TypeScript e Tailwind CSS. Utilize ao construir componentes React, otimizar o desempenho de Next.js, analisar tamanhos de bundle, estruturar projetos frontend, implementar acessibilidade ou revisar a qualidade do código frontend.