claude-plugins/design-media/skills/cinematic-site/SKILL.md

name, category, description, version, created, tools

name	category	description	version	created	tools
cinematic-site	design-media	Constroi websites cinematograficos a partir de um site existente. Pipeline 4 passos: brand analysis, scene generation, build HTML/CSS, preview. Usar quando 'cinematic', 'website premium', 'site cinematografico', 'redesign site', 'nanobanana'.	1.0.0	2026-04-07	Bash Read Write mcp__claude-in-chrome__read_page mcp__claude-in-chrome__tabs_create_mcp mcp__chrome-devtools__take_screenshot

Skill: /cinematic-site

Constroi websites cinematograficos responsivos a partir de um site existente. Inspirado no Nanobanana 2 (#366 Jay E / RoboNuggets).

---

Pipeline de 4 passos

Passo 1 — Brand Analysis

Receber URL do site existente do utilizador.

1. Abrir URL via mcp__claude-in-chrome__tabs_create_mcp + mcp__claude-in-chrome__read_page
2. Extrair:
   • Paleta de cores (hex codes das cores dominantes)
   • Logo (URL ou descricao)
   • Fontes usadas (font-family do CSS)
   • Tom de voz (formal, casual, tecnico)
   • Tipo de negocio e sector
   • Conteudo principal (hero text, servicos, about)
3. Guardar analise em /tmp/cinematic-site/brand-analysis.json:

{
  "url": "https://...",
  "business": "restaurante italiano",
  "colors": {"primary": "#2C3E50", "secondary": "#E74C3C", "accent": "#F39C12"},
  "fonts": {"heading": "Playfair Display", "body": "Inter"},
  "tone": "acolhedor e premium",
  "logo_description": "...",
  "hero_text": "...",
  "sections": ["sobre", "menu", "reservas", "contacto"]
}

Passo 2 — Scene Generation

Com base na analise, definir o design cinematografico:

1. Hero section: escolher tipo de animacao:
   • Parallax com imagem de fundo
   • Scroll-reveal progressivo
   • Video background concept (descricao, nao video real)
   • Cursor-follow effect
2. 3-5 seccoes adicionais com animacoes scroll-based:
   • Referenciar Hub/04-Stack/02.03-IA/biblioteca-animacoes-scroll.md para patterns disponiveis
3. Responsive breakpoints: mobile-first, 3 breakpoints (mobile, tablet, desktop)
4. Guardar plano em /tmp/cinematic-site/scene-plan.md

Passo 3 — Build

Gerar ficheiros HTML/CSS/JS:

1. Criar /tmp/cinematic-site/output/:
   • index.html — single-page com todas as seccoes
   • styles.css — Tailwind ou CSS puro
   • animations.js — scroll observers + animacoes
2. Regras de qualidade:
   • Referenciar design.json Descomplicar para standards
   • Mobile-first
   • Core Web Vitals: LCP <2.5s, CLS <0.1
   • Sem dependencias externas pesadas (max framer-motion ou CSS puro)
   • Acessibilidade basica (alt text, contraste, focus states)
3. Incluir comentarios no HTML com seccoes claras

Passo 4 — Preview

1. Abrir index.html no browser local: xdg-open /tmp/cinematic-site/output/index.html
2. Tirar screenshot via mcp__chrome-devtools__take_screenshot
3. Mostrar comparacao ao utilizador:
   • Site original (URL)
   • Novo site (screenshot)
4. Pedir aprovacao antes de qualquer proximo passo
5. Se aprovado, sugerir opcoes:
   • Copiar para pasta de projecto
   • Ajustar cores/seccoes
   • Exportar para Vercel/Netlify (manual)

---

Regras

• Nunca deploy automatico — apenas preview local
• Nunca inventar conteudo — usar texto real do site original
• Sempre referenciar design.json para standards visuais
• Output em /tmp/cinematic-site/ — nunca em pastas de projecto sem aprovacao
• README.md incluido com instrucoes de deploy manual

---

Healing Log

{"date":"","issue":"","fix":"","source":"user|auto"}