--- name: squad-posts-design description: Sistema oficial de carrosséis editoriais Squad Film — manifestos cinematográficos 8 slides (1080x1350) com tipografia Britti Sans Light/Regular, fotografia real, acento Squad Blue. Use quando o usuário pedir "carrossel manifesto", "post manifesto squad", "golden hour", "ensaio editorial squad", "post 8 slides squad film", "campanha cinematográfica carrossel", ou referenciar uma estética editorial cinema (não brutalista). Cada preset é um tema completo (Golden Hour, Premissa Visual, Frame, etc.) com 8 slides estruturados (capa + manifesto + tese + 4 frames foto + assinatura). Saída: prompt de IA pra fotografia + PNG renderizado + estrutura editável. NUNCA usa imagem gerada por IA — só fotografia real ou frame de vídeo Squad. --- # SQUAD POSTS DESIGN — Carrosséis Editoriais Cinematográficos Skill dedicada aos carrosséis manifesto Squad Film. Diferente de `arte-engine` (8 estilos pra peças variadas), aqui cada preset é um **carrossel editorial completo de 8 slides** com narrativa fechada (capa → manifesto → tese → 4 fotos → assinatura). --- ## DNA do Sistema - **Formato**: 8 slides 1080x1350 (4:5 Instagram feed) - **Tipografia**: Britti Sans somente — pesos 300 (Light) e 400 (Regular). NUNCA bold. Italic só em casos pontuais (em-phasis editorial). - **Hierarquia sem peso**: contraste vem de tamanho (160px hero, 84px H1, 56px H2), opacidade (45%, 55%, 78%, 100%) e cor (branco / cyan-DNA / accent). - **Cores**: - `--squad-black` `#0A0A0A` — fundo dominante - `--squad-white` `#FFFFFF` — tipografia primária - `--squad-blue` `#00AEEF` — acento (call-out, destaque) - `--squad-cyan-dna` `#1AA7D4` — separador `// ` mono - `--squad-amber` `#C9A84C` — variação golden hour - **Estrutura fixa de 8 slides**: 1. **Capa** — foto full-bleed + título hero (160-180px) + subtítulo curto + chrome com paginação 2. **Manifesto §01 · Premissa** — texto 78px com partes "neutras" em opacidade 45% e partes em foco em 100% 3. **Manifesto §02 · Tese** — H2 68px + grid 3 colunas com taxonomia 4-7. **Frames 01-04** — fotografia full-bleed + legenda canto inferior + kicker "HORÁRIO · LOCAL" + metadata câmera (F/X · 1/X · ISO X) 8. **Assinatura §03** — wordmark + monograma marca d'água + frase de fechamento + CTA "AGENDAR DIREÇÃO" + handle social - **Chrome (em todos os slides)**: - TL: tag mono section/§ (ex: `§01 · A PREMISSA`) - TR: tag mono `01 / EDIÇÃO 2026` - Centro topo: paginação de 8 traços (28px ativo, 8px inativo) - BL: tag mono opcional - BR: tag mono + monograma 24px - **Pattern `// `**: separador DNA cyan antes de qualquer caption institucional - **Anti-bold guard**: `*, b, strong, h1-h6 { font-weight: 400 }` — bloqueia synthesis bold do browser - **Fotografia**: SEMPRE foto real ou frame de vídeo Squad. NUNCA imagem gerada por IA. --- ## PRESETS DISPONÍVEIS | # | Código | Tema | Acento | Tom | |---|--------|------|--------|-----| | 01 | `golden-hour` | Manifesto sobre a hora mágica de luz | `#00AEEF` (Squad Blue) | Editorial poético, observação de campo | Próximos presets seguem o mesmo arcabouço — só muda fotografia, headline hero, manifesto e tese. Estrutura visual, chrome, tipografia e exportação permanecem. --- ## FLUXO DE TRABALHO ### 1. Usuário pede um carrossel manifesto Gatilhos: - "carrossel golden hour" - "manifesto 8 slides squad" - "post manifesto cinematográfico" - "carrossel editorial squad film" - "ensaio sobre [tema] estilo squad" ### 2. Agente identifica preset (ou cria novo) - Pediu Golden Hour → preset `01-golden-hour` - Pediu tema novo (ex: "ensaio sobre silêncio", "manifesto sobre lentidão") → o agente **cria um novo preset** seguindo o template `presets/_template.md`, gera 8 slides com o mesmo arcabouço, copia/seleciona fotos da pasta `assets/` ou pede ao user. ### 3. Agente pergunta o que entregar ``` Saída: A — só copy editada (manifesto + tese + captions + assinatura) B — copy + prompts de fotografia (4 frames descritos pra IA OU pra direção de foto real) C — copy + render PNG via Playwright (8 PNGs em out//) D — tudo (A+B+C) ``` Default sem ambiguidade: **D**. ### 4. Agente pergunta variações ``` Variações por preset: • Acento: blue (default) / amber (golden cinematográfico) / white (editorial light) • Ano (rodapé): 2026 / vazio • Grid 8px: oculto (default) / visível pra debug ``` ### 5. Agente entrega **Modo A (copy):** retorna o JSON estruturado com `slide01..slide08.{kicker, headline, manifesto, caption, ...}` em PT-BR, sem em-dash, sem voz IA, sem data exibida. **Modo B (prompts de foto):** 4 prompts de fotografia (em PT-BR ou EN) descrevendo o frame ideal para cada slide 04-07. Inclui horário, lente sugerida, composição, mood. Útil pra direção de captura ou geração intermediária (depois substituída por foto real Squad — nunca em post final Squad). **Modo C (render PNG):** ```bash python3 ~/.claude/skills/squad-posts-design/scripts/render.py \ --preset 01-golden-hour \ --output ~/.claude/skills/squad-posts-design/out/golden-hour-$(date +%s) \ [--accent blue|amber|white] [--year 2026] ``` Output: 8 PNGs `squad-golden-hour-01.png` ... `squad-golden-hour-08.png` em 1080x1350 device_scale_factor=2. --- ## REGRAS DE GUARD-RAIL 1. **Imagem real obrigatória** — Squad Film não aceita IA em post. Usar `assets/golden-*.png` (fotos curadas) ou pedir foto/frame ao usuário. 2. **PT-BR sempre**, sem em-dash longo (—), substituir por ponto/vírgula. Em-dash editorial pode aparecer no texto interno do manifesto, mas evitar em copy de chamada. 3. **Zero data** no post (regra global Squad). Ano só no rodapé/chrome como "EDIÇÃO 2026". 4. **Zero voz IA**: nada de "sinergia", "impactante", "otimizar", "engajar", "transforme", "revolucione". 5. **Zero "The Version of Us"** (regra global PDF/post). 6. **Acento** travado em `#00AEEF` (default) — ler `accent` do JSON do preset se variação foi pedida. 7. **Anti-overlap obrigatório** — checar bounding box antes de exportar. Padrão: padding 80px lateral, 80px topo, 120px rodapé com chrome. 8. **Render 2x** — Playwright `device_scale_factor=2` → saída 2160x2700 antes do downscale. --- ## ESTRUTURA DE ARQUIVOS ``` ~/.claude/skills/squad-posts-design/ ├── SKILL.md ← este hub ├── catalog.json ← index dos presets ├── presets/ │ ├── _template.md ← arcabouço pra novos manifestos │ └── 01-golden-hour.md ← Golden Hour completo ├── templates/ │ ├── 01-golden-hour.html ← React shell + carrossel + export bar │ ├── 01-golden-hour.jsx ← componentes Slide01..Slide08 │ ├── _tweaks-panel.jsx ← painel de ajuste (acento/ano/grid) │ └── _tokens.css ← design tokens Squad ├── assets/ │ ├── fonts/ ← Britti Sans .otf │ ├── golden-*.png ← fotos curadas │ └── squad-*.png ← logos/wordmark/monograma ├── scripts/ │ └── render.py ← Playwright PNG export ├── previews/ ← thumbs PNG dos exports oficiais (referência visual) └── out/ ← PNGs gerados por uso ``` --- ## INTEGRAÇÃO COM A PLATAFORMA NEXUS A plataforma `nexus.squadfilm.com` lê `catalog.json` desta skill e expõe cada preset como card com: - preview (PNG capa do `previews/`) - formulário de tema/headline/tom - botão "gerar copy" (chama Claude API com SKILL.md + preset.md como contexto) - botão "renderizar PNG" (chama endpoint `/api/render` que executa `scripts/render.py`) Manter `catalog.json` sempre atualizado quando criar preset novo. --- ## CHECKLIST FINAL ANTES DE ENTREGAR - [ ] 8 slides? capa + 2 manifesto + 4 frames + assinatura? - [ ] Britti Sans 300/400 só? sem bold? - [ ] Fotografia real ou frame Squad? (nunca IA pra Squad Film) - [ ] Acento `#00AEEF` aplicado nos 3-4 pontos certos (nunca disperso)? - [ ] Sem em-dash em headlines, sem data, sem voz IA? - [ ] Chrome consistente em todos os slides (paginação 8 traços, mono tags)? - [ ] Pattern `// ` antes de DNA tags? - [ ] Render 2x, anti-overlap conferido? - [ ] Output salvo em `out/-/`?