---
name: cinematic-site
category: design-media
description: "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'."
version: "1.0.0"
created: 2026-04-07
tools: [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`:

```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

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