Explorar skills

Provides Tailwind CSS v4 patterns for CSS-first configuration, container queries, design tokens, and utility-first component architecture. Use when working with Tailwind CSS files or when the user mentions Tailwind, Tailwind v4, or utility-first CSS.

Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.

Deliberate practice as a rigorous training method distinct from ordinary repetition. Covers Ericsson's four conditions (specific goals, full attention, immediate feedback, repetition at the edge of current ability), the role of mental representations, coach-directed vs. self-directed practice, the plateau escape pattern, and practical drill design for procedural skills. Use when designing practice

Audita designs e código (Figma, HTML/CSS/React/Vue/Tailwind) contra 19 regras, detectando automaticamente frameworks e sistemas de design. Abrange 19 categorias como acessibilidade, responsividade e elementos visuais, sinalizando riscos de daltonismo e auditando o modo escuro.

Use when the user wants to scan for design anti-patterns, take a browser screenshot, or do a design engineering code review. Covers: missing focus rings, clipped dropdowns, bad z-index, placeholder-as-label, missing reduced-motion (detect); real Chromium screenshots, mobile/desktop viewports, visual bug fixing (preview); motion crimes, accessibility violations, forbidden CSS patterns, token misuse

Zen é uma biblioteca de componentes React orientada a props, construída para velocidade. Crie interfaces polidas sem escrever HTML, CSS ou pensar em classes Tailwind.

Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.

Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files. Uses a dark-mode design system with embedded CSS and inline SVG. Use when the user needs architecture diagrams, system illustrations, flow charts, or technical visualizations.

Craft CMS 5 front-end Twig development — atomic design, template architecture, components, Vite buildchain. Covers atoms/molecules/organisms, props/extends/block patterns, layout chains, view routing, content builders, image presets, Tailwind named-key collections, multi-brand CSS tokens, JavaScript boundaries (Alpine/DataStar/Vue, tabs, accordions), Vite asset loading, and front-end auth (login,

Inspecione, construa ou estenda sistemas de design do Figma, com a opção de sincronizá-los com o código. Esta skill oferece dois modos: inspeção para auditorias somente leitura, incluindo verificações WCAG e detecção de instâncias desvinculadas, e construção para criar componentes com vinculação de variáveis, descrições estruturadas e exportação opcional de tokens.css.

Use this skill when optimizing Divi 5 site performance, improving Core Web Vitals (LCP, INP, CLS), reducing render-blocking CSS, working with Divi's Critical CSS / Dynamic CSS / Inline Stylesheet system, configuring font loading (WOFF2, preload, font-display), lazy-loading background images, preloading above-the-fold images, debugging slow Divi pages, or auditing cache-plugin interactions (WP Rock

Use this skill when writing CSS for Divi 5 / Divi 5.6, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler), the five 5.6 modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), working with Free-Form CSS and the `selector` keyword, overriding `.et_pb_*` classes, setting up design tokens or dark mode, using the 5.4 Sizing V