Explorar skills

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.

Modern CSS/SCSS architecture based on shadcn/ui design principles. Use this when generating any CSS, SCSS, or styling code to ensure modern, refined, and accessible design patterns.

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.

Esta skill abrange um fluxo de trabalho completo para pesquisa empírica em economia, desde a clarificação de questões de pesquisa e seleção de estratégias de identificação até a geração de código Stata/R/Python, verificações de robustez, redação de artigos e respostas a R&R. É ideal para pesquisa de inferência causal (DiD, RDD, IV, SCM, PSM, DML), escrita de artigos empíricos para periódicos SSCI/CSSCI ou para responder a comentários de revisores.

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.

Esta skill refatora CSS existente de estilos inline ou classes utilitárias para padrões semânticos. Ela é acionada por termos como "refatorar CSS" e transforma para classes semânticas com modo escuro e testes.

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

Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.