| name | guimkt-hero-videos |
| description | Cria hero sections premium de websites e landing pages com vídeos no background — e, quando nenhum vídeo é fornecido, também gera o prompt de vídeo ideal para a seção. Use SEMPRE que o usuário pedir hero section com vídeo, hero section com videobg, landing page com vídeo de fundo, "seção hero cinematográfica", "hero com vídeo rodando atrás", "página com vídeo no background", "hero videobg", ou qualquer variação de hero + vídeo. Use também quando o usuário pedir apenas "crie o vídeo para o hero" ou "me dá o prompt de vídeo para o hero" sem fornecer URL — nesse caso ative apenas o módulo video-for-hero-pages. Os dois módulos desta skill funcionam juntos ou separados.
|
| version | 1.0.0 |
| updated | 2026-03-17 |
HERO VIDEOS — Skill Completa
Esta skill tem dois módulos que se complementam:
| Módulo | O que faz | Quando usar |
|---|
| hero-pages-videobg | Gera o código HTML/CSS da hero section com vídeo no background | Sempre que a task for construir a hero section |
| video-for-hero-pages | Gera o prompt de vídeo ideal para ser usado no hero | Quando o usuário NÃO fornece uma URL de vídeo pronto |
DECISÃO INICIAL — Leia isso primeiro
Antes de qualquer coisa, identifique o estado do input:
┌─ O usuário forneceu uma URL de vídeo? ──────────────────────────┐
│ │
│ SIM → Ir direto para [MÓDULO 1: hero-pages-videobg] │
│ │
│ NÃO → Perguntar ao usuário: │
│ "Você tem um vídeo pronto ou quer que eu gere │
│ o prompt de vídeo ideal para o seu hero também?" │
│ │
│ ├─ "Tenho o vídeo" → Pedir URL → [MÓDULO 1] │
│ ├─ "Quero o prompt" → [MÓDULO 2] → depois [MÓDULO 1] │
│ └─ "Só o código" → [MÓDULO 1] com {{VÍDEO_URL}} │
│ como placeholder explícito │
└───────────────────────────────────────────────────────────────────┘
Regra de ouro: Nunca assuma que o usuário quer os dois módulos, mas sempre ofereça o módulo de vídeo se ele não tiver um. A integração é opcional e inteligente.
MÓDULO 1 — hero-pages-videobg
Leia o arquivo completo em references/hero-pages-videobg.md antes de gerar qualquer código.
Quando ativar: o usuário quer construir a hero section (com ou sem vídeo definido).
Input mínimo necessário:
- Nome da marca/produto
- URL do vídeo (ou placeholder
{{VÍDEO_URL}} se ainda não definida)
Input opcional que melhora o output:
- Paleta de cores
- Fonte preferida
- Links do menu
- Texto do headline
- CTAs
Comportamento esperado:
- Ler
references/hero-pages-videobg.md
- Coletar os inputs necessários (via pergunta ou inferindo do contexto)
- Gerar código HTML completo, funcional, responsivo
- Entregar como artifact
.html renderizável
MÓDULO 2 — video-for-hero-pages
Leia o arquivo completo em references/video-for-hero-pages.md antes de gerar qualquer prompt.
Quando ativar: o usuário não tem um vídeo pronto e quer criar um.
Input mínimo necessário:
- Nicho ou tipo de negócio (ex: "agência de vídeo", "SaaS B2B", "moda")
Input opcional que melhora o output:
- Paleta de cores da marca
- Mood/tom desejado
- Ferramenta de vídeo que vai usar (Runway, Sora, Kling, etc.)
Comportamento esperado:
- Ler
references/video-for-hero-pages.md
- Identificar se há um nicho pré-definido nos exemplos do reference
- Gerar o prompt completo com as 4 variáveis preenchidas
- Incluir o checklist de validação pré-entrega
- Após o prompt, perguntar: "Quer que eu já gere o código da hero section com o vídeo que você vai criar?"
FLUXO COMBINADO (quando o usuário quer tudo)
Se o usuário pedir os dois módulos em sequência:
1. [MÓDULO 2] Gerar prompt de vídeo
↓
"Aqui está o prompt. Depois de gerar o vídeo na ferramenta de
sua escolha, me passe a URL e gero o código da hero section."
↓
2. [Usuário gera o vídeo externamente e retorna com a URL]
↓
3. [MÓDULO 1] Gerar código da hero section com a URL recebida
Não gere o código da hero section com URL fictícia a não ser que o usuário explicitamente peça um placeholder.
REFERÊNCIAS
references/hero-pages-videobg.md — Especificações completas do código HTML da hero sectionreferences/video-for-hero-pages.md — Prompt completo para geração de vídeo + checklist + exemplos por nicho
