Skip to content
cccskills
FreePublished on GitHub

story-reels

Monta peças verticais 9:16 — story, reels, shorts, TikTok — respeitando as áreas seguras da interface. Use quando o usuário disser "story", "reels", "shorts", "vertical", "9:16", "TikTok", "capa de reels", "template de story". A restrição dominante aqui é a UI do app, que cobre topo, base e lateral.

The English summary is being prepared. Showing the original description.

Works withFigmaTikTok

Run score Not tested

See how to install

Files included (1)

  • SKILL.md2.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Vertical 9:16

Você monta no formato onde o app come parte da tela. Ignorar isso é o erro que mais gera republicação.

Princípio central

A tela tem 1080 × 1920. A área utilizável tem cerca de 900 × 1350. Projetar para 1920 de altura é projetar para ser coberto.

Áreas seguras

Base 1080 × 1920:

topo         250 px   perfil, som, indicador de sequência
base         320 px   legenda, CTA, barra de progresso
direita      120 px   curtir, comentar, compartilhar
esquerda      60 px   margem visual

Área confiável: 900 × 1350 centralizada, deslocada para cima.

Erro mais comum: chamada no rodapé, onde a legenda do app cobre. Segundo mais comum: elemento à direita, atrás dos botões de ação.

Ressalva de validade: áreas seguras mudam a cada atualização de app. Os valores acima são conservadores. Confirme antes de campanha grande e atualize references/formatos.md.

Estrutura

0-1s     gancho — precisa funcionar mudo e sem contexto
1-3s     desenvolvimento
3s-fim   entrega
final    CTA dentro da área segura

Story em sequência: cada card precisa sobreviver sozinho. As pessoas entram no meio da sequência o tempo todo.

Vídeo

  • Legenda embutida é obrigatória. A maioria assiste sem som — e sem legenda a peça é inacessível para pessoa surda. Não é preferência, é acessibilidade.
  • Legenda dentro da área segura, nunca no rodapé
  • Sem piscar acima de 3 Hz — risco de convulsão fotossensível
  • Texto na tela: mínimo 32 px, alto contraste, tempo de leitura suficiente

Montagem

Portão: /figma-use antes de use_figma.

  1. Criar frame 1080 × 1920
  2. Criar guias da área segura como primeira ação — antes de qualquer conteúdo
  3. Montar o conteúdo inteiro dentro de 900 × 1350
  4. Conferir com get_screenshot que nada crítico saiu da área
  5. Nomear {{campanha}}/9x16/{{n}}

Faça um componente Story base com as guias — assim toda peça nasce correta.

Anti-padrões

  • CTA no rodapé
  • Elemento importante na faixa direita
  • Texto colado na borda superior
  • Vídeo sem legenda
  • Reaproveitar peça 4:5 esticada para 9:16
  • Texto pequeno "porque é vertical" — a distância de leitura é a mesma

Limites

  • Não edita nem gera vídeo — ver video-gen
  • Não escreve copy — ver pwdev-copy
  • Não publica
  • Não garante área segura além da data de atualização de formatos.md

Skills relacionadas

  • creative-concept, figma-pipeline, creative-review, video-gen, format-specs

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Accessibility auditing and remediation skill for Vue 3 + Reka UI. Use when reviewing components, verifying WCAG 2.1 AA, fixing ARIA issues, or validating keyboard navigation in Reka UI components.

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

Infraestrutura para IA — GPU, servidores MCP, gateway de LLM, pipeline de inferência, custo de token, cache semântico e observabilidade de modelo. Use quando o usuário disser "GPU", "MCP server", "LLM", "inferência", "modelo", "gateway de IA", "custo de token", "rate limit da API de IA", "self-host de modelo".

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

Escreve texto alternativo e descrição de imagem para peças de rede social. Use quando o usuário disser "alt text", "texto alternativo", "descrição da imagem", "acessibilidade da peça", "descrever para leitor de tela", ou automaticamente antes de qualquer publicação. Obrigatório em todas as peças — em carrossel, um por slide.

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

Organiza, compara e seleciona entre as variações geradas, e publica a grade de comparação como Artifact para aprovação do time. Use quando o usuário disser "qual dessas", "comparar as variações", "escolher a melhor", "mostrar as opções", "montar grade de aprovação", ou após qualquer lote de geração. Selecionar é trabalho, não detalhe.

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

Aumenta resolução e qualidade de imagem via Freepik/Magnific, ou orienta o processo manual quando não há chave. Use quando o usuário disser "upscale", "melhorar a resolução", "a imagem está pixelada", "Magnific", "Freepik", "aumentar a imagem", "imagem pequena demais". Gasta crédito — exige confirmação.

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

CI/CD e automação — GitHub Actions, Terraform, OpenTofu, Ansible, n8n. Use quando o usuário disser "pipeline", "CI/CD", "GitHub Actions", "workflow", "terraform", "ansible", "n8n", "automatizar", "deploy automático", "IaC".

The English summary is being prepared. Showing the original description.

pwdev-solucoes/pwdev-claude-marketplace3Updated Oct 15, 2026

See all skills by pwdev-solucoes

Report a problem with this skill