Explorar skills

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

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.

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 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.

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html

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.

Um conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas como React, Tailwind CSS e shadcn/ui. É ideal para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, e não para artefatos HTML/JSX simples de arquivo único.

Audita e corrige hierarquia visual, espaçamento, cor e profundidade em UIs da web. Aciona quando o usuário menciona problemas de design, estilo Tailwind, paletas de cores, hierarquia visual, sistemas de design, escalas de espaçamento, estilo de componentes, ou ao construir tokens de design consistentes, criar temas de modo escuro, melhorar a clareza da visualização de dados ou polir detalhes da UI.