Explorar skills

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

SCSS Modules, cva, design tokens

Tailwind CSS v4 - utility-first CSS framework with CSS-first configuration

CSS Animation patterns - transitions, keyframes, scroll-driven animations, @property, GPU-accelerated properties, accessibility with prefers-reduced-motion

Crie agentes que geram interfaces de usuário (UIs) ricas e interativas usando o formato A2UI (Agent-to-User Interface) do Google com o Google ADK (Agent Development Kit). Ideal para agentes ADK que precisam renderizar componentes de UI dinâmicos, formulários, cartões, listas ou elementos interativos via o formato JSON declarativo A2UI, incluindo um sistema de design Tailwind CSS + shadcn/ui para catálogos modernos.

Patterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

Build accessible, customizable UIs with shadcn/ui, Radix UI, and Tailwind CSS. Use when setting up shadcn/ui, installing components, building forms with React Hook Form + Zod, customizing themes, or implementing component patterns.

Foundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.

Generate custom logos with adaptive brainstorming and full brand kit export. Scans project context (README, package.json, CSS, existing assets) to inform design. Outputs favicons (16-512 + ICO), social images (OG, Twitter), dark/light/mono SVG variants, and an HTML preview.

CSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.

Converte HTML+CSS em JSON do Elementor para importação no WordPress. Use esta skill sempre que o usuário tiver HTML/CSS e desejar transformá-lo em uma página do Elementor.