ealmeida
faef9b47dc
Dify foi removido 06-03-2026. Skills brainstorm/discover ainda referenciam-no no corpo. Bump v1.2 + nota top-of-file. Reescrita workflow para próxima sessão. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
105 lines
3.5 KiB
Markdown
105 lines
3.5 KiB
Markdown
---
|
|
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"}
|
|
```
|