Zona Segura para Redes Sociais

O que Zona Segura para Redes Sociais faz?

Os aplicativos de plataforma cobrem partes do seu quadro com botões, legendas e a barra de perfil, e a grade do perfil corta as laterais. Qualquer coisa importante ali fica oculta. Este skill garante que isso nunca aconteça.

Todos os números estão em zones.json. Nunca os codifique diretamente. Listar predefinições: python scripts/zones_lib.py list.

Fluxo de trabalho (siga em ordem)

1. Escolha a predefinição. Corresponda à plataforma: ig-reel, ig-story, ig-story-strict, ig-feed, tiktok, yt-shorts, linkedin-4x5, linkedin-16x9. Se o usuário não nomear nenhuma plataforma, assuma ig-reel. Se quiser várias plataformas, projete um mestre com a zona mais restrita e depois verifique as outras.
2. Leia a zona. python scripts/zones_lib.py show <preset> imprime o retângulo seguro e as caixas de evitação.
3. Construa dentro dela.
   • Fundos sangrados e filmagens podem preencher todo o quadro.
   • Tudo importante vai dentro do retângulo seguro: títulos, corpo do texto, legendas, logotipos, rostos, botões de CTA, fotos principais do produto.
   • Nunca coloque nada em uma caixa de avoid (Reels: a coluna de botões no canto inferior direito).
   • Legendas ficam na parte inferior da área segura, nunca na margem inferior.
   • Tamanho mínimo do texto: 42px a 1080 de largura. Alto contraste em todos os fundos.
   • Reels e Feed: mantenha o conteúdo principal também dentro do corte da grade, para que a miniatura da grade do perfil ainda seja legível.
4. Use o helper certo para a ferramenta:
   • Remotion / React: templates/SafeZone.tsx e templates/zones.ts
   • HTML / CSS: templates/safezone.css (classes como sz-ig-reel)
   • Python / Pillow / ffmpeg: scripts/zones_lib.py
   • Canva / CapCut / Premiere: solte assets/guides/<preset>.png por cima como uma camada bloqueada
   • Mais detalhes: references/integrations.md
5. Verifique antes de entregar.
   • Layout JSON (exato): python scripts/check_zones.py layout.json
   • Imagem ou vídeo: python scripts/check_zones.py file --preset <preset> --overlay check.png (adicione --ocr se o tesseract existir)
   • Pré-visualização simulada do aplicativo: python scripts/preview_mock.py frame.png --preset <preset> --out mock.png
6. Corrija e verifique novamente. python scripts/autofix.py layout.json move ou redimensiona elementos. Para filmagens finalizadas que não podem ser reorganizadas: python scripts/autofix.py fit in.png --preset <preset> --out out.png.
7. Informe o usuário o resultado em uma linha: predefinição usada, PASS ou FAIL, e o que foi movido. Mostre a sobreposição ou pré-visualização simulada se ajudar.

Layout JSON (para verificações exatas e correção automática)

{"preset": "ig-reel", "elements": [
  {"id": "headline", "type": "text", "text": "Olá", "x": 60, "y": 300, "w": 700, "h": 90, "size": 90},
  {"id": "logo", "type": "box", "x": 60, "y": 1500, "w": 220, "h": 110},
  {"id": "bg", "type": "box", "x": 0, "y": 0, "w": 1080, "h": 1920, "important": false}
]}

important: false marca fundos que podem vazar para fora da zona.

Regras

• Se o usuário explicitamente quiser algo dentro de uma área de perigo, faça, mas diga o que pode ser coberto.
• Valores marcados como estimate em zones.json são medidos pela comunidade, não oficiais. Mencione isso para trabalhos com clientes e sugira um post de teste.
• Para adicionar uma plataforma ou alterar um número, edite apenas zones.json, depois execute python scripts/export_zones.py css > templates/safezone.css e python scripts/make_guides.py --all.