UI/UX Pro Max - Design Intelligence
Guia de design abrangente para aplicações web e mobile. Contém 50+ estilos, 97 paletas de cores, 57 combinações de fontes, 99 diretrizes UX e 25 tipos de gráficos em 9 stacks de tecnologia. Banco de dados pesquisável com recomendações baseadas em prioridades.
Quando Aplicar
Consulte estas diretrizes quando:
- Projetando novos componentes ou páginas de UI
- Escolhendo paletas de cores e tipografia
- Revisando código para problemas de UX
- Construindo landing pages ou dashboards
- Implementando requisitos de acessibilidade
Categorias de Regras por Prioridade
| Prioridade |
Categoria |
Impacto |
Domínio |
| 1 |
Acessibilidade |
CRÍTICA |
ux |
| 2 |
Toque e Interação |
CRÍTICA |
ux |
| 3 |
Performance |
ALTA |
ux |
| 4 |
Layout e Responsivo |
ALTA |
ux |
| 5 |
Tipografia e Cor |
MÉDIA |
typography, color |
| 6 |
Animação |
MÉDIA |
ux |
| 7 |
Seleção de Estilo |
MÉDIA |
style, product |
| 8 |
Gráficos e Dados |
BAIXA |
chart |
Referência Rápida
1. Acessibilidade (CRÍTICA)
color-contrast - Razão mínima de 4.5:1 para texto normalfocus-states - Anéis de foco visíveis em elementos interativosalt-text - Texto alternativo descritivo para imagens relevantesaria-labels - aria-label para botões apenas com íconekeyboard-nav - Ordem de tabulação corresponde à ordem visualform-labels - Use label com atributo for
2. Toque e Interação (CRÍTICA)
touch-target-size - Alvo de toque mínimo de 44x44pxhover-vs-tap - Use clique/tap para interações primáriasloading-buttons - Desabilite botão durante operações assíncronaserror-feedback - Mensagens de erro claras próximo ao problemacursor-pointer - Adicione cursor-pointer a elementos clicáveis
3. Performance (ALTA)
image-optimization - Use WebP, srcset, lazy loadingreduced-motion - Verifique prefers-reduced-motioncontent-jumping - Reserve espaço para conteúdo assíncrono
4. Layout e Responsivo (ALTA)
viewport-meta - width=device-width initial-scale=1readable-font-size - Mínimo 16px para texto do corpo em mobilehorizontal-scroll - Garanta que o conteúdo se ajuste à largura da viewportz-index-management - Defina escala de z-index (10, 20, 30, 50)
5. Tipografia e Cor (MÉDIA)
line-height - Use 1.5-1.75 para texto do corpoline-length - Limite a 65-75 caracteres por linhafont-pairing - Combine fontes de heading e corpo por personalidade
6. Animação (MÉDIA)
duration-timing - Use 150-300ms para micro-interaçõestransform-performance - Use transform/opacity, não width/heightloading-states - Skeleton screens ou spinners
7. Seleção de Estilo (MÉDIA)
style-match - Compatibilize estilo com tipo de produtoconsistency - Use o mesmo estilo em todas as páginasno-emoji-icons - Use ícones SVG, não emojis
8. Gráficos e Dados (BAIXA)
chart-type - Compatibilize tipo de gráfico com tipo de dadoscolor-guidance - Use paletas de cores acessíveisdata-table - Forneça alternativa de tabela para acessibilidade
Como Usar
Pesquise domínios específicos usando a ferramenta CLI abaixo.
Pré-requisitos
Verifique se Python está instalado:
python3 --version || python --version
Se Python não está instalado, instale-o conforme o SO do usuário:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
Como Usar Esta Skill
Quando o usuário solicita trabalho de UI/UX (design, build, create, implement, review, fix, improve), siga este fluxo de trabalho:
Passo 1: Analise os Requisitos do Usuário
Extraia informações-chave da solicitação do usuário:
- Tipo de produto: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
- Palavras-chave de estilo: minimal, playful, professional, elegant, dark mode, etc.
- Indústria: healthcare, fintech, gaming, education, etc.
- Stack: React, Vue, Next.js, ou padrão
html-tailwind
Passo 2: Gere o Design System (OBRIGATÓRIO)
Sempre comece com --design-system para obter recomendações abrangentes com raciocínio:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<tipo_produto> <indústria> <palavras-chave>" --design-system [-p "Nome do Projeto"]
Este comando:
- Pesquisa 5 domínios em paralelo (product, style, color, landing, typography)
- Aplica regras de raciocínio de
ui-reasoning.csv para selecionar as melhores correspondências
- Retorna design system completo: pattern, style, colors, typography, effects
- Inclui anti-patterns a evitar
Exemplo:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
Passo 3: Complemente com Pesquisas Detalhadas (conforme necessário)
Após obter o design system, use pesquisas por domínio para obter detalhes adicionais:
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --domain <domínio> [-n <máx_resultados>]
Quando usar pesquisas detalhadas:
| Necessidade |
Domínio |
Exemplo |
| Mais opções de estilo |
style |
--domain style "glassmorphism dark" |
| Recomendações de gráfico |
chart |
--domain chart "real-time dashboard" |
| Melhores práticas de UX |
ux |
--domain ux "animation accessibility" |
| Fontes alternativas |
typography |
--domain typography "elegant luxury" |
| Estrutura de landing |
landing |
--domain landing "hero social-proof" |
Passo 4: Diretrizes de Stack (Padrão: html-tailwind)
Obtenha melhores práticas específicas da implementação. Se o usuário não especificar um stack, padrão para html-tailwind.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --stack html-tailwind
Stacks disponíveis: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
Referência de Pesquisa
Domínios Disponíveis
| Domínio |
Use Para |
Exemplos de Palavras-chave |
product |
Recomendações de tipo de produto |
SaaS, e-commerce, portfolio, healthcare, beauty, service |
style |
Estilos de UI, cores, efeitos |
glassmorphism, minimalism, dark mode, brutalism |
typography |
Combinações de fontes, Google Fonts |
elegant, playful, professional, modern |
color |
Paletas de cores por tipo de produto |
saas, ecommerce, healthcare, beauty, fintech, service |
landing |
Estrutura de página, estratégias de CTA |
hero, hero-centric, testimonial, pricing, social-proof |
chart |
Tipos de gráfico, recomendações de biblioteca |
trend, comparison, timeline, funnel, pie |
ux |
Melhores práticas, anti-patterns |
animation, accessibility, z-index, loading |
react |
Performance de React/Next.js |
waterfall, bundle, suspense, memo, rerender, cache |
web |
Diretrizes de interface web |
aria, focus, keyboard, semantic, virtualize |
prompt |
Prompts de IA, palavras-chave CSS |
(nome do estilo) |
Stacks Disponíveis
| Stack |
Foco |
html-tailwind |
Utilitários Tailwind, responsivo, a11y (PADRÃO) |
react |
State, hooks, performance, patterns |
nextjs |
SSR, routing, images, API routes |
vue |
Composition API, Pinia, Vue Router |
svelte |
Runes, stores, SvelteKit |
swiftui |
Views, State, Navigation, Animation |
react-native |
Components, Navigation, Lists |
flutter |
Widgets, State, Layout, Theming |
shadcn |
Componentes shadcn/ui, theming, forms, patterns |
Fluxo de Trabalho de Exemplo
Solicitação do usuário: "Criar landing page para serviço profissional de cuidados com a pele"
Passo 1: Analise os Requisitos
- Tipo de produto: Beauty/Spa service
- Palavras-chave de estilo: elegant, professional, soft
- Indústria: Beauty/Wellness
- Stack: html-tailwind (padrão)
Passo 2: Gere o Design System (OBRIGATÓRIO)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
Saída: Design system completo com pattern, style, colors, typography, effects e anti-patterns.
Passo 3: Complemente com Pesquisas Detalhadas (conforme necessário)
# Obtenha diretrizes de UX para animação e acessibilidade
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# Obtenha opções de tipografia alternativas, se necessário
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
Passo 4: Diretrizes de Stack
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
Depois: Sintetize o design system + pesquisas detalhadas e implemente o design.
Formatos de Saída
A flag --design-system suporta dois formatos de saída:
# Caixa ASCII (padrão) - melhor para exibição em terminal
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - melhor para documentação
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
Dicas para Melhores Resultados
- Seja específico com palavras-chave - "healthcare SaaS dashboard" > "app"
- Pesquise múltiplas vezes - Palavras-chave diferentes revelam insights diferentes
- Combine domínios - Style + Typography + Color = Design system completo
- Sempre verifique UX - Pesquise "animation", "z-index", "accessibility" para problemas comuns
- Use a flag de stack - Obtenha melhores práticas específicas da implementação
- Itere - Se a primeira pesquisa não corresponder, tente palavras-chave diferentes
Regras Comuns para UI Profissional
Estes são problemas frequentemente ignorados que fazem a UI parecer não profissional:
Ícones e Elementos Visuais
| Regra |
Faça |
Não Faça |
| Sem ícones emoji |
Use ícones SVG (Heroicons, Lucide, Simple Icons) |
Use emojis como 🎨 🚀 ⚙️ como ícones de UI |
| Estados de hover estáveis |
Use transições de cor/opacidade no hover |
Use scale transforms que deslocam o layout |
| Logos de marca corretos |
Pesquise SVG oficial em Simple Icons |
Adivinhe ou use caminhos de logo incorretos |
| Tamanho de ícone consistente |
Use viewBox fixo (24x24) com w-6 h-6 |
Misture tamanhos de ícone aleatoriamente |
Interação e Cursor
| Regra |
Faça |
Não Faça |
| Cursor pointer |
Adicione cursor-pointer a todos os cards clicáveis/hover |
Deixe cursor padrão em elementos interativos |
| Feedback de hover |
Forneça feedback visual (cor, shadow, border) |
Sem indicação de que elemento é interativo |
| Transições suaves |
Use transition-colors duration-200 |
Mudanças de estado instantâneas ou muito lentas (>500ms) |
Contraste Light/Dark Mode
| Regra |
Faça |
Não Faça |
| Glass card light mode |
Use bg-white/80 ou opacidade maior |
Use bg-white/10 (muito transparente) |
| Contraste de texto light |
Use #0F172A (slate-900) para texto |
Use #94A3B8 (slate-400) para texto do corpo |
| Texto atenuado light |
Use #475569 (slate-600) mínimo |
Use gray-400 ou mais claro |
| Visibilidade de border |
Use border-gray-200 em light mode |
Use border-white/10 (invisível) |
Layout e Espaçamento
| Regra |
Faça |
Não Faça |
| Navbar flutuante |
Adicione top-4 left-4 right-4 de espaçamento |
Cole navbar a top-0 left-0 right-0 |
| Padding de conteúdo |
Considere a altura da navbar fixa |
Deixe conteúdo escondido atrás de elementos fixos |
| Max-width consistente |
Use o mesmo max-w-6xl ou max-w-7xl |
Misture larguras diferentes de container |
Checklist Pré-entrega
Antes de entregar código de UI, verifique estes itens:
Qualidade Visual
Interação
Light/Dark Mode
Layout
Acessibilidade
1---2name: ui-ux-pro-max3description: Inteligência de design UI/UX. 50 estilos, 21 paletas, 50 combinações de fontes, 20 gráficos, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Ações: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projetos: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elementos: button, modal, navbar, sidebar, card, table, form, chart. Estilos: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Tópicos: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrações: shadcn/ui MCP para busca de componentes e exemplos.4---56# UI/UX Pro Max - Design Intelligence78Guia de design abrangente para aplicações web e mobile. Contém 50+ estilos, 97 paletas de cores, 57 combinações de fontes, 99 diretrizes UX e 25 tipos de gráficos em 9 stacks de tecnologia. Banco de dados pesquisável com recomendações baseadas em prioridades.910## Quando Aplicar1112Consulte estas diretrizes quando:13- Projetando novos componentes ou páginas de UI14- Escolhendo paletas de cores e tipografia15- Revisando código para problemas de UX16- Construindo landing pages ou dashboards17- Implementando requisitos de acessibilidade1819## Categorias de Regras por Prioridade2021| Prioridade | Categoria | Impacto | Domínio |22|----------|----------|--------|--------|23| 1 | Acessibilidade | CRÍTICA | `ux` |24| 2 | Toque e Interação | CRÍTICA | `ux` |25| 3 | Performance | ALTA | `ux` |26| 4 | Layout e Responsivo | ALTA | `ux` |27| 5 | Tipografia e Cor | MÉDIA | `typography`, `color` |28| 6 | Animação | MÉDIA | `ux` |29| 7 | Seleção de Estilo | MÉDIA | `style`, `product` |30| 8 | Gráficos e Dados | BAIXA | `chart` |3132## Referência Rápida3334### 1. Acessibilidade (CRÍTICA)3536- `color-contrast` - Razão mínima de 4.5:1 para texto normal37- `focus-states` - Anéis de foco visíveis em elementos interativos38- `alt-text` - Texto alternativo descritivo para imagens relevantes39- `aria-labels` - aria-label para botões apenas com ícone40- `keyboard-nav` - Ordem de tabulação corresponde à ordem visual41- `form-labels` - Use label com atributo for4243### 2. Toque e Interação (CRÍTICA)4445- `touch-target-size` - Alvo de toque mínimo de 44x44px46- `hover-vs-tap` - Use clique/tap para interações primárias47- `loading-buttons` - Desabilite botão durante operações assíncronas48- `error-feedback` - Mensagens de erro claras próximo ao problema49- `cursor-pointer` - Adicione cursor-pointer a elementos clicáveis5051### 3. Performance (ALTA)5253- `image-optimization` - Use WebP, srcset, lazy loading54- `reduced-motion` - Verifique prefers-reduced-motion55- `content-jumping` - Reserve espaço para conteúdo assíncrono5657### 4. Layout e Responsivo (ALTA)5859- `viewport-meta` - width=device-width initial-scale=160- `readable-font-size` - Mínimo 16px para texto do corpo em mobile61- `horizontal-scroll` - Garanta que o conteúdo se ajuste à largura da viewport62- `z-index-management` - Defina escala de z-index (10, 20, 30, 50)6364### 5. Tipografia e Cor (MÉDIA)6566- `line-height` - Use 1.5-1.75 para texto do corpo67- `line-length` - Limite a 65-75 caracteres por linha68- `font-pairing` - Combine fontes de heading e corpo por personalidade6970### 6. Animação (MÉDIA)7172- `duration-timing` - Use 150-300ms para micro-interações73- `transform-performance` - Use transform/opacity, não width/height74- `loading-states` - Skeleton screens ou spinners7576### 7. Seleção de Estilo (MÉDIA)7778- `style-match` - Compatibilize estilo com tipo de produto79- `consistency` - Use o mesmo estilo em todas as páginas80- `no-emoji-icons` - Use ícones SVG, não emojis8182### 8. Gráficos e Dados (BAIXA)8384- `chart-type` - Compatibilize tipo de gráfico com tipo de dados85- `color-guidance` - Use paletas de cores acessíveis86- `data-table` - Forneça alternativa de tabela para acessibilidade8788## Como Usar8990Pesquise domínios específicos usando a ferramenta CLI abaixo.9192---9394## Pré-requisitos9596Verifique se Python está instalado:9798```bash99python3 --version || python --version100```101102Se Python não está instalado, instale-o conforme o SO do usuário:103104**macOS:**105```bash106brew install python3107```108109**Ubuntu/Debian:**110```bash111sudo apt update && sudo apt install python3112```113114**Windows:**115```powershell116winget install Python.Python.3.12117```118119---120121## Como Usar Esta Skill122123Quando o usuário solicita trabalho de UI/UX (design, build, create, implement, review, fix, improve), siga este fluxo de trabalho:124125### Passo 1: Analise os Requisitos do Usuário126127Extraia informações-chave da solicitação do usuário:128- **Tipo de produto**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.129- **Palavras-chave de estilo**: minimal, playful, professional, elegant, dark mode, etc.130- **Indústria**: healthcare, fintech, gaming, education, etc.131- **Stack**: React, Vue, Next.js, ou padrão `html-tailwind`132133### Passo 2: Gere o Design System (OBRIGATÓRIO)134135**Sempre comece com `--design-system`** para obter recomendações abrangentes com raciocínio:136137```bash138python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<tipo_produto> <indústria> <palavras-chave>" --design-system [-p "Nome do Projeto"]139```140141Este comando:1421. Pesquisa 5 domínios em paralelo (product, style, color, landing, typography)1432. Aplica regras de raciocínio de `ui-reasoning.csv` para selecionar as melhores correspondências1443. Retorna design system completo: pattern, style, colors, typography, effects1454. Inclui anti-patterns a evitar146147**Exemplo:**148```bash149python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"150```151152### Passo 3: Complemente com Pesquisas Detalhadas (conforme necessário)153154Após obter o design system, use pesquisas por domínio para obter detalhes adicionais:155156```bash157python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --domain <domínio> [-n <máx_resultados>]158```159160**Quando usar pesquisas detalhadas:**161162| Necessidade | Domínio | Exemplo |163|------|--------|---------|164| Mais opções de estilo | `style` | `--domain style "glassmorphism dark"` |165| Recomendações de gráfico | `chart` | `--domain chart "real-time dashboard"` |166| Melhores práticas de UX | `ux` | `--domain ux "animation accessibility"` |167| Fontes alternativas | `typography` | `--domain typography "elegant luxury"` |168| Estrutura de landing | `landing` | `--domain landing "hero social-proof"` |169170### Passo 4: Diretrizes de Stack (Padrão: html-tailwind)171172Obtenha melhores práticas específicas da implementação. Se o usuário não especificar um stack, **padrão para `html-tailwind`**.173174```bash175python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --stack html-tailwind176```177178Stacks disponíveis: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`179180---181182## Referência de Pesquisa183184### Domínios Disponíveis185186| Domínio | Use Para | Exemplos de Palavras-chave |187|--------|---------|------------------|188| `product` | Recomendações de tipo de produto | SaaS, e-commerce, portfolio, healthcare, beauty, service |189| `style` | Estilos de UI, cores, efeitos | glassmorphism, minimalism, dark mode, brutalism |190| `typography` | Combinações de fontes, Google Fonts | elegant, playful, professional, modern |191| `color` | Paletas de cores por tipo de produto | saas, ecommerce, healthcare, beauty, fintech, service |192| `landing` | Estrutura de página, estratégias de CTA | hero, hero-centric, testimonial, pricing, social-proof |193| `chart` | Tipos de gráfico, recomendações de biblioteca | trend, comparison, timeline, funnel, pie |194| `ux` | Melhores práticas, anti-patterns | animation, accessibility, z-index, loading |195| `react` | Performance de React/Next.js | waterfall, bundle, suspense, memo, rerender, cache |196| `web` | Diretrizes de interface web | aria, focus, keyboard, semantic, virtualize |197| `prompt` | Prompts de IA, palavras-chave CSS | (nome do estilo) |198199### Stacks Disponíveis200201| Stack | Foco |202|-------|-------|203| `html-tailwind` | Utilitários Tailwind, responsivo, a11y (PADRÃO) |204| `react` | State, hooks, performance, patterns |205| `nextjs` | SSR, routing, images, API routes |206| `vue` | Composition API, Pinia, Vue Router |207| `svelte` | Runes, stores, SvelteKit |208| `swiftui` | Views, State, Navigation, Animation |209| `react-native` | Components, Navigation, Lists |210| `flutter` | Widgets, State, Layout, Theming |211| `shadcn` | Componentes shadcn/ui, theming, forms, patterns |212213---214215## Fluxo de Trabalho de Exemplo216217**Solicitação do usuário:** "Criar landing page para serviço profissional de cuidados com a pele"218219### Passo 1: Analise os Requisitos220- Tipo de produto: Beauty/Spa service221- Palavras-chave de estilo: elegant, professional, soft222- Indústria: Beauty/Wellness223- Stack: html-tailwind (padrão)224225### Passo 2: Gere o Design System (OBRIGATÓRIO)226227```bash228python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"229```230231**Saída:** Design system completo com pattern, style, colors, typography, effects e anti-patterns.232233### Passo 3: Complemente com Pesquisas Detalhadas (conforme necessário)234235```bash236# Obtenha diretrizes de UX para animação e acessibilidade237python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux238239# Obtenha opções de tipografia alternativas, se necessário240python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography241```242243### Passo 4: Diretrizes de Stack244245```bash246python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind247```248249**Depois:** Sintetize o design system + pesquisas detalhadas e implemente o design.250251---252253## Formatos de Saída254255A flag `--design-system` suporta dois formatos de saída:256257```bash258# Caixa ASCII (padrão) - melhor para exibição em terminal259python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system260261# Markdown - melhor para documentação262python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown263```264265---266267## Dicas para Melhores Resultados2682691. **Seja específico com palavras-chave** - "healthcare SaaS dashboard" > "app"2702. **Pesquise múltiplas vezes** - Palavras-chave diferentes revelam insights diferentes2713. **Combine domínios** - Style + Typography + Color = Design system completo2724. **Sempre verifique UX** - Pesquise "animation", "z-index", "accessibility" para problemas comuns2735. **Use a flag de stack** - Obtenha melhores práticas específicas da implementação2746. **Itere** - Se a primeira pesquisa não corresponder, tente palavras-chave diferentes275276---277278## Regras Comuns para UI Profissional279280Estes são problemas frequentemente ignorados que fazem a UI parecer não profissional:281282### Ícones e Elementos Visuais283284| Regra | Faça | Não Faça |285|------|----|----- |286| **Sem ícones emoji** | Use ícones SVG (Heroicons, Lucide, Simple Icons) | Use emojis como 🎨 🚀 ⚙️ como ícones de UI |287| **Estados de hover estáveis** | Use transições de cor/opacidade no hover | Use scale transforms que deslocam o layout |288| **Logos de marca corretos** | Pesquise SVG oficial em Simple Icons | Adivinhe ou use caminhos de logo incorretos |289| **Tamanho de ícone consistente** | Use viewBox fixo (24x24) com w-6 h-6 | Misture tamanhos de ícone aleatoriamente |290291### Interação e Cursor292293| Regra | Faça | Não Faça |294|------|----|----- |295| **Cursor pointer** | Adicione `cursor-pointer` a todos os cards clicáveis/hover | Deixe cursor padrão em elementos interativos |296| **Feedback de hover** | Forneça feedback visual (cor, shadow, border) | Sem indicação de que elemento é interativo |297| **Transições suaves** | Use `transition-colors duration-200` | Mudanças de estado instantâneas ou muito lentas (>500ms) |298299### Contraste Light/Dark Mode300301| Regra | Faça | Não Faça |302|------|----|----- |303| **Glass card light mode** | Use `bg-white/80` ou opacidade maior | Use `bg-white/10` (muito transparente) |304| **Contraste de texto light** | Use `#0F172A` (slate-900) para texto | Use `#94A3B8` (slate-400) para texto do corpo |305| **Texto atenuado light** | Use `#475569` (slate-600) mínimo | Use gray-400 ou mais claro |306| **Visibilidade de border** | Use `border-gray-200` em light mode | Use `border-white/10` (invisível) |307308### Layout e Espaçamento309310| Regra | Faça | Não Faça |311|------|----|----- |312| **Navbar flutuante** | Adicione `top-4 left-4 right-4` de espaçamento | Cole navbar a `top-0 left-0 right-0` |313| **Padding de conteúdo** | Considere a altura da navbar fixa | Deixe conteúdo escondido atrás de elementos fixos |314| **Max-width consistente** | Use o mesmo `max-w-6xl` ou `max-w-7xl` | Misture larguras diferentes de container |315316---317318## Checklist Pré-entrega319320Antes de entregar código de UI, verifique estes itens:321322### Qualidade Visual323- [ ] Sem emojis usados como ícones (use SVG em vez disso)324- [ ] Todos os ícones de conjunto de ícones consistente (Heroicons/Lucide)325- [ ] Logos de marca corretos (verificados em Simple Icons)326- [ ] Estados de hover não causam deslocamento de layout327- [ ] Use cores de tema diretamente (bg-primary) não wrapper var()328329### Interação330- [ ] Todos os elementos clicáveis têm `cursor-pointer`331- [ ] Estados de hover fornecem feedback visual claro332- [ ] Transições são suaves (150-300ms)333- [ ] Estados de foco visíveis para navegação por teclado334335### Light/Dark Mode336- [ ] Texto em light mode tem contraste suficiente (4.5:1 mínimo)337- [ ] Elementos glass/transparentes visíveis em light mode338- [ ] Borders visíveis em ambos os modos339- [ ] Teste ambos os modos antes da entrega340341### Layout342- [ ] Elementos flutuantes têm espaçamento apropriado das bordas343- [ ] Nenhum conteúdo escondido atrás de navbars fixas344- [ ] Responsivo em 375px, 768px, 1024px, 1440px345- [ ] Sem scroll horizontal em mobile346347### Acessibilidade348- [ ] Todas as imagens têm alt text349- [ ] Inputs de formulário têm labels350- [ ] Cor não é o único indicador351- [ ] `prefers-reduced-motion` respeitado
artubss