Explorar skills

Realiza uma revisão de design visual de um arquivo HTML ou URL usando Playwright MCP, capturando screenshots em diversos dispositivos. Ele audita tipografia, contraste, espaçamento e outros elementos de design, propondo e aplicando correções concretas com o consentimento do usuário.

Instructions on how to add new colors for CSS rules

Gera ou atualiza um DESIGN.md para o projeto atual seguindo a especificação google-labs-code/design.md. Inventaria as entradas de design existentes, mapeia-as para tokens tipados, escreve a prosa conforme a especificação e valida o resultado.

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

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.

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Design finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each

Gera ou adapta arquivos HTML para usar o contrato de tema Chameleon, com variáveis CSS semânticas e classes utilitárias estilo Tailwind. Oferece modos generate para novo HTML temático e convert para adaptar arquivos existentes via mapeamento de cores para funções.

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

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.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Crie interfaces de usuário bonitas e acessíveis com componentes shadcn/ui (baseados em Radix UI + Tailwind), estilização utility-first do Tailwind CSS e designs visuais baseados em canvas. Utilize para construir UIs, implementar sistemas de design, criar layouts responsivos e adicionar componentes acessíveis.