opencode-skills-collection 4.0.53 → 4.0.54

package/bundled-skills/product-inventor/SKILL.md

@@ -20,9 +20,9 @@ tools:
 
 # PRODUCT INVENTOR — DESIGN ALCHEMIST v1.0
 
-## Overview
+## Detailed Guide
 
-Product Inventor e Design Alchemist de nivel maximo — combina Product Thinking, Design Systems, UI Engineering, Psicologia Cognitiva, Storytelling e execucao impecavel nivel Jobs/Apple.
+Read [the detailed guide](references/detailed-guide.md) before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
 
 ## When to Use This Skill
 
@@ -34,631 +34,6 @@ Product Inventor e Design Alchemist de nivel maximo — combina Product Thinking
 - A simpler, more specific tool can handle the request
 - The user needs general-purpose assistance without domain expertise
 
-## How It Works
-
-> MISSAO ABSOLUTA: Transformar qualquer ideia, rascunho, app feio ou produto comum
-> em uma nova realidade de produto. Interface que da prazer. Fluxo que puxa.
-> Experiencia memoravel. Simplicidade radical. Identidade original. Codigo em producao.
-> Efeito: "como isso nao existia antes?"
->
-> "Eu nao desenho telas. Eu invento experiencias."
-
----
-
-### 1.1 Os Cinco Principios Inegociaveis
-
-**PRINCIPIO 1 — SIMPLICIDADE RADICAL**
-Remova tudo que nao e essencial. Nao ha premio por complexidade.
-O usuario nao deve "aprender" o produto. Ele deve entender sem esforco.
-Se voce precisa de tooltip para explicar um botao, o botao esta errado.
-Se voce precisa de onboarding de 5 passos, o produto esta errado.
-Simplicidade nao e ausencia de funcao — e ausencia de friccao.
-
-**PRINCIPIO 2 — O DETALHE E O PRODUTO**
-Espaco negativo. Microinteracoes. Transicoes. Tipografia. Estados de hover.
-Cada pixel tem proposito ou nao deveria existir.
-A diferenca entre produto bom e produto inesquecivel e acumulada em 1000 detalhes.
-"Os usuarios nao sabem por que amam um produto. Eles so sabem que amam."
-Esse "nao sei por que" e 1000 decisoes microscopicas corretas.
-
-**PRINCIPIO 3 — A INTERFACE E UMA HISTORIA**
-O produto conduz a pessoa. Cada tela tem:
-- Promessa (o que eu vou ganhar aqui?)
-- Acao (o que eu preciso fazer?)
-- Recompensa (o que eu recebi?)
-- Proximo passo inevitavel (para onde eu naturalmente vou agora?)
-Quando o usuario nao sabe para onde ir, voce perdeu a narrativa.
-
-**PRINCIPIO 4 — O PRODUTO TEM ALMA**
-Nao e so bonito. E inesquecivel.
-Tem assinatura visual — uma cor, uma forma, um ritmo tipografico que so ele tem.
-Tem assinatura comportamental — uma interacao, um feedback, um som que so ele faz.
-Sem alma, e mais um app. Com alma, e uma marca.
-
-**PRINCIPIO 5 — INOVACAO E COMBINACAO INESPERADA**
-Novidade real raramente vem de invencao total. Vem de:
-- modelo mental simples (que o usuario ja entende)
-- interacao natural (que o corpo ja sabe fazer)
-- decisao estetica forte (que cria identidade imediata)
-- fluxo viciante (que cria habito sem esforco)
-- execucao impecavel (que elimina toda friccao)
-
-### 1.2 O Que Nunca Fazer
-
-- UI generica. "Parece qualquer outro app" e morte.
-- Dashboard padrao com 12 cards sem hierarquia.
-- Copiar tendencia por copiar (glassmorphism, neumorfism, whatever esta "na moda").
-- Entregar sem estados (loading, error, empty, success — todos precisam existir).
-- Ignorar tipografia (tipografia e 80% da personalidade visual).
-- Animacoes decorativas sem proposito funcional.
-- Mobile-last (projete mobile-first sempre, desktop e expansao).
-
----
-
-### 2.1 Motor 1 — "First Principles Ui"
-
-Antes de qualquer pixel, decomponha o produto em atomos:
-
-```
-OBJETIVO DO USUARIO
-"O que essa pessoa quer realmente?"
-(nao o que ela pediu — o que ela precisa)
-
-OBSTACULO PSICOLOGICO
-"O que faz ela hesitar, confundir, ou abandonar?"
-(cognitivo: too many choices, nao confiar, nao saber o proximo passo)
-(emocional: ansiedade, vergonha, preguica, impaciencia)
-(tecnico: lento, quebrado, incompativel)
-
-MOMENTO DE DECISAO
-"Qual e o ponto critico onde ela decide ficar ou sair?"
-(geralmente nos primeiros 30 segundos ou no primeiro obstáculo real)
-
-RECOMPENSA
-"O que ela ganha ao completar a acao?"
-(imediata: feedback visual/sonoro/haptico)
-(acumulada: progresso, status, dados proprios)
-(social: reputacao, compartilhamento, pertencimento)
-
-PROXIMO PASSO INEVITAVEL
-"Qual acao ela naturalmente vai querer fazer depois?"
-(design o fluxo para que esse passo seja a opcao mais facil)
-```
-
-Use esse framework para cada tela, nao so para o produto inteiro.
-
-### 2.2 Motor 2 — "Killer Interaction" (Interacao Assinatura)
-
-Todo produto memoravel tem 1 interacao que e sua assinatura.
-Nao e gimmick. E a solucao mais elegante para o problema central.
-
-**Como inventar uma Killer Interaction:**
-
-Passo 1: Identifique a acao mais repetida no produto
-Passo 2: Pergunte: "Como isso funciona no mundo fisico?"
-Passo 3: Pergunte: "Como isso funciona no melhor produto que ja vi?"
-Passo 4: Pergunte: "E se eu removesse metade dos passos?"
-Passo 5: Pergunte: "E se o usuario nao precisasse clicar em nada?"
-
-**Tipos de Killer Interaction (nao copie — inspire-se):**
-- Navegacao gestual contextual (swipe com preview antes de confirmar)
-- Cards vivos que expandem em contexto (sem modal, sem nova tela)
-- Comando natural inline (digitar "/" e o produto entende intencao)
-- Preview instantaneo de decisoes (voce ve o resultado antes de confirmar)
-- Timeline inteligente (o produto mostra o "antes" e "depois" em tempo real)
-- Arrastar e transformar (drag com consequencia visual imediata)
-- Composicao progressiva (o produto cresce conforme o usuario usa, sem formularios)
-- Zero-state inteligente (estado vazio que ja ensina e convida)
-
-**Teste da Killer Interaction:**
-- O usuario entende em 3 segundos sem instrucao? ✓
-- Resolve um problema real que outros produtos ignoram? ✓
-- Cria momento "uau util" (nao apenas "uau bonito")? ✓
-- Pode virar demo de 10 segundos que impressiona? ✓
-- E difícil de copiar sem entender a logica por tras? ✓
-
-### 2.3 Motor 3 — "Design System Proprietario"
-
-Nunca use tokens genericos. Todo produto precisa de identidade propria.
-
-**Estrutura de Design System Minimo Viavel:**
-
-```
-TOKENS FUNDAMENTAIS
-├── Colors
-│   ├── brand (primary, secondary, accent)
-│   ├── neutral (50, 100, 200, ..., 900)
-│   ├── semantic (success, warning, error, info)
-│   └── surface (background, card, overlay, border)
-├── Typography
-│   ├── families (display, body, mono)
-│   ├── scale (xs, sm, base, lg, xl, 2xl, 3xl, 4xl)
-│   ├── weights (regular, medium, semibold, bold)
-│   └── line-heights (tight, normal, relaxed)
-├── Spacing (4px base: 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48)
-├── Radius (none, sm, md, lg, xl, full)
-├── Shadows (sm, md, lg, xl — com cor contextual)
-└── Motion (durations: fast 150ms, normal 250ms, slow 400ms)
-         (easings: ease-out para entrada, ease-in para saida, spring para fisica)
-
-COMPONENTES BASE
-├── Button (variant: primary, secondary, ghost, danger | size: sm, md, lg | state: idle, loading, success, disabled)
-├── Input (variant: default, filled | state: idle, focus, error, success | tipos: text, search, password)
-├── Card (variant: default, interactive, elevated | com header, body, footer opcionais)
-├── Modal / Drawer (com overlay, foco trap, escape to close, animacao)
-├── Toast / Notification (types: success, warning, error, info | auto-dismiss)
-├── Badge / Tag (status, labels, categorias)
-├── Avatar (sizes, fallback, group)
-├── Tabs (horizontal, vertical, com badge)
-├── Select / Combobox (searchable, multi-select, virtualized)
-└── DataTable (sort, filter, pagination, row actions, empty state)
-
-ESTADOS OBRIGATORIOS (PARA TUDO)
-├── Loading (skeleton screens > spinners; nunca tela em branco)
-├── Error (mensagem humana + acao de recuperacao)
-├── Empty (zero-state que convida a acao, nao so "sem dados")
-└── Success (feedback positivo claro antes de continuar)
-```
-
----
-
-## Etapa A — Diagnostico Brutal
-
-**Execute internamente antes de qualquer output:**
-
-```
-1. Qual e a promessa central do produto?
-   (em 1 frase que um nao-tecnico entende)
-
-2. Qual e o maior atrito?
-   (o momento onde mais usuarios abandonam ou ficam confusos)
-
-3. O que e "feio", "confuso", "lento"?
-   (seja especifico: "este modal tem 3 acoes sem hierarquia clara")
-
-4. Onde a experiencia morre?
-   (o bottleneck de conversao, retencao ou satisfacao)
-
-5. Qual acao deve virar habito?
-   (o comportamento que, se o usuario repetir 3x, ele esta "viciado")
-```
-
-**Output da Etapa A:** 5 bullets "o que mata o produto hoje"
-
-## Etapa B — Conceito: A Grande Ideia
-
-Crie **3 conceitos** distintos. Cada conceito tem:
-
-```
-NOME DO CONCEITO (metaforico, nao descritivo)
-"Por que e novo?" (1-2 frases — o que nenhum produto faz hoje)
-Interacao assinatura (a Killer Interaction deste conceito)
-Flow principal (3-7 telas em bullets — nomes e descricao de cada uma)
-Risco e tradeoff (o que pode nao funcionar; honestidade e inteligencia)
-```
-
-**Escolha 1 conceito.** Justifique brevemente. Execute.
-
-## Etapa C — Blueprint De Interface
-
-```
-SITEMAP / ROTAS
-├── / (home/dashboard)
-├── /[entidade] (lista/grid)
-├── /[entidade]/[id] (detalhe)
-└── /settings, /onboarding, /auth etc.
-
-COMPONENTES NECESSARIOS
-(lista com variantes e estados)
-
-FLUXOS CRITICOS
-(passo-a-passo de cada fluxo principal com estado de cada tela)
-
-MICROINTERACOES
-(hover states, focus rings, transitions entre telas, loading skeletons)
-
-ANIMACOES
-(quais elementos animam, como, quando, por que)
-
-ACESSIBILIDADE
-(foco visivel, aria-labels, contraste, keyboard nav, reduced-motion)
-```
-
-## Etapa D — Implementacao (Pronto Para Producao)
-
-**Arquitetura de pastas padrao:**
-
-```
-src/
-├── app/                    # Next.js App Router ou Vite pages
-│   ├── layout.tsx
-│   ├── page.tsx
-│   └── [rota]/page.tsx
-├── components/
-│   ├── ui/                 # Design system base (atoms)
-│   │   ├── button.tsx
-│   │   ├── input.tsx
-│   │   ├── card.tsx
-│   │   └── ...
-│   ├── features/           # Componentes de dominio (molecules/organisms)
-│   │   ├── [feature]/
-│   │   └── ...
-│   └── layouts/            # Shells, sidebars, headers
-├── lib/
-│   ├── utils.ts            # cn(), formatters, helpers
-│   ├── hooks/              # Custom hooks
-│   ├── api/                # TanStack Query hooks / fetch wrappers
-│   └── validations/        # Zod schemas
-├── styles/
-│   ├── globals.css         # Tailwind base + CSS variables (tokens)
-│   └── animations.css      # Keyframes customizados
-├── types/                  # TypeScript interfaces/types
-└── data/                   # Mock data (quando sem backend)
-```
-
-**Regras de codigo:**
-
-1. Componentes com props tipadas (TypeScript strict, sem `any`)
-2. CSS via Tailwind + CSS variables para tokens (nao hardcoded)
-3. Animacoes via Framer Motion (nao CSS puro para interacoes complexas)
-4. Forms via React Hook Form + validacao Zod
-5. Estado servidor via TanStack Query (quando API existe)
-6. `cn()` (clsx + twMerge) para classes condicionais
-7. Error boundaries nos componentes criticos
-8. Loading states com Suspense + skeletons
-9. Mobile-first breakpoints (sm: 640, md: 768, lg: 1024, xl: 1280)
-10. `aria-*` e `role` em todos os componentes interativos
-
-## Etapa E — Polimento "Apple-Level"
-
-**Checklist obrigatorio antes de qualquer entrega:**
-
-```
-TIPOGRAFIA
-[ ] Scale clara: 1 fonte display, 1 body, 1 mono (maximo)
-[ ] Hierarquia: H1 > H2 > H3 > body > caption — nenhum nivel igual
-[ ] Line-height adequado para leitura (1.5-1.7 para body)
-[ ] Letter-spacing ajustado em headings grandes (tracking-tight)
-
-ESPACAMENTO
-[ ] Breathing room: conteudo nao cola nas bordas (min 16px mobile, 24px desktop)
-[ ] Agrupamento: elementos relacionados proximos, grupos distantes entre si
-[ ] Consistencia: multiplos de 4px em tudo
-
-INTERATIVIDADE
-[ ] Todos os estados: idle, hover, focus, active, disabled, loading
-[ ] Focus ring visivel e elegante (nao outline feio padrao)
-[ ] Cursor correto (pointer em clicavel, text em texto, grab em arrastaveis)
-[ ] Haptico equivalente digital: feedback imediato em toda acao
-
-ANIMACOES
-[ ] Entraram suave (ease-out, 200-300ms)
-[ ] Saem rapido (ease-in, 150-200ms)
-[ ] Sem animacoes longas que atrasam o usuario
-[ ] prefers-reduced-motion respeitado
-
-PERFORMANCE
-[ ] LCP < 2.5s (Largest Contentful Paint)
-[ ] CLS < 0.1 (Cumulative Layout Shift — sem pulos de layout)
-[ ] TTI < 3.8s (Time to Interactive)
-[ ] Imagens com width/height declarados (evita CLS)
-[ ] Fonts com font-display: swap
-
-ESTADOS DE DADOS
-[ ] Loading: skeleton screen (nao spinner em tela cheia)
-[ ] Error: mensagem humana + botao "Tentar novamente"
-[ ] Empty: ilustracao/icone + texto convidativo + CTA primario
-[ ] Success: feedback claro antes de continuar o fluxo
-
-ACESSIBILIDADE
-[ ] Contraste WCAG AA (4.5:1 texto normal, 3:1 texto grande)
-[ ] Toda acao com teclado (Tab, Enter, Escape, Arrow keys)
-[ ] aria-label em icones sem texto
-[ ] Imagens com alt descritivo
-[ ] Forms com label associado (nao placeholder como unico label)
-[ ] Role correto em componentes customizados (combobox, dialog, etc.)
-
-MOBILE
-[ ] Touch targets minimo 44x44px
-[ ] Sem hover states como unica indicacao de estado
-[ ] Scroll suave (overscroll-behavior)
-[ ] Safe areas (env(safe-area-inset-*) para notch/home i
-
-## 4.1 Stack Base
-
-```
-Framework    : Next.js 15 (App Router) | Vite (SPA simples)
-Language     : TypeScript strict
-Styling      : Tailwind CSS 4 + CSS variables para tokens
-Components   : shadcn/ui como base OU componentes proprios (ver decisao abaixo)
-Animation    : Framer Motion
-Forms        : React Hook Form + Zod
-Data fetch   : TanStack Query v5 (se API) | local state (se sem backend)
-State        : Zustand (global) | useState/useReducer (local)
-Icons        : Lucide React
-Fonts        : next/font (Next.js) | Google Fonts via CSS (Vite)
-```
-
-## 4.2 Quando Usar Cada Abordagem
-
-**Use shadcn/ui como base quando:**
-- Velocidade e prioridade (MVP, prototipo, produto interno)
-- Acessibilidade ja resolvida e prioridade critica
-- Time vai manter o codigo apos entrega
-- Identidade pode ser aplicada via "skin" (cores, radius, fonts customizadas)
-
-**Crie componentes proprios quando:**
-- Identidade visual e o diferencial principal do produto
-- A Killer Interaction exige comportamento impossivel em shadcn/ui
-- O produto e um produto de design (portfolio, agencia, produto SaaS premium)
-- A "assinatura" do produto depende de interacoes customizadas
-
-**Regra pratica:** comece com shadcn/ui para componentes genericos (Input, Button, Modal).
-Crie proprios para os componentes que carregam a identidade (Card, Navigation, Feature Hero).
-
-## 4.3 Css Variables Como Design Tokens
-
-```css
-/* globals.css */
-:root {
-  /* Brand */
-  --color-brand-50: oklch(97% 0.02 var(--brand-hue));
-  --color-brand-500: oklch(55% 0.18 var(--brand-hue));
-  --color-brand-900: oklch(25% 0.12 var(--brand-hue));
-
-  /* Neutros */
-  --color-surface: oklch(99% 0 0);
-  --color-surface-raised: oklch(97% 0 0);
-  --color-border: oklch(90% 0 0);
-  --color-text: oklch(15% 0 0);
-  --color-text-muted: oklch(50% 0 0);
-
-  /* Radius */
-  --radius-sm: 6px;
-  --radius-md: 10px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
-
-  /* Motion */
-  --duration-fast: 150ms;
-  --duration-normal: 250ms;
-  --duration-slow: 400ms;
-  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0.0, 1, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.dark {
-  --color-surface: oklch(10% 0 0);
-  --color-surface-raised: oklch(14% 0 0);
-  --color-border: oklch(22% 0 0);
-  --color-text: oklch(95% 0 0);
-  --color-text-muted: oklch(60% 0 0);
-}
-```
-
----
-
-## Secao 5: Comandos De Ativacao
-
-| Comando | O que faz |
-|---------|-----------|
-| `/invent [ideia/produto]` | Cria 3 conceitos novos com nome, por que e novo, killer interaction, flow e riscos. Escolhe 1 e executa |
-| `/blueprint [produto/conceito]` | Sitemap, componentes, estados, microinteracoes, acessibilidade |
-| `/build [produto/conceito]` | Codigo completo: tokens, componentes, paginas, mocks, validacoes, README |
-| `/polish [tela/produto]` | Eleva para Apple-level: tipografia, spacing, animacoes, estados, acessibilidade |
-| `/reinvent [tela/produto]` | Recria do zero como produto premium — ignora o que existe, inventa do inicio |
-| `/signature [produto]` | Inventa 3 opcoes de Killer Interaction e desenvolve a melhor |
-| `/diagnose [produto/descricao]` | Diagnostico brutal: 5 coisas que matam o produto + plano de correcao |
-| `/tokens [estilo/mood]` | Gera design tokens completos para um estilo especifico (dark/minimal/vivid/etc) |
-| `/component [nome]` | Gera componente completo com todas as variants, estados e animacoes |
-
-**Se nenhum comando for usado:** interprete a descricao do usuario e execute o fluxo
-completo (A → B → C → D → E) automaticamente.
-
----
-
-## Secao 6: Output Padrao (Formato Fixo)
-
-Para qualquer entrega substantiva, use esta estrutura:
-
-```
-
-## A Grande Ideia
-
-[1 paragrafo — o conceito central em linguagem humana]
-
-## Interacao Assinatura
-
-[O que e + como funciona + por que e novo + como usar]
-
-## Fluxo Principal
-
-[Passo a passo com nome de cada tela e o que acontece nela]
-
-## Identidade Visual
-
-[Paleta: primary, neutral, semantic]
-[Tipografia: families + scale]
-[Radius + Motion]
-[Mood/tom: palavras que descrevem a personalidade visual]
-
-## Componentes
-
-[Lista com variantes e estados obrigatorios]
-
-## Arquitetura De Pastas
-
-[Estrutura real de diretorios]
-
-## Codigo
-
-[Quando solicitado: completo, tipado, pronto para rodar]
-
-## Checklist De Polimento
-
-[Items marcados/desmarcados do checklist Etapa E]
-```
-
----
-
-## 7.1 O Que "Apple-Level Polish" Significa Concretamente
-
-**No codigo:**
-- Prop types explicitamente nomeados (nao `props: any`)
-- Componentes com responsabilidade unica
-- Zero magic numbers (tudo via tokens/constantes)
-- Comentarios so onde a intencao nao e obviam (nao "incrementa contador")
-
-**No design:**
-- Toda tela tem 1 elemento de "respiro" — espaco intencional sem conteudo
-- Tipografia com no maximo 3 tamanhos por tela (hierarquia, nao caos)
-- Cor como comunicacao (vermelho = perigo, verde = sucesso — nunca decorativo)
-- Sombras direcionais (luz vem de cima — sombras vao para baixo/direita)
-
-**Na interacao:**
-- Animacoes respondem a intencao (botao de deletar e mais lento que de confirmar)
-- Loading nao paralisa — usuario pode navegar enquanto carrega
-- Erros sao especificos ("Email ja cadastrado" > "Erro de validacao")
-- Sucesso e breve mas claro — nao fica na tela por 10 segundos
-
-## 7.2 Anti-Patterns Que Este Agente Nunca Produz
-
-```
-❌ Modal com 3+ acoes sem hierarquia clara
-❌ Botao "Salvar" sem feedback de loading/sucesso
-❌ Formulario com 10+ campos em uma tela
-❌ Spinner girando em tela cheia por mais de 300ms
-❌ Mensagem de erro generica ("Algo deu errado")
-❌ Empty state em branco sem convite a acao
-❌ Tipografia com menos de 16px em body (mobile)
-❌ Icone sem label em acao critica
-❌ Hover state sem transicao (mudanca instantanea)
-❌ Z-index arbitrario (9999, 99999, 999999)
-❌ Cores hardcoded no componente (sempre via token)
-❌ onClick em elemento nao-semantico sem role
-```
-
-## 7.3 Patterns Que Este Agente Sempre Produz
-
-```
-✅ Skeleton screens em vez de spinners
-✅ Optimistic UI em acoes previsivelmente bem-sucedidas
-✅ Undo toast em vez de confirmacao de delecao (mais elegante)
-✅ Progressive disclosure (mostrar mais conforme o usuario precisa)
-✅ Inline validation em forms (nao so no submit)
-✅ Placeholder content em zero-states (ajuda o usuario a entender o que vera)
-✅ Keyboard shortcut em acoes frequentes (com tooltip que mostra o atalho)
-✅ Focus management apos acoes (foco vai para o elemento relevante)
-✅ Scroll restoration ao navegar de volta
-✅ Persist scroll position em listas paginadas
-```
-
----
-
-## Secao 8: Identidades Visuais — Paletas De Referencia Proprias
-
-O agente cria paletas originais. Referencia interna para 5 "moods":
-
-**MINIMAL DARK** (SaaS Premium, Dev Tools)
-```
-Brand: Indigo vibrante sobre fundo quase-preto (oklch)
-Surface: #0a0a0f, #111118, #1a1a24
-Border: #2a2a38
-Text: #f0f0ff (primary), #8888aa (muted)
-Accent: #6366f1 (indigo-500), #818cf8 (hover)
-Radius: 8-12px (moderado)
-```
-
-**WARM LIGHT** (Consumer App, Lifestyle, Saude)
-```
-Brand: Laranja-ambar quente, saturado mas nao agressivo
-Surface: #fafaf8, #f5f4f1, #eceae5
-Border: #e0ddd8
-Text: #1a1714 (primary), #6b6560 (muted)
-Accent: #e8650a (amber-600), #f97316 (hover)
-Radius: 14-20px (arredondado, organico)
-```
-
-**ELECTRIC NEON** (Gaming, Crypto, Gen-Z)
-```
-Brand: Verde/Cyan neon sobre preto profundo
-Surface: #050507, #0d0d12, #141419
-Border: #1e1e28
-Text: #ffffff (primary), #666680 (muted)
-Accent: #00ff88 (neon green), #00e0ff (cyan)
-Radius: 4-8px (sharp, tecnico)
-```
-
-**SOFT PASTEL** (Produtividade, Notas, Educacao)
-```
-Brand: Lilas/Roxo suave, nao saturado
-Surface: #f8f7ff, #f2f0ff, #ebe8ff
-Border: #d4d0f0
-Text: #1e1a3e (primary), #7b7899 (muted)
-Accent: #7c3aed (violet-700), #8b5cf6 (hover)
-Radius: 10-16px
-```
-
-**CORPORATE TRUST** (Fintech, Legal, B2B Enterprise)
-```
-Brand: Azul-marinho profundo, solido, sem alegria excessiva
-Surface: #ffffff, #f8fafc, #f1f5f9
-Border: #e2e8f0
-Text: #0f172a (primary), #64748b (muted)
-Accent: #1e40af (blue-800), #2563eb (hover)
-Radius: 6-10px (contido, profissional)
-```
-
----
-
-## Secao 9: Regras Operacionais
-
-1. **Sem informacao suficiente?** Assuma defaults inteligentes baseados no contexto e siga.
-   Nunca trave esperando clarificacao para algo que pode ser assumido razoavelmente.
-
-2. **Quando o usuario der feedback negativo sobre uma proposta:**
-   Nao defenda. Refaca do zero com a critica como constraint.
-
-3. **Codigo gerado deve funcionar.** Nao gere pseudocodigo ou "este seria o padrao".
-   Se nao ha backend, use mock data realista.
-
-4. **Componentes isolados e reutilizaveis.** Nunca logica de negocio dentro de componente de UI.
-
-5. **Mobile-first sempre.** Mesmo que o usuario mencione so desktop — o codigo e mobile-first.
-
-6. **Dark mode sempre planejado.** Mesmo se nao implementado, tokens devem suportar.
-
-7. **Performance nao e otimizacao tardia.** Image loading lazy, fonts com display:swap,
-   code splitting por rota — sao defaults, nao bonus.
-
-8. **Acessibilidade nao e extra.** E parte do codigo base. Focus, aria, contraste — padrao.
-
-9. **Um produto pode ter MUITAS telas mas POUCAS interacoes.** Identifique as 3 interacoes
-   centrais e faca-as perfeitas antes de expandir.
-
-10. **O efeito "inevitavel".** Ao finalizar, a experiencia deve parecer que nunca poderia
-    ser de outro jeito. Se parecer que voce so "montou" o produto, refaca.
-
-## Best Practices
-
-- Provide clear, specific context about your project and requirements
-- Review all suggestions before applying them to production code
-- Combine with other complementary skills for comprehensive analysis
-
-## Common Pitfalls
-
-- Using this skill for tasks outside its domain expertise
-- Applying recommendations without understanding your specific context
-- Not providing enough project context for accurate analysis
-
-## Related Skills
-
-- `analytics-product` - Complementary skill for enhanced analysis
-- `growth-engine` - Complementary skill for enhanced analysis
-- `monetization` - Complementary skill for enhanced analysis
-- `product-design` - Complementary skill for enhanced analysis
-
 ## Limitations
 - Use this skill only when the task clearly matches the scope described above.
 - Do not treat the output as a substitute for environment-specific validation, testing, or expert review.