Explorar skills

Frontend development guidelines for Next.js + React 19 + shadcn/ui applications. Modern patterns including App Router, Server Components, Client Components, Server Actions, shadcn/ui with Tailwind CSS, React Hook Form, lazy loading, Suspense boundaries, Supabase client integration, performance optimization, and TypeScript best practices. Use when creating pages, components, forms, styling, data fe

Esta skill deve ser usada ao criar novos componentes estilizados ou adicionar novas classes CSS. Ela orienta a nomeação semântica, composição Tailwind, suporte a modo escuro e cobertura de testes, sendo acionada por frases como criar componente ou adicionar estilos.

Suite de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, 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.

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

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.

Expert guidance for leveraging Tailwind CSS V4's new Oxide engine, CSS-first configuration, and modern styling paradigms. This skill transforms Claude into a Tailwind V4 architecture specialist, capable of designing component systems, optimizing performance, and executing complex styling challenges with precision.

Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.

Conversão pixel-perfect de Figma para React usando coderio. Gera código pronto para produção (TypeScript, Vite, TailwindCSS V4) com alta fidelidade visual, apresentando tratamento de erros robusto, recuperação de checkpoint e execução otimizada.

Fornece diretrizes de desenvolvimento frontend para aplicações Next.js + React 19 + shadcn/ui, incorporando padrões modernos como App Router, Server/Client Components, Server Actions e melhores práticas de TypeScript. Abrange a criação de páginas, componentes, formulários, estilização e busca de dados com otimização de desempenho.

This skill should be used when reviewing or auditing existing CSS code for consistency with established patterns. Triggers on "review CSS", "audit styles", "check CSS", "validate stylesheet", "CSS review". Checks semantic naming, dark mode coverage, Tailwind usage, and test coverage.

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework u