feat: refactor 30+ skills to Anthropic progressive disclosure pattern

- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 15:05:03 +00:00
parent 9404af7ac9
commit 6b3a6f2698
397 changed files with 67154 additions and 17257 deletions
--- a/design-media/skills/brand-guidelines/references/color-palettes.md
+++ b/design-media/skills/brand-guidelines/references/color-palettes.md
@@ -0,0 +1,227 @@
+# Paletas de Cores Descomplicar® — Referencia Detalhada
+
+Extensao de `brand-guidelines/SKILL.md`. Paletas completas com variacoes de contexto,
+estados de interaccao e combinacoes aprovadas.
+
+---
+
+## Paleta Principal
+
+| Token | Hex | RGB | HSL |
+|-------|-----|-----|-----|
+| `--color-primary` | `#1a365d` | 26, 54, 93 | 213°, 56%, 23% |
+| `--color-secondary` | `#2b6cb0` | 43, 108, 176 | 211°, 61%, 43% |
+| `--color-accent` | `#dd6b20` | 221, 107, 32 | 27°, 74%, 50% |
+| `--color-white` | `#ffffff` | 255, 255, 255 | — |
+| `--color-bg-light` | `#f7fafc` | 247, 250, 252 | 204°, 33%, 98% |
+| `--color-text-body` | `#4a5568` | 74, 85, 104 | 220°, 17%, 35% |
+
+---
+
+## Escala Azul Escuro (Primary)
+
+| Variacao | Hex | Uso |
+|----------|-----|-----|
+| 50 (mais claro) | `#ebf4ff` | Fundos hover muito suaves |
+| 100 | `#dbeafe` | Fundos informativos |
+| 200 | `#bfdbfe` | Bordas suaves |
+| 300 | `#93c5fd` | Icones em fundo claro |
+| 400 | `#60a5fa` | Interaccao hover em elementos claros |
+| 500 | `#2b6cb0` | Azul medio (secondary) |
+| 600 | `#1d4ed8` | Links hover |
+| 700 | `#1e40af` | Botoes primarios hover |
+| 800 | `#1e3a8a` | Variacao escura |
+| **900 (base)** | `#1a365d` | **Cor primaria — uso principal** |
+
+---
+
+## Escala Laranja (Accent)
+
+| Variacao | Hex | Uso |
+|----------|-----|-----|
+| 50 | `#fff7ed` | Fundo callout de atencao |
+| 100 | `#ffedd5` | Destaque suave |
+| 200 | `#fed7aa` | Borda callout |
+| 300 | `#fdba74` | Icones de alerta em fundo claro |
+| 400 | `#fb923c` | Hover em elementos de acento |
+| **500 (base)** | `#dd6b20` | **Cor de acento — CTA principal** |
+| 600 | `#c05621` | Hover botao CTA |
+| 700 | `#9c4221` | Pressed state / active |
+| 800 | `#7c2d12` | Texto sobre fundo laranja claro |
+
+---
+
+## Escala de Neutros
+
+| Token | Hex | Uso |
+|-------|-----|-----|
+| Branco | `#ffffff` | Fundos principais, texto sobre escuro |
+| Gray 50 | `#f7fafc` | Fundos secundarios, seccoes alternadas |
+| Gray 100 | `#edf2f7` | Hover em items de lista |
+| Gray 200 | `#e2e8f0` | Bordas, divisores |
+| Gray 300 | `#cbd5e0` | Bordas de formularios desactivados |
+| Gray 400 | `#a0aec0` | Placeholder text, icones inactivos |
+| Gray 500 | `#718096` | Texto auxiliar, labels |
+| **Gray 600** | `#4a5568` | **Texto de corpo principal** |
+| Gray 700 | `#2d3748` | Texto secundario escuro |
+| Gray 800 | `#1a202c` | Texto titulo alternativo |
+| Gray 900 | `#171923` | Fundo ultra-escuro (raro) |
+
+---
+
+## Combinacoes de Cor Aprovadas
+
+### Combinacoes de Alta Prioridade (CTA e Heroi)
+
+| Fundo | Texto / Elemento | Racio | Nota |
+|-------|-----------------|-------|------|
+| `#1a365d` | `#ffffff` | 12.6:1 | Preferencial — hero, capa, footer |
+| `#2b6cb0` | `#ffffff` | 5.1:1 | Botoes, badges, chips |
+| `#dd6b20` | `#ffffff` | 3.1:1 | CTA (apenas texto grande >=18px ou bold >=14px) |
+| `#ffffff` | `#1a365d` | 12.6:1 | Documentos, corpo pagina |
+| `#f7fafc` | `#1a365d` | 11.9:1 | Cards, seccoes alternadas |
+
+### Combinacoes de Texto (Corpo)
+
+| Fundo | Texto | Racio | Nivel WCAG |
+|-------|-------|-------|-----------|
+| `#ffffff` | `#4a5568` | 7.0:1 | AAA |
+| `#f7fafc` | `#4a5568` | 6.6:1 | AAA |
+| `#ffffff` | `#2d3748` | 10.7:1 | AAA |
+| `#1a365d` | `#f7fafc` | 12.0:1 | AAA |
+
+### Combinacoes Proibidas
+
+| Fundo | Texto | Motivo |
+|-------|-------|--------|
+| `#dd6b20` | `#ffffff` | Contraste insuficiente para texto pequeno (3.1:1) |
+| `#2b6cb0` | `#1a365d` | Contraste insuficiente entre tons de azul (2.2:1) |
+| `#4a5568` | `#2b6cb0` | Baixo contraste em textos de corpo (2.8:1) |
+| Qualquer cor | `#a0aec0` | Gray 400 nunca como texto (max 2.9:1 sobre branco) |
+
+---
+
+## Paleta por Contexto de Produto
+
+### Dashboard / Aplicacao Web
+
+```
+Sidebar: fundo #1a365d, icones #f7fafc (inactivo), #dd6b20 (activo)
+Top bar: fundo #ffffff, borda inferior #e2e8f0
+Conteudo: fundo #f7fafc
+Cards: fundo #ffffff, sombra --shadow-sm
+Tabelas: linhas alternas #f7fafc / #ffffff
+Botao primario: #dd6b20 (fundo), #ffffff (texto)
+Botao secundario: #2b6cb0 (borda e texto), transparente (fundo)
+Botao ghost: #4a5568 (texto), hover #f7fafc (fundo)
+Links inline: #2b6cb0, hover #1a365d
+```
+
+### Apresentacoes (Slides)
+
+```
+Slide escuro (capa, divider): fundo #1a365d
+  - Titulo: Montserrat 800, #ffffff
+  - Subtitulo: Montserrat 600, #f7fafc
+  - Acento barra: #dd6b20
+  - Logótipo: variante clara
+
+Slide claro (conteudo): fundo #ffffff
+  - Titulo: Montserrat 700, #1a365d
+  - Corpo: Open Sans 400, #4a5568
+  - Highlight box: fundo #f7fafc, borda esquerda #dd6b20 4px
+  - Numero/stat: Montserrat 800, #dd6b20 ou #2b6cb0
+
+Slide citacao: fundo #f7fafc
+  - Aspas: #dd6b20
+  - Texto citacao: Montserrat 600, #1a365d
+  - Atribuicao: Open Sans 400, #4a5568
+```
+
+### Email Marketing
+
+```
+Wrapper: fundo #f7fafc
+Container: fundo #ffffff, max-width 600px
+Pre-header (top bar): fundo #1a365d, altura 4px ou bloco com logótipo
+Header: fundo #1a365d, logótipo clara, padding 32px
+  Titulo: Montserrat 700, #ffffff, 28px
+Body: fundo #ffffff, padding 32px
+  H2: Montserrat 600, #1a365d, 22px
+  Paragrafo: Open Sans 400, #4a5568, 16px, line-height 1.6
+  Link inline: #2b6cb0
+CTA block: centrado, botao #dd6b20, texto #ffffff, border-radius 4px, padding 14px 28px
+Divisor: border-top 1px solid #e2e8f0
+Footer: fundo #f7fafc, texto #718096, 13px, links #4a5568
+```
+
+### Social Media
+
+```
+Post Instagram (1080x1080):
+  Opcao A (escuro): fundo #1a365d, titulo #ffffff, acento #dd6b20
+  Opcao B (claro): fundo #ffffff, titulo #1a365d, detalhe #dd6b20
+  Borda/frame: strip #dd6b20 (8-12px) em baixo ou em cima
+  Logo: canto inferior direito, variante adequada ao fundo
+
+Story Instagram (1080x1920):
+  Gradiente vertical: #1a365d (topo) -> #2b6cb0 (base)
+  Texto: #ffffff
+  CTA button area: #dd6b20
+
+LinkedIn Banner (1584x396):
+  Fundo: #1a365d ou fotografia com overlay #1a365d 60%
+  Texto: #ffffff (titulo), #f7fafc (sub)
+  Acento: strip ou elemento #dd6b20
+```
+
+### Documentos PDF / Propostas
+
+```
+Capa: fundo #1a365d
+  Logo: variante clara, centrado no topo
+  Titulo: Montserrat 800, #ffffff, 36px
+  Subtitulo: Montserrat 400, #f7fafc, 18px
+  Data/ref: Open Sans 400, #a0aec0, 14px, em baixo
+
+Paginas internas:
+  Cabecalho: altura 48px, fundo #1a365d, logótipo pequena (variante clara), numero de pagina
+  Titulo capitulo: Montserrat 700, #1a365d, 22px, fundo #f7fafc, padding 12px, borda esquerda #dd6b20 4px
+  Corpo: Open Sans 400, #4a5568, 11pt, line-height 1.6
+  Callout/destaque: fundo #f7fafc, borda #dd6b20, icone #dd6b20
+  Tabelas: header fundo #1a365d texto #ffffff; linhas alternas #f7fafc / #ffffff
+  Rodape: borda topo #e2e8f0, texto #718096, 9pt
+```
+
+---
+
+## Gradientes Aprovados
+
+| Nome | Valor CSS | Uso |
+|------|-----------|-----|
+| Hero primario | `linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%)` | Heroi web, fundo apresentacao |
+| Acento | `linear-gradient(135deg, #dd6b20 0%, #f6ad55 100%)` | Banners promocionais |
+| Escuro suave | `linear-gradient(180deg, #1a365d 0%, #2d3748 100%)` | Sidebars, overlays |
+| Claro | `linear-gradient(180deg, #ffffff 0%, #f7fafc 100%)` | Seccoes de transicao |
+
+> Nunca usar gradientes em texto (excecto como elemento decorativo com contraste garantido).
+> Maximo 2 gradientes por composicao visual.
+
+---
+
+## Cores de Estado e Feedback
+
+| Estado | Cor | Hex | Uso |
+|--------|-----|-----|-----|
+| Sucesso | Verde | `#38a169` | Confirmacoes, checkmarks, alertas positivos |
+| Aviso | Amarelo | `#d69e2e` | Alertas de atencao, pendentes |
+| Erro | Vermelho | `#e53e3e` | Erros, validacoes negativas |
+| Informacao | Azul Medio | `#2b6cb0` | Mensagens informativas, tooltips |
+
+> Cores de estado nao fazem parte da identidade visual principal.
+> Usar apenas para feedback de interface, nunca como cor de marca.
+
+---
+
+*Referencia de paletas v1.0.0 | 2026-03-10 | Descomplicar®*
+*Fonte principal: `brand-guidelines/SKILL.md`*
--- a/design-media/skills/brand-guidelines/references/descomplicar-theme.md
+++ b/design-media/skills/brand-guidelines/references/descomplicar-theme.md
@@ -0,0 +1,188 @@
+---
+name: "Descomplicar Digital"
+description: "Professional technology consulting theme with warm accents"
+version: "1.0.0"
+updated: "2026-03-10"
+---
+
+# Tema Descomplicar Digital
+
+Tema oficial Descomplicar® para uso em apresentações, relatórios, designs e qualquer material de comunicação.
+
+---
+
+## Paleta de Cores
+
+```yaml
+colors:
+  primary: "#1a365d"      # Azul escuro — headers, fundos principais
+  secondary: "#2b6cb0"    # Azul médio — links, sub-headers
+  accent: "#dd6b20"       # Laranja — CTAs, destaques, números
+  background: "#ffffff"    # Branco — fundo principal
+  surface: "#f7fafc"       # Cinza muito claro — secções alternadas
+  text_primary: "#2d3748"  # Cinza escuro — texto corpo
+  text_secondary: "#4a5568" # Cinza médio — subtítulos, legendas
+  border: "#e2e8f0"        # Cinza claro — bordas, separadores
+  success: "#38a169"       # Verde — confirmações
+  warning: "#d69e2e"       # Amarelo — avisos
+  error: "#e53e3e"         # Vermelho — erros
+```
+
+### Referência Visual
+
+| Token | Hex | Uso |
+|-------|-----|-----|
+| `primary` | `#1a365d` | Headers H1/H2, fundos de navegação, capa de apresentação |
+| `secondary` | `#2b6cb0` | Links, H3/H4, badges, ícones activos |
+| `accent` | `#dd6b20` | Botões CTA, números em destaque, linhas de separação principais |
+| `background` | `#ffffff` | Fundo padrão de slides e páginas |
+| `surface` | `#f7fafc` | Slides alternados, tabelas linha par, painéis laterais |
+| `text_primary` | `#2d3748` | Corpo de texto, parágrafos, listas |
+| `text_secondary` | `#4a5568` | Subtítulos, legendas, texto auxiliar |
+| `border` | `#e2e8f0` | Bordas de tabela, separadores horizontais, cards |
+| `success` | `#38a169` | Confirmações, métricas positivas, status "concluído" |
+| `warning` | `#d69e2e` | Avisos, métricas de atenção, status "em risco" |
+| `error` | `#e53e3e` | Erros, métricas negativas, status "crítico" |
+
+---
+
+## Tipografia
+
+```yaml
+fonts:
+  heading: "Montserrat"
+  heading_weight: "700, 800"
+  heading_fallback: "Arial, sans-serif"
+  body: "Open Sans"
+  body_weight: "400, 600"
+  body_fallback: "Helvetica, sans-serif"
+  code: "JetBrains Mono"
+  code_fallback: "Consolas, monospace"
+```
+
+### Hierarquia Tipográfica
+
+| Nível | Fonte | Peso | Tamanho (slides) | Tamanho (docs) |
+|-------|-------|------|-----------------|----------------|
+| H1 — Título principal | Montserrat | 800 | 40-48px | 32px |
+| H2 — Título secção | Montserrat | 700 | 28-36px | 24px |
+| H3 — Subtítulo | Montserrat | 700 | 22-26px | 20px |
+| H4 — Label | Open Sans | 600 | 18-20px | 16px |
+| Corpo | Open Sans | 400 | 16-18px | 14-16px |
+| Caption | Open Sans | 400 | 12-14px | 12px |
+| Código | JetBrains Mono | 400 | 14-16px | 13px |
+
+### Google Fonts — Import
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&family=JetBrains+Mono&display=swap');
+```
+
+---
+
+## Regras de Uso
+
+```yaml
+usage_notes:
+  - Usar laranja com moderação (apenas CTAs e destaques-chave)
+  - Azul escuro para headers e elementos de navegação
+  - Fundos alternados branco/cinza para secções longas
+  - Nunca usar mais de 3 cores numa slide
+  - Manter contraste WCAG AA em todos os textos
+```
+
+### Regras Expandidas
+
+**Cores**
+- O laranja (`accent`) é reservado para no máximo 1-2 elementos por slide/página
+- Nunca usar `primary` e `accent` em simultâneo em texto — garante legibilidade
+- Fundo `surface` em slides alternados cria ritmo visual sem poluição
+- Combinação permitida em texto: `primary` fundo + `background` texto, ou `background` fundo + `primary` texto
+
+**Tipografia**
+- Nunca misturar Montserrat com outra fonte de títulos no mesmo documento
+- Open Sans é a única fonte de corpo permitida
+- Código inline e blocos de código: sempre JetBrains Mono
+- Não usar itálico em títulos — usar peso (bold) para ênfase
+
+**Contraste WCAG AA**
+- `text_primary` (#2d3748) sobre `background` (#ffffff): rácio 12.6:1 — aprovado
+- `text_secondary` (#4a5568) sobre `background` (#ffffff): rácio 7.4:1 — aprovado
+- `accent` (#dd6b20) sobre `background` (#ffffff): rácio 3.8:1 — aprovado para texto grande (>18px bold)
+- `background` (#ffffff) sobre `primary` (#1a365d): rácio 12.6:1 — aprovado
+
+---
+
+## Aplicação em Slides
+
+### Layout Tipo Capa
+
+```
+[Fundo: primary #1a365d]
+[Logo Descomplicar — branco, topo esquerdo]
+[H1: Montserrat 800, branco]
+[H2: Montserrat 700, accent #dd6b20]
+[Rodapé: Open Sans 400, text_secondary, separador border]
+```
+
+### Layout Tipo Conteúdo
+
+```
+[Fundo: background #ffffff]
+[Header barra: primary #1a365d, 8px altura]
+[H2: primary #1a365d, Montserrat 700]
+[Corpo: text_primary #2d3748, Open Sans 400]
+[Sidebar ou destaque: surface #f7fafc]
+[CTA ou número chave: accent #dd6b20, Montserrat 800]
+```
+
+### Layout Tipo Dados / Métricas
+
+```
+[Fundo alternado: surface #f7fafc]
+[Número grande: accent #dd6b20, Montserrat 800, 60-80px]
+[Label: text_secondary #4a5568, Open Sans 600, 14px]
+[Ícone: secondary #2b6cb0]
+```
+
+---
+
+## Aplicação em HTML (Desk CRM / Relatórios)
+
+```css
+:root {
+  --color-primary: #1a365d;
+  --color-secondary: #2b6cb0;
+  --color-accent: #dd6b20;
+  --color-background: #ffffff;
+  --color-surface: #f7fafc;
+  --color-text-primary: #2d3748;
+  --color-text-secondary: #4a5568;
+  --color-border: #e2e8f0;
+  --color-success: #38a169;
+  --color-warning: #d69e2e;
+  --color-error: #e53e3e;
+  --font-heading: 'Montserrat', Arial, sans-serif;
+  --font-body: 'Open Sans', Helvetica, sans-serif;
+  --font-code: 'JetBrains Mono', Consolas, monospace;
+}
+
+h1, h2 { font-family: var(--font-heading); font-weight: 800; color: var(--color-primary); }
+h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary); }
+p, li  { font-family: var(--font-body); color: var(--color-text-primary); }
+code   { font-family: var(--font-code); }
+.accent { color: var(--color-accent); }
+.surface { background: var(--color-surface); }
+```
+
+---
+
+## Compatibilidade com /design
+
+Este tema é carregado automaticamente quando se usa `--brand descomplicar` no skill `/design`.
+
+**Pack JSON:** `/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/descomplicar.json`
+
+---
+
+*Tema v1.0.0 | 2026-03-10 | Descomplicar®*