Explorar skills

Valida durações de animação, impõe escala tipográfica, verifica a acessibilidade de componentes e previne anti-padrões de layout em projetos Tailwind CSS. Use ao construir componentes de UI, revisar utilitários CSS, estilizar views React ou garantir a consistência do design.

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.

HTML, HTMX, and CSS best practices following CUBE CSS methodology and Every Layout primitives. Use when working with HTML templates, HTMX interactions, CSS styling, or building server-rendered UI components.

Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component