wizz-method 2.2.0 → 2.3.0

package/src/skills-lib/wizz-implementation-planner/SKILL.md

@@ -5,119 +5,119 @@ description: Technical implementation planning for premium websites, landing pag
 
 # Implementation Planner
 
-Esta skill **transforma estratégia, brief, landing, componentes, motion, 3D, vídeos e assets em um plano técnico** pronto para Claude Code, Codex, Cursor ou desenvolvimento manual.
+This skill **turns strategy, brief, landing page, components, motion, 3D, videos, and assets into a technical plan** ready for Claude Code, Codex, Cursor, or manual development.
 
-Ela é o **último elo** do pipeline. Vem depois de:
+It's the **last link** in the pipeline. It comes after:
 
-1. `wizz-decision-maker` — brief visual
-2. `wizz-premium-landing-ui-researcher` — estratégia, copy, estrutura, motion ladder
-3. `wizz-ui-component-curator` — componentes, fontes, refs
-4. `wizz-motion-3d-director` — motion path, prompts de imagem/vídeo, performance plan
+1. `wizz-decision-maker` — visual brief
+2. `wizz-premium-landing-ui-researcher` — strategy, copy, structure, motion ladder
+3. `wizz-ui-component-curator` — components, fonts, references
+4. `wizz-motion-3d-director` — motion path, image/video prompts, performance plan
 
-A regra-mestre desta skill: **não decide gosto visual.** Recebe decisões já tomadas e produz arquitetura técnica clara, implementável e performática.
+This skill's master rule: **it does not decide visual taste.** It receives decisions already made and produces a clear, implementable, performant technical architecture.
 
 ---
 
-## Objetivo
+## Goal
 
-Receber handoffs das skills upstream e produzir: stack recomendada, dependências, estrutura de pastas, component map, motion map, asset map, plano de performance, plano de acessibilidade, plano de SEO, analytics/tracking, fases de implementação, checklist final, e handoff prompt pronto para Claude Code / Codex / Cursor.
+Receive handoffs from the upstream skills and produce: recommended stack, dependencies, folder structure, component map, motion map, asset map, performance plan, accessibility plan, SEO plan, analytics/tracking, implementation phases, final checklist, and a handoff prompt ready for Claude Code / Codex / Cursor.
 
 ---
 
-## Quando usar (primeiro passo: confirmar o gatilho)
+## When to use (first step: confirm the trigger)
 
-Acionar quando o usuário pedir:
+Trigger when the user asks:
 
-- "como implementar isso?";
-- "crie o plano técnico" / "me dá a arquitetura";
-- "estrutura de pastas" / "quais dependências instalar?";
-- "como mando para o Codex?" / "como faço no Claude Code?";
-- "prepara o projeto" / "plano de implementação";
-- "quero construir essa landing" / "quero transformar isso em código".
+- "how do I implement this?";
+- "create the technical plan" / "give me the architecture";
+- "folder structure" / "which dependencies should I install?";
+- "how do I send this to Codex?" / "how do I do this in Claude Code?";
+- "prepare the project" / "implementation plan";
+- "I want to build this landing page" / "I want to turn this into code".
 
-Também usar automaticamente quando a landing já tiver: estrutura definida; copy escrita; direção visual aprovada; componentes escolhidos; animações decididas; plano 3D/motion fechado (handoff de `wizz-motion-3d-director` em mãos); assets identificados; stack recomendada.
+Also use it automatically when the landing page already has: defined structure; written copy; approved visual direction; chosen components; decided animations; a closed 3D/motion plan (handoff from `wizz-motion-3d-director` in hand); identified assets; a recommended stack.
 
 ## Skip when
 
-Pular esta skill quando:
+Skip this skill when:
 
-- Ainda não há brief aprovado — rodar `wizz-decision-maker` primeiro.
-- Ainda não há copy nem direção visual — rodar `wizz-premium-landing-ui-researcher` primeiro.
-- O projeto é **3D High-End** ou **Signature 3D** mas o motion path ainda não foi decidido — rodar `wizz-motion-3d-director` primeiro. Implementar sem motion path leva a Three.js gratuito ou vídeo mal posicionado.
-- O usuário quer só refinar copy, componentes, ou direção visual — voltar para a skill upstream correspondente.
+- There's no approved brief yet — run `wizz-decision-maker` first.
+- There's no copy or visual direction yet — run `wizz-premium-landing-ui-researcher` first.
+- The project is **3D High-End** or **Signature 3D** but the motion path hasn't been decided yet — run `wizz-motion-3d-director` first. Implementing without a motion path leads to gratuitous Three.js or poorly placed video.
+- The user just wants to refine copy, components, or visual direction — go back to the corresponding upstream skill.
 
-Implementação sem decisões a montante produz código bonito que serve à ferramenta errada.
+Implementation without upstream decisions produces pretty code that serves the wrong tool.
 
 ---
 
-## Entrada esperada
+## Expected input
 
-A skill pode receber: brief visual (do `wizz-decision-maker`); estrutura da landing (do `wizz-premium-landing-ui-researcher`); copy; direção visual; componentes recomendados (do `wizz-ui-component-curator`); animações recomendadas; fontes/componentes; 3D plan (do `wizz-motion-3d-director`); image-to-video plan; dashboard plan, se SaaS; CTA plan; stack definida; restrições de performance; assets disponíveis; assets que ainda precisam ser criados.
+The skill can receive: visual brief (from `wizz-decision-maker`); landing structure (from `wizz-premium-landing-ui-researcher`); copy; visual direction; recommended components (from `wizz-ui-component-curator`); recommended animations; fonts/components; 3D plan (from `wizz-motion-3d-director`); image-to-video plan; dashboard plan, if SaaS; CTA plan; defined stack; performance constraints; available assets; assets that still need to be created.
 
-Se faltar **informação crítica**, perguntar no máximo **5 coisas**. Se faltar detalhe menor, usar hipóteses coerentes e marcar como `[editável]`.
+If **critical information** is missing, ask at most **5 things**. If a minor detail is missing, use coherent assumptions and mark them as `[editable]`.
 
 ---
 
-## Regra principal
+## Main rule
 
-**Não inventar decisões estratégicas que já foram tomadas por outras skills.** Seguir o handoff recebido.
+**Do not invent strategic decisions that other skills have already made.** Follow the handoff received.
 
-Em caso de conflito entre decisões upstream, priorizar nesta ordem:
+In case of conflict between upstream decisions, prioritize in this order:
 
-1. Brief visual (`wizz-decision-maker`).
-2. Nível do site (`wizz-premium-landing-ui-researcher`).
-3. Motion path (`wizz-motion-3d-director`) — regras completas em `references/motion-path-implementation.md`.
-4. Stack padrão.
-5. Perguntar — se o conflito afetar implementação e nenhuma das fontes resolver.
+1. Visual brief (`wizz-decision-maker`).
+2. Site tier (`wizz-premium-landing-ui-researcher`).
+3. Motion path (`wizz-motion-3d-director`) — full rules in `references/motion-path-implementation.md`.
+4. Standard stack.
+5. Ask — if the conflict affects implementation and none of the sources resolve it.
 
-**Exemplo crítico:** se `wizz-motion-3d-director` escolheu **image-to-video**, **não** implementar R3F/Three.js para o hero — usar `<video>` + Framer Motion para o overlay. Se escolheu **3D real**, planejar R3F com mobile fallback, dynamic import, e poster.
+**Critical example:** if `wizz-motion-3d-director` chose **image-to-video**, **do not** implement R3F/Three.js for the hero — use `<video>` + Framer Motion for the overlay. If it chose **real 3D**, plan R3F with mobile fallback, dynamic import, and a poster.
 
 ---
 
-## Stack padrão
+## Standard stack
 
-Se nenhuma stack for definida no handoff, usar: **Framework** Next.js (App Router) + React + TypeScript; **Styling** Tailwind CSS + shadcn/ui; **Motion** Framer Motion/Motion + React Bits; **3D (opcional)** React Three Fiber + Three.js + Drei, apenas se motion path exigir; **Charts (opcional)** Recharts, apenas para dashboards; **Icons** lucide-react; **Fonts** next/font; **Deploy** Vercel.
+If no stack is defined in the handoff, use: **Framework** Next.js (App Router) + React + TypeScript; **Styling** Tailwind CSS + shadcn/ui; **Motion** Framer Motion/Motion + React Bits; **3D (optional)** React Three Fiber + Three.js + Drei, only if the motion path requires it; **Charts (optional)** Recharts, only for dashboards; **Icons** lucide-react; **Fonts** next/font; **Deploy** Vercel.
 
-Estrutura de pastas padrão e lista completa de dependências por categoria em `references/folder-structure-and-dependencies.md`.
+Standard folder structure and the full list of dependencies by category are in `references/folder-structure-and-dependencies.md`.
 
 ---
 
 ## Accessibility Plan
 
-Incluir: semantic HTML; contraste AA; focus states; aria-labels onde necessário; navegação por teclado; reduced motion; texto alternativo em imagens; evitar conteúdo importante somente em vídeo/3D; CTA acessível; links descritivos.
+Include: semantic HTML; AA contrast; focus states; aria-labels where needed; keyboard navigation; reduced motion; alt text on images; avoid important content that's only in video/3D; accessible CTA; descriptive links.
 
 ## SEO Plan
 
-Incluir: title; meta description; Open Graph; Twitter card; canonical; structured data (se fizer sentido); headings claros; sitemap/robots (se aplicável); alt text; performance.
+Include: title; meta description; Open Graph; Twitter card; canonical; structured data (if it makes sense); clear headings; sitemap/robots (if applicable); alt text; performance.
 
 ## Analytics / Tracking
 
-Se o site tiver CTA, incluir eventos (`cta_click`, `whatsapp_click`, `calendly_click`, `email_click`, `case_open`, `pricing_view`, `hero_video_play`, `form_submit`). Para WhatsApp: tracking no clique, mensagem pré-preenchida, UTM se necessário.
+If the site has a CTA, include events (`cta_click`, `whatsapp_click`, `calendly_click`, `email_click`, `case_open`, `pricing_view`, `hero_video_play`, `form_submit`). For WhatsApp: track the click, pre-filled message, UTM if needed.
 
 ---
 
-## Output obrigatório
+## Mandatory output
 
-A resposta da skill deve sempre incluir: resumo técnico; stack recomendada; dependências; estrutura de pastas; component map; motion map; asset map; plano de performance; plano de acessibilidade; plano de SEO; analytics/tracking; fases de implementação; checklist final; handoff para Claude Code/Codex. Ver reference map abaixo para onde carregar o template de cada item.
+The skill's response must always include: technical summary; recommended stack; dependencies; folder structure; component map; motion map; asset map; performance plan; accessibility plan; SEO plan; analytics/tracking; implementation phases; final checklist; handoff for Claude Code/Codex. See the reference map below for where to load each item's template.
 
 ---
 
-## Regra final
+## Final rule
 
-A `wizz-implementation-planner` **não decide gosto visual**. Ela transforma decisões já tomadas em arquitetura clara, implementável e performática.
+`wizz-implementation-planner` **does not decide visual taste**. It turns decisions already made into a clear, implementable, performant architecture.
 
-O melhor plano técnico é aquele que: reduz risco; preserva a direção visual; evita dependências inúteis; mantém performance; facilita manutenção; deixa claro o que o dev/AI precisa construir.
+The best technical plan is one that: reduces risk; preserves the visual direction; avoids useless dependencies; maintains performance; eases maintenance; makes clear what the dev/AI needs to build.
 
 ---
 
-## Reference map — carregar cada arquivo quando necessário
+## Reference map — load each file when needed
 
-- `references/implementation-types.md` — o que incluir por tipo de projeto (Landing page, Portfolio/Authority Site, SaaS Landing, SaaS Dashboard, 3D/Motion Site). **Carregar ao identificar o tipo de projeto.**
-- `references/motion-path-implementation.md` — regras e arquivos a planejar para cada um dos 4 motion paths. **Carregar sempre que houver decisão de wizz-motion-3d-director a seguir.**
-- `references/folder-structure-and-dependencies.md` — estrutura de pastas padrão + dependências recomendadas por categoria. **Carregar ao montar stack/estrutura.**
-- `references/output-templates.md` — exemplos preenchidos de Component Map, Motion Map e Asset Map. **Carregar ao produzir esses três mapas.**
-- `references/performance-plan.md` — requisitos de performance (geral, vídeo, 3D) + targets. **Carregar ao montar o plano de performance.**
-- `references/implementation-phases.md` — template das 5 fases padrão. **Carregar ao dividir o plano em fases.**
-- `references/handoff-template.md` — template exato do prompt de handoff para Claude Code/Codex. **Carregar ao fechar o plano.**
+- `references/implementation-types.md` — what to include per project type (Landing page, Portfolio/Authority Site, SaaS Landing, SaaS Dashboard, 3D/Motion Site). **Load when identifying the project type.**
+- `references/motion-path-implementation.md` — rules and files to plan for each of the 4 motion paths. **Load whenever there's a wizz-motion-3d-director decision to follow.**
+- `references/folder-structure-and-dependencies.md` — standard folder structure + recommended dependencies by category. **Load when building the stack/structure.**
+- `references/output-templates.md` — filled-in examples of Component Map, Motion Map, and Asset Map. **Load when producing these three maps.**
+- `references/performance-plan.md` — performance requirements (general, video, 3D) + targets. **Load when building the performance plan.**
+- `references/implementation-phases.md` — template of the 5 standard phases. **Load when splitting the plan into phases.**
+- `references/handoff-template.md` — the exact handoff prompt template for Claude Code/Codex. **Load when closing out the plan.**
 
-Nenhum conteúdo foi perdido nessa divisão — cada regra, exemplo e template acima vive integralmente no seu arquivo `references/`.
+No content was lost in this split — every rule, example, and template above lives in full in its `references/` file.

package/src/skills-lib/wizz-implementation-planner/references/folder-structure-and-dependencies.md

@@ -1,8 +1,8 @@
-# Estrutura de pastas + dependências recomendadas
+# Recommended folder structure + dependencies
 
-Carregar ao montar a estrutura de pastas padrão (com notas de quando remover cada diretório) e a lista de dependências recomendadas por categoria (base, UI, motion, 3D, dashboard, forms, analytics), instalando apenas o que o projeto usa.
+Load when building the standard folder structure (with notes on when to remove each directory) and the list of recommended dependencies by category (base, UI, motion, 3D, dashboard, forms, analytics), installing only what the project uses.
 
-## Estrutura de pastas padrão
+## Standard folder structure
 
 ```
 app/
@@ -74,17 +74,17 @@ public/
   logos/
 ```
 
-**Ajustar de acordo com o projeto:**
+**Adjust based on the project:**
 
-- Se não houver 3D real, **remover** `components/three/`.
-- Se não houver vídeo, **remover** `components/media/`.
-- Se não houver portfolio, **remover** `lib/content/cases.ts`.
+- If there's no real 3D, **remove** `components/three/`.
+- If there's no video, **remove** `components/media/`.
+- If there's no portfolio, **remove** `lib/content/cases.ts`.
 
 ---
 
-## Dependências recomendadas
+## Recommended dependencies
 
-Instalar **apenas o que o projeto usa**.
+Install **only what the project uses**.
 
 **Base:**
 
@@ -102,29 +102,29 @@ npm install tailwindcss lucide-react clsx tailwind-merge
 
 ```bash
 npm install framer-motion
-# ou, se o projeto usar Motion:
+# or, if the project uses Motion:
 npm install motion
 ```
 
-**3D real (apenas se necessário):**
+**Real 3D (only if needed):**
 
 ```bash
 npm install three @react-three/fiber @react-three/drei
 ```
 
-**Dashboard (apenas se necessário):**
+**Dashboard (only if needed):**
 
 ```bash
 npm install recharts
 ```
 
-**Forms / validation (se necessário):**
+**Forms / validation (if needed):**
 
 ```bash
 npm install react-hook-form zod
 ```
 
-**Analytics (se necessário):**
+**Analytics (if needed):**
 
 ```bash
 npm install @vercel/analytics @vercel/speed-insights

package/src/skills-lib/wizz-implementation-planner/references/implementation-phases.md

@@ -1,50 +1,50 @@
 # Implementation Phases
 
-Carregar ao dividir o plano em fases. Template das 5 fases padrão: Foundation, Static Landing, Motion, 3D/Video (se aplicável), Polish.
+Load when splitting the plan into phases. Template of the 5 standard phases: Foundation, Static Landing, Motion, 3D/Video (if applicable), Polish.
 
 ## Implementation Phases
 
-Sempre dividir em fases.
+Always split into phases.
 
-**Fase 1 — Foundation**
+**Phase 1 — Foundation**
 
-- setup do projeto;
+- project setup;
 - Tailwind;
 - shadcn;
 - tokens;
 - typography;
 - layout;
-- componentes base.
+- base components.
 
-**Fase 2 — Static Landing**
+**Phase 2 — Static Landing**
 
-- seções principais;
+- main sections;
 - copy;
 - responsive layout;
-- imagens;
+- images;
 - CTA;
-- SEO inicial.
+- initial SEO.
 
-**Fase 3 — Motion**
+**Phase 3 — Motion**
 
 - text reveal;
 - section transitions;
 - hovers;
 - magnetic CTA;
 - parallax;
-- microinterações.
+- microinteractions.
 
-**Fase 4 — 3D / Video** (se aplicável)
+**Phase 4 — 3D / Video** (if applicable)
 
-- video hero ou R3F;
+- video hero or R3F;
 - fallback;
 - performance;
 - reduced motion;
 - mobile assets.
 
-**Fase 5 — Polish**
+**Phase 5 — Polish**
 
-- QA visual;
+- visual QA;
 - accessibility;
 - performance;
 - analytics;

package/src/skills-lib/wizz-implementation-planner/references/implementation-types.md

@@ -1,28 +1,28 @@
-# Tipos de implementação — adaptação por tipo de projeto
+# Implementation types — adaptation by project type
 
-Carregar ao montar o plano, para saber o que incluir de acordo com o tipo de projeto: Landing page, Portfolio/Authority Site, SaaS Landing, SaaS Dashboard, ou 3D/Motion Site.
+Load when building the plan, to know what to include based on the project type: Landing page, Portfolio/Authority Site, SaaS Landing, SaaS Dashboard, or 3D/Motion Site.
 
-## Tipos de implementação
+## Implementation types
 
-Adaptar o plano para o tipo de projeto.
+Adapt the plan to the project type.
 
 ### 1. Landing page
 
-Incluir: page structure; sections; component map; copy integration; CTA logic; animations; responsive layout; SEO; analytics; deploy.
+Include: page structure; sections; component map; copy integration; CTA logic; animations; responsive layout; SEO; analytics; deploy.
 
 ### 2. Portfolio / Authority Site
 
-Incluir: selected work; case cards; case deep-dive; capabilities; recognition; manifesto; editorial CTA; content placeholders; **anti-invention rule** (não inventar nomes de clientes, métricas ou case studies); MDX ou content config para cases.
+Include: selected work; case cards; case deep-dive; capabilities; recognition; manifesto; editorial CTA; content placeholders; **anti-invention rule** (don't invent client names, metrics, or case studies); MDX or content config for cases.
 
 ### 3. SaaS Landing
 
-Incluir: hero; product mockup; features; use cases; pricing (se necessário); testimonials; integrations; FAQ (se necessário); CTA; analytics.
+Include: hero; product mockup; features; use cases; pricing (if needed); testimonials; integrations; FAQ (if needed); CTA; analytics.
 
 ### 4. SaaS Dashboard
 
-Incluir: app layout; sidebar; topbar; KPI cards; charts; tables; settings; billing; user profile; empty states; loading states; error states; responsive behavior; Recharts; mock data.
+Include: app layout; sidebar; topbar; KPI cards; charts; tables; settings; billing; user profile; empty states; loading states; error states; responsive behavior; Recharts; mock data.
 
 ### 5. 3D / Motion Site
 
-Incluir: motion path; assets; hero implementation; video implementation; R3F implementation (se necessário); fallback mobile; performance plan; reduced motion; lazy load; asset compression.
+Include: motion path; assets; hero implementation; video implementation; R3F implementation (if needed); mobile fallback; performance plan; reduced motion; lazy load; asset compression.
 

package/src/skills-lib/wizz-implementation-planner/references/motion-path-implementation.md

@@ -1,16 +1,16 @@
 # Motion Path Implementation Rules
 
-Carregar sempre — a implementação deve seguir o motion path escolhido pelo motion-3d-director. Cobre as regras e arquivos a planejar para cada um dos 4 paths: 3D real, image-to-video, hybrid motion, motion 2D premium.
+Always load this — the implementation must follow the motion path chosen by the motion-3d-director. Covers the rules and files to plan for each of the 4 paths: real 3D, image-to-video, hybrid motion, premium 2D motion.
 
 ## Motion Path Implementation Rules
 
-A implementação **deve seguir o motion path escolhido** pelo `wizz-motion-3d-director`.
+The implementation **must follow the motion path chosen** by `wizz-motion-3d-director`.
 
-### Se o path for 3D real
+### If the path is real 3D
 
-**Usar:** React Three Fiber; Three.js; Drei; dynamic import; Suspense; poster fallback; reduced motion; dpr cap; pause offscreen.
+**Use:** React Three Fiber; Three.js; Drei; dynamic import; Suspense; poster fallback; reduced motion; dpr cap; pause offscreen.
 
-**Planejar arquivos:**
+**Plan files:**
 
 - `components/three/HeroScene.tsx`
 - `components/three/ParticleCluster.tsx`
@@ -18,13 +18,13 @@ A implementação **deve seguir o motion path escolhido** pelo `wizz-motion-3d-d
 - `components/three/CanvasFallback.tsx`
 - `lib/device/capability.ts`
 
-### Se o path for image-to-video
+### If the path is image-to-video
 
-**Não implementar R3F/Three.js para o hero principal.**
+**Do not implement R3F/Three.js for the main hero.**
 
-**Usar:** `<video>`; WebM; MP4 fallback; poster image; mobile video; reduced motion fallback; lazy loading quando possível; preload controlado; overlay HTML para copy/CTA.
+**Use:** `<video>`; WebM; MP4 fallback; poster image; mobile video; reduced motion fallback; lazy loading when possible; controlled preload; HTML overlay for copy/CTA.
 
-**Planejar arquivos:**
+**Plan files:**
 
 - `public/video/hero-desktop.webm`
 - `public/video/hero-desktop.mp4`
@@ -35,23 +35,23 @@ A implementação **deve seguir o motion path escolhido** pelo `wizz-motion-3d-d
 - `components/media/ResponsiveVideo.tsx`
 - `components/media/VideoFallback.tsx`
 
-### Se o path for hybrid motion
+### If the path is hybrid motion
 
-**Combinar:**
+**Combine:**
 
-- vídeo / image-to-video no hero;
-- Framer Motion para texto e seções;
-- React Bits para microinterações;
+- video / image-to-video in the hero;
+- Framer Motion for text and sections;
+- React Bits for microinteractions;
 - hover effects;
 - scroll effects;
-- pequenos detalhes WebGL opcionais, se aprovados.
+- small optional WebGL touches, if approved.
 
-**Separação clara:** vídeo para atmosfera; HTML/CSS para conteúdo; Framer Motion para narrativa; WebGL só se necessário.
+**Clear separation:** video for atmosphere; HTML/CSS for content; Framer Motion for narrative; WebGL only if necessary.
 
-### Se o path for motion 2D premium
+### If the path is premium 2D motion
 
-**Usar:** Framer Motion; React Bits; CSS transitions; SVG animation; clip-path reveal; parallax leve; magnetic buttons.
+**Use:** Framer Motion; React Bits; CSS transitions; SVG animation; clip-path reveal; light parallax; magnetic buttons.
 
-**Não usar Three.js.**
+**Do not use Three.js.**
 
 ---

package/src/skills-lib/wizz-implementation-planner/references/performance-plan.md

@@ -1,44 +1,44 @@
 # Performance Plan
 
-Carregar ao montar o plano de performance. Cobre: requisitos gerais para qualquer site, requisitos específicos para vídeo, requisitos específicos para 3D real, e os targets sugeridos (LCP/CLS/INP/Lighthouse).
+Load when building the performance plan. Covers: general requirements for any site, video-specific requirements, real-3D-specific requirements, and the suggested targets (LCP/CLS/INP/Lighthouse).
 
 ## Performance Plan
 
-### Para qualquer site
+### For any site
 
-- otimizar imagens;
-- usar `next/image`;
-- usar `next/font`;
-- evitar JS desnecessário;
-- lazy load abaixo da dobra;
-- reduzir bundle inicial;
-- usar semantic HTML;
-- evitar layout shift;
-- usar contrastes AA;
-- respeitar `prefers-reduced-motion`.
+- optimize images;
+- use `next/image`;
+- use `next/font`;
+- avoid unnecessary JS;
+- lazy load below the fold;
+- reduce the initial bundle;
+- use semantic HTML;
+- avoid layout shift;
+- use AA contrast ratios;
+- respect `prefers-reduced-motion`.
 
-### Para vídeo
+### For video
 
 - WebM + MP4 fallback;
 - poster image;
-- preload controlado;
-- vídeo `muted playsInline loop`;
-- mobile crop separado;
-- compressão forte;
-- não bloquear LCP;
-- fallback poster em reduced motion.
+- controlled preload;
+- video `muted playsInline loop`;
+- separate mobile crop;
+- strong compression;
+- don't block LCP;
+- poster fallback under reduced motion.
 
-### Para 3D real
+### For real 3D
 
-- dynamic import com `ssr: false`;
+- dynamic import with `ssr: false`;
 - Suspense fallback;
 - dpr cap;
-- redução de partículas mobile;
+- reduced particle count on mobile;
 - pause offscreen;
-- dispose de geometria/material;
-- evitar shadow pesado;
-- limitar luzes;
-- fallback poster;
+- dispose geometry/material;
+- avoid heavy shadows;
+- limit lights;
+- poster fallback;
 - `prefers-reduced-motion`.
 
 ### Targets
@@ -47,6 +47,6 @@ Carregar ao montar o plano de performance. Cobre: requisitos gerais para qualque
 - LCP < 3.5s mobile;
 - CLS < 0.1;
 - INP < 200ms;
-- Lighthouse Performance 90+ quando possível.
+- Lighthouse Performance 90+ when possible.
 
 ---

package/src/skills-lib/wizz-infrastructure/SKILL.md

@@ -1,34 +1,34 @@
 ---
 name: wizz-infrastructure
-description: Escalabilidade de infraestrutura — auto-scaling, Kubernetes HPA/VPA, CDN, SLOs, load testing. Use quando o pedido envolver escala de servidores, Kubernetes, CDN, monitoramento de capacidade.
+description: Infrastructure scalability — auto-scaling, Kubernetes HPA/VPA, CDN, SLOs, load testing. Use when the request involves server scaling, Kubernetes, CDN, capacity monitoring.
 ---
 
 # Infrastructure Scalability
 
 ## Auto-scaling
 
-### Horizontal scaling (mais instâncias)
-- Melhor para aplicações stateless
-- Métricas de trigger: CPU > 70%, requisições/s, latência p99
-- Cooldown period: aguarde 2-3 min antes de escalar novamente para evitar flapping
+### Horizontal scaling (more instances)
+- Best for stateless applications
+- Trigger metrics: CPU > 70%, requests/s, p99 latency
+- Cooldown period: wait 2-3 min before scaling again to avoid flapping
 
-### Vertical scaling (instância maior)
-- Mais simples mas tem limite físico e downtime
-- Use para banco de dados antes de partir para clustering
+### Vertical scaling (bigger instance)
+- Simpler but has a physical limit and downtime
+- Use for databases before moving to clustering
 
-## Kubernetes essentials para escala
-- HPA (Horizontal Pod Autoscaler): escala pods por CPU/memória/métricas customizadas
-- VPA (Vertical Pod Autoscaler): ajusta requests/limits automaticamente
-- PodDisruptionBudget: garante disponibilidade durante atualizações
-- Resource requests/limits: defina sempre, sem isso o scheduler não funciona corretamente
+## Kubernetes essentials for scale
+- HPA (Horizontal Pod Autoscaler): scales pods by CPU/memory/custom metrics
+- VPA (Vertical Pod Autoscaler): adjusts requests/limits automatically
+- PodDisruptionBudget: guarantees availability during updates
+- Resource requests/limits: always set them, without them the scheduler doesn't work correctly
 
 ## CDN
-- Assets estáticos (JS, CSS, imagens): sempre via CDN
-- API responses cacheáveis: use CDN com cache-control correto
-- Edge functions: lógica simples próxima ao usuário sem passar pelo servidor
+- Static assets (JS, CSS, images): always via CDN
+- Cacheable API responses: use a CDN with correct cache-control
+- Edge functions: simple logic close to the user without hitting the server
 
-## Monitoramento de capacidade
-- Defina SLOs: ex. p99 latência < 500ms, disponibilidade > 99.9%
-- Alertas proativos: avise quando tendência indica que vai estourar em 24h
-- Load testing: rode k6 ou Locust antes de lançamentos importantes
-- Capacity planning: projete crescimento de 3 meses e provisione com antecedência
+## Capacity monitoring
+- Define SLOs: e.g. p99 latency < 500ms, availability > 99.9%
+- Proactive alerts: warn when a trend indicates it will blow up within 24h
+- Load testing: run k6 or Locust before major launches
+- Capacity planning: project 3-month growth and provision ahead of time