spadeontop/Skills

Gerador de Contexto de Design & Motor de Dados OpenCode

Um skill de sistema de próxima geração para arquitetar, testar visualmente e gerar interativamente sistemas de design frontend eficientes em tokens (DESIGN_CONTEXT.md) junto com uma pré-visualização HTML ao vivo com zero dependências (design-preview.html).

Incorpora diretamente o sistema de design de telemetria monoespaçada técnica OpenCode Data (opencode.ai/data) extraído por análise MCP de devtools de navegador, apresentando tipografia IBM Plex Mono, tela de carvão obsidiana (#161616), bordas de precisão de 0,5px, tickers de status ao vivo, cartões de ranking de líderes e tabelas de dados de alta densidade.

Impõe estritamente:

1. A Regra de Cores 60-30-10 + estados de feedback funcionais.
2. Acessibilidade Matemática WCAG 2.1 AA/AAA (mínimo 4,5:1 para corpo de texto, 3,0:1 para bordas/controles, 7,0:1 para texto aprimorado).
3. Arquitetura Tailwind CSS v4 Browser CDN (@tailwindcss/browser@4) com @theme e @custom-variant dark.
4. Receitas de Utilidades Semânticas Eficientes em Tokens (classes compactas sem inchaço de CSS personalizado).
5. Sem Emojis (iconografia SVG nítida com traço de 1,5px/2px ou badges de texto limpos).

---

Quando Usar

• Ao inicializar, atualizar ou gerar um DESIGN_CONTEXT.md para qualquer aplicação web ou painel de controle.
• Ao criar painéis de telemetria, leaderboards de IA, ferramentas de desenvolvedor ou plataformas densas em dados inspiradas no OpenCode Data (opencode.ai/data).
• Ao estabelecer tokens de design, diretrizes de UI ou padrões de estilo para Tailwind CSS v4 (CDN ou Vite/CLI) ou Tailwind v3.
• Ao fornecer a agentes de IA downstream projetos de componentes concisos e inequívocos para evitar desvios arbitrários de hex.

---

Diretrizes e Restrições Principais

1. SEM DESPEJOS ÚNICOS: Nunca produza um DESIGN_CONTEXT.md final no primeiro turno. Siga o fluxo de trabalho interativo de 5 fases para receber preferências, harmonizar tokens, verificar matematicamente o contraste, gerar uma pré-visualização visual ao vivo e confirmar com o usuário.
2. RECEITAS SEMÂNTICAS EFICIENTES EM TOKENS: Os projetos devem ser escritos em classes de utilidade Tailwind semânticas compactas (ex.: px-4 py-2 rounded-input bg-primary text-primary-foreground) em vez de blocos de CSS personalizados ou valores hex isolados (bg-[#1a2b3c]).
3. SEM EMOJIS: Nunca use emojis em contextos de design gerados, arquivos de código ou comunicações com o usuário. Use especificações SVG limpas ou badges de texto concisos.
4. CONFORMIDADE WCAG 2.1 AA/AAA: Todas as combinações de cores devem passar no teste matemático de contraste:
   • Texto do corpo contra tela/superfícies: ≥ 4,5:1 (padrão AAA visa ≥ 7,0:1).
   • Ícones essenciais, bordas e controles de entrada: ≥ 3,0:1.
   • Texto do botão CTA principal: ≥ 4,5:1.
5. ARQUITETURA TAILWIND CSS V4 CDN:
   • Para HTML/JS independente sem build, use <script src="https://unpkg.com/@tailwindcss/browser@4"></script>.
   • Configure via <style type="text/tailwindcss"> usando @theme e @custom-variant dark (&:where(.dark, .dark *));.
   • O modo escuro dinâmico é controlado via classe .dark no <html> com troca de variáveis CSS entre :root e .dark.

---

Referências e Modelos Modulares

Este skill contém referências modulares detalhadas e modelos de produção:

• opencode-data-spec.md: Especificação completa do sistema de design OpenCode Data (IBM Plex Mono, tela obsidiana, bordas finas, ticker de telemetria, cartões de leaderboard, tabelas de dados, sparklines).
• archetypes.md: Predefinições selecionadas:
  1. OpenCode Data (Motor Monoespaçado Técnico de opencode.ai/data)
  2. Linear / SaaS Dark (Preto obsidiana, violeta elétrico/ciano, bordas translúcidas)
  3. Ultra-Minimalista (Monocromático austero, espaços em branco arquitetônicos, zero gradientes)
  4. Empresarial Moderno Limpo (Plus Jakarta Sans, azuis empresariais, grades de cartões nítidas)
  5. Terminal Fintech (Números tabulares, escadas de livro de ordens, acentos de lucro/perda)
  6. Minimal Editorial (Tipografia de exibição, tons de papel quente, elegância literária)
• semantic-tokens.md: Contrato de token universal 60-30-10, tokens funcionais e mapeamento de variáveis CSS.
• typography-scales.md: Pares de fontes, escalas tipográficas Tailwind e regras de dados tabulares.
• wcag-contrast-rules.md: Fórmulas matemáticas de luminância relativa e matriz de contraste verificada.
• preview.template.html: Pré-visualização HTML interativa ao vivo Tailwind v4 CDN com zero dependências, alternador de arquétipo e alternador de tema.
• DESIGN_CONTEXT.template.md: Modelo de blueprint Markdown completo para agentes downstream.
• tailwind.config.template.js: Configuração exportável para Tailwind v4 CDN, v4 CSS build e v3.
• validate-contrast.js: Script Node/navegador para calcular taxas de contraste.

---

Fluxo de Trabalho Processual (5 Fases)

Fase 1: Coleta e Descoberta

1. Verifique se o usuário especificou:
   • Arquétipo alvo (Padrão: OpenCode Data ou Linear / SaaS Dark).
   • Cor de marca/destaque desejada (ou ofereça sementes de destaque selecionadas: OpenCode Indigo #8190ff, Cobalto #3b5cf6, Violeta Elétrico #8b5cf6, Esmeralda #10b981).
   • Preferência de tema alvo (Modo duplo padrão, Escuro primeiro ou Claro primeiro).
   • Stack alvo (Padrão: Tailwind CSS v4 Browser CDN para HTML/JS sem build, ou Vite/CLI).
2. Se não especificado, use ask_question para esclarecer preferências interativamente.

Fase 2: Harmonização Semântica e Mapeamento de Dados OpenCode

1. Mapeie as cores selecionadas para a distribuição estrita 60-30-10 + estados funcionais:
   • 60% Dominante: bg-background, bg-surface, text-foreground.
   • 30% Secundário: bg-surface-elevated, bg-muted, text-muted-foreground, border-border, border-border-subtle.
   • 10% Destaque: bg-primary, text-primary-foreground, hover:bg-primary-hover, ring-ring.
   • Funcional: bg-success, bg-warning, bg-destructive, bg-info e seus respectivos foregrounds.
2. Determine a pilha tipográfica apropriada:
   • Se OpenCode Data: Aplique IBM Plex Mono globalmente.
   • Se Linear / SaaS Dark: Aplique Inter ou Geist Sans com JetBrains Mono para métricas tabulares.

Fase 3: Validação Matemática de Contraste WCAG

1. Calcule as taxas de contraste para cada par foreground/background usando a fórmula de luminância relativa em wcag-contrast-rules.md.
2. Garanta:
   • Texto do corpo no modo escuro em #161616 atinja > 15:1 (AAA).
   • Texto secundário atinja > 4,5:1 (AA).
   • Se o destaque for escuro, o texto do foreground deve ser #ffffff.
   • Se o destaque for néon brilhante, o texto do foreground deve ser #09090b ou #161616.
3. Apresente a tabela de paleta proposta ao usuário com códigos hex exatos e taxas de contraste.

Fase 4: Pré-visualização Visual Ao Vivo Independente (design-preview.html)

1. Gere design-preview.html na raiz do projeto, preenchendo preview.template.html com os tokens resolvidos.
2. Informe ao usuário que design-preview.html está pronto para ser aberto no navegador para testar:
   • Cartões de leaderboard OpenCode Data ao vivo, ticker de status de telemetria e tabelas de dados de alta densidade.
   • Alternador de tema ao vivo (Escuro / Claro) com persistência em localStorage.
   • Alternador de arquétipo dinâmico (morfando entre OpenCode Data, Linear, Ultra-Minimal, etc. em tempo real).
   • Estados de botão, entradas, barra de pesquisa com ⌘K, badges e modais interativos.
3. Solicite feedback ou aprovação do usuário.

Fase 5: DESIGN_CONTEXT.md de Produção e Exportação de Configuração

Após aprovação do usuário:

1. Escreva o DESIGN_CONTEXT.md finalizado na raiz do projeto usando DESIGN_CONTEXT.template.md.
2. Forneça um trecho de configuração exportável para a stack do usuário (Tailwind v4 CDN <head> ou tailwind.config.js).
3. Mantenha design-preview.html como o banco de testes visual vivo para iterações futuras.