wizz-method 1.4.1 → 1.5.0

package/src/skills-lib/marketing-psychology/references/influencing-behavior.md

@@ -0,0 +1,71 @@
+Load this file for models that ethically influence customer decisions (Reciprocity, Commitment & Consistency, Authority Bias, Liking/Similarity, Unity Principle, Scarcity/Urgency, Foot-in-the-Door, Door-in-the-Face, Loss Aversion, Anchoring, Decoy Effect, Framing, Contrast Effect).
+
+## Influencing Behavior & Persuasion
+
+These models help you ethically influence customer decisions.
+
+### Reciprocity Principle
+People feel obligated to return favors. Give first, and people want to give back.
+
+**Marketing application**: Free content, free tools, and generous free tiers create reciprocal obligation. Give value before asking for anything.
+
+### Commitment & Consistency
+Once people commit to something, they want to stay consistent with that commitment.
+
+**Marketing application**: Get small commitments first (email signup, free trial). People who've taken one step are more likely to take the next.
+
+### Authority Bias
+People defer to experts and authority figures. Credentials and expertise create trust.
+
+**Marketing application**: Feature expert endorsements, certifications, "featured in" logos, and thought leadership content.
+
+### Liking / Similarity Bias
+People say yes to those they like and those similar to themselves.
+
+**Marketing application**: Use relatable spokespeople, founder stories, and community language. "Built by marketers for marketers" signals similarity.
+
+### Unity Principle
+Shared identity drives influence. "One of us" is powerful.
+
+**Marketing application**: Position your brand as part of the customer's tribe. Use insider language and shared values.
+
+### Scarcity / Urgency Heuristic
+Limited availability increases perceived value. Scarcity signals desirability.
+
+**Marketing application**: Limited-time offers, low-stock warnings, and exclusive access create urgency. Only use when genuine.
+
+### Foot-in-the-Door Technique
+Start with a small request, then escalate. Compliance with small requests leads to compliance with larger ones.
+
+**Marketing application**: Free trial → paid plan → annual plan → enterprise. Each step builds on the last.
+
+### Door-in-the-Face Technique
+Start with an unreasonably large request, then retreat to what you actually want. The contrast makes the second request seem reasonable.
+
+**Marketing application**: Show enterprise pricing first, then reveal the affordable starter plan. The contrast makes it feel like a deal.
+
+### Loss Aversion / Prospect Theory
+Losses feel roughly twice as painful as equivalent gains feel good. People will work harder to avoid losing than to gain.
+
+**Marketing application**: Frame in terms of what they'll lose by not acting. "Don't miss out" beats "You could gain."
+
+### Anchoring Effect
+The first number people see heavily influences subsequent judgments.
+
+**Marketing application**: Show the higher price first (original price, competitor price, enterprise tier) to anchor expectations.
+
+### Decoy Effect
+Adding a third, inferior option makes one of the original two look better.
+
+**Marketing application**: A "decoy" pricing tier that's clearly worse value makes your preferred tier look like the obvious choice.
+
+### Framing Effect
+How something is presented changes how it's perceived. Same facts, different frames.
+
+**Marketing application**: "90% success rate" vs. "10% failure rate" are identical but feel different. Frame positively.
+
+### Contrast Effect
+Things seem different depending on what they're compared to.
+
+**Marketing application**: Show the "before" state clearly. The contrast with your "after" makes improvements vivid.
+

package/src/skills-lib/marketing-psychology/references/pricing-psychology.md

@@ -0,0 +1,31 @@
+Load this file for how people perceive and respond to prices specifically (Charm Pricing/Left-Digit Effect, Rounded-Price/Fluency Effect, Rule of 100, Price Relativity/Good-Better-Best, Mental Accounting for pricing).
+
+## Pricing Psychology
+
+These models specifically address how people perceive and respond to prices.
+
+### Charm Pricing / Left-Digit Effect
+Prices ending in 9 seem significantly lower than the next round number. $99 feels much cheaper than $100.
+
+**Marketing application**: Use .99 or .95 endings for value-focused products. The left digit dominates perception.
+
+### Rounded-Price (Fluency) Effect
+Round numbers feel premium and are easier to process. $100 signals quality; $99 signals value.
+
+**Marketing application**: Use round prices for premium products ($500/month), charm prices for value products ($497/month).
+
+### Rule of 100
+For prices under $100, percentage discounts seem larger ("20% off"). For prices over $100, absolute discounts seem larger ("$50 off").
+
+**Marketing application**: $80 product: "20% off" beats "$16 off." $500 product: "$100 off" beats "20% off."
+
+### Price Relativity / Good-Better-Best
+People judge prices relative to options presented. A middle tier seems reasonable between cheap and expensive.
+
+**Marketing application**: Three tiers where the middle is your target. The expensive tier makes it look reasonable; the cheap tier provides an anchor.
+
+### Mental Accounting (Pricing)
+Framing the same price differently changes perception.
+
+**Marketing application**: "$1/day" feels cheaper than "$30/month." "Less than your morning coffee" reframes the expense.
+

package/src/skills-lib/marketing-psychology/references/understanding-buyers.md

@@ -0,0 +1,116 @@
+Load this file to explain how customers think, decide, and behave (Fundamental Attribution Error, Mere Exposure, Availability Heuristic, Confirmation Bias, Lindy Effect, Mimetic Desire, Sunk Cost, Endowment Effect, IKEA Effect, Zero-Price Effect, Hyperbolic Discounting, Status-Quo Bias, Default Effect, Paradox of Choice, Goal-Gradient, Peak-End Rule, Zeigarnik Effect, Pratfall Effect, Curse of Knowledge, Mental Accounting, Regret Aversion, Bandwagon/Social Proof).
+
+## Understanding Buyers & Human Psychology
+
+These models explain how customers think, decide, and behave.
+
+### Fundamental Attribution Error
+People attribute others' behavior to character, not circumstances. "They didn't buy because they're not serious" vs. "The checkout was confusing."
+
+**Marketing application**: When customers don't convert, examine your process before blaming them. The problem is usually situational, not personal.
+
+### Mere Exposure Effect
+People prefer things they've seen before. Familiarity breeds liking.
+
+**Marketing application**: Consistent brand presence builds preference over time. Repetition across channels creates comfort and trust.
+
+### Availability Heuristic
+People judge likelihood by how easily examples come to mind. Recent or vivid events seem more common.
+
+**Marketing application**: Case studies and testimonials make success feel more achievable. Make positive outcomes easy to imagine.
+
+### Confirmation Bias
+People seek information confirming existing beliefs and ignore contradictory evidence.
+
+**Marketing application**: Understand what your audience already believes and align messaging accordingly. Fighting beliefs head-on rarely works.
+
+### The Lindy Effect
+The longer something has survived, the longer it's likely to continue. Old ideas often outlast new ones.
+
+**Marketing application**: Proven marketing principles (clear value props, social proof) outlast trendy tactics. Don't abandon fundamentals for fads.
+
+### Mimetic Desire
+People want things because others want them. Desire is socially contagious.
+
+**Marketing application**: Show that desirable people want your product. Waitlists, exclusivity, and social proof trigger mimetic desire.
+
+### Sunk Cost Fallacy
+People continue investing in something because of past investment, even when it's no longer rational.
+
+**Marketing application**: Know when to kill underperforming campaigns. Past spend shouldn't justify future spend if results aren't there.
+
+### Endowment Effect
+People value things more once they own them.
+
+**Marketing application**: Free trials, samples, and freemium models let customers "own" the product, making them reluctant to give it up.
+
+### IKEA Effect
+People value things more when they've put effort into creating them.
+
+**Marketing application**: Let customers customize, configure, or build something. Their investment increases perceived value and commitment.
+
+### Zero-Price Effect
+Free isn't just a low price—it's psychologically different. "Free" triggers irrational preference.
+
+**Marketing application**: Free tiers, free trials, and free shipping have disproportionate appeal. The jump from $1 to $0 is bigger than $2 to $1.
+
+### Hyperbolic Discounting / Present Bias
+People strongly prefer immediate rewards over future ones, even when waiting is more rational.
+
+**Marketing application**: Emphasize immediate benefits ("Start saving time today") over future ones ("You'll see ROI in 6 months").
+
+### Status-Quo Bias
+People prefer the current state of affairs. Change requires effort and feels risky.
+
+**Marketing application**: Reduce friction to switch. Make the transition feel safe and easy. "Import your data in one click."
+
+### Default Effect
+People tend to accept pre-selected options. Defaults are powerful.
+
+**Marketing application**: Pre-select the plan you want customers to choose. Opt-out beats opt-in for subscriptions (ethically applied).
+
+### Paradox of Choice
+Too many options overwhelm and paralyze. Fewer choices often lead to more decisions.
+
+**Marketing application**: Limit options. Three pricing tiers beat seven. Recommend a single "best for most" option.
+
+### Goal-Gradient Effect
+People accelerate effort as they approach a goal. Progress visualization motivates action.
+
+**Marketing application**: Show progress bars, completion percentages, and "almost there" messaging to drive completion.
+
+### Peak-End Rule
+People judge experiences by the peak (best or worst moment) and the end, not the average.
+
+**Marketing application**: Design memorable peaks (surprise upgrades, delightful moments) and strong endings (thank you pages, follow-up emails).
+
+### Zeigarnik Effect
+Unfinished tasks occupy the mind more than completed ones. Open loops create tension.
+
+**Marketing application**: "You're 80% done" creates pull to finish. Incomplete profiles, abandoned carts, and cliffhangers leverage this.
+
+### Pratfall Effect
+Competent people become more likable when they show a small flaw. Perfection is less relatable.
+
+**Marketing application**: Admitting a weakness ("We're not the cheapest, but...") can increase trust and differentiation.
+
+### Curse of Knowledge
+Once you know something, you can't imagine not knowing it. Experts struggle to explain simply.
+
+**Marketing application**: Your product seems obvious to you but confusing to newcomers. Test copy with people unfamiliar with your space.
+
+### Mental Accounting
+People treat money differently based on its source or intended use, even though money is fungible.
+
+**Marketing application**: Frame costs in favorable mental accounts. "$3/day" feels different than "$90/month" even though it's the same.
+
+### Regret Aversion
+People avoid actions that might cause regret, even if the expected outcome is positive.
+
+**Marketing application**: Address regret directly. Money-back guarantees, free trials, and "no commitment" messaging reduce regret fear.
+
+### Bandwagon Effect / Social Proof
+People follow what others are doing. Popularity signals quality and safety.
+
+**Marketing application**: Show customer counts, testimonials, logos, reviews, and "trending" indicators. Numbers create confidence.
+

package/src/skills-lib/motion-3d-director/SKILL.md

@@ -22,11 +22,11 @@ A regra-mestre: **nunca assumir automaticamente que 3D precisa ser feito do zero
 3. **Hybrid motion** (vídeo + UI animada — o caminho recomendado para a maioria dos sites high-end).
 4. **Motion 2D premium** (Framer Motion + scroll effects, sem 3D).
 
-A escolha é estratégica. Errar o path desperdiça orçamento, mata performance e empurra o site para "tech demo" em vez de "marca premium".
+A escolha é estratégica. Errar o path desperdiça orçamento, mata performance e empurra o site para "tech demo" em vez de "marca premium". Detalhe completo de cada path (quando usar, stack, exemplos) em `references/motion-paths.md` — carregar depois de saber qual path se aplica.
 
 ---
 
-## Quando usar
+## Quando usar (primeiro passo: confirmar o gatilho)
 
 Acionar quando o usuário disser ou o projeto indicar:
 
@@ -57,303 +57,11 @@ Pular esta skill quando:
 
 Antes de recomendar qualquer implementação, decidir entre os quatro paths considerando:
 
-- objetivo do site;
-- público;
-- nível visual (do `premium-landing-ui-researcher`);
-- hero object (do brief);
-- feeling (do brief);
-- three-second memory (do brief);
-- se existe logo;
-- se existe imagem;
-- se existe mockup;
-- se existe produto;
-- se precisa de interação real;
-- performance mobile;
-- tempo de implementação;
-- impacto desejado;
-- custo de manutenção.
-
-A decisão vem **antes** de qualquer stack. Stack é consequência do path.
+- objetivo do site; público; nível visual (do `premium-landing-ui-researcher`); hero object (do brief); feeling (do brief); three-second memory (do brief);
+- se existe logo; se existe imagem; se existe mockup; se existe produto;
+- se precisa de interação real; performance mobile; tempo de implementação; impacto desejado; custo de manutenção.
 
----
-
-## Motion Paths
-
-### 1. 3D real no navegador
-
-Usar quando precisa de **interação real**.
-
-**Usar se:**
-
-- o objeto precisa reagir ao mouse;
-- a câmera precisa mudar com scroll;
-- há partículas interativas;
-- há shader em tempo real;
-- há configurador 3D;
-- há produto 3D manipulável;
-- há cena que responde ao usuário;
-- o 3D é parte funcional da experiência;
-- o hero object precisa existir como WebGL real.
-
-**Stack recomendada:**
-
-- React Three Fiber;
-- Three.js;
-- Drei;
-- GLSL / shaders;
-- Framer Motion ou Motion para integração com scroll;
-- GSAP apenas se necessário.
-
-**Exemplos:** objeto 3D que segue o cursor; esfera de partículas mouse-reactive; câmera que avança no scroll; wireframe terrain em tempo real; produto 3D configurável; background WebGL interativo.
-
-**Evitar se:**
-
-- o visual pode ser pré-renderizado;
-- a interação é só decorativa;
-- o público usa muito mobile;
-- performance é prioridade máxima;
-- o efeito pode ser resolvido com vídeo;
-- o prazo é curto.
-
----
-
-### 2. Image-to-video / vídeo cinematográfico
-
-Usar quando o objetivo é **visual premium cinematográfico sem precisar de interação real**.
-
-Este caminho costuma ser **melhor que Three.js** para sites high-end, porque entrega visual caro, leve e controlado.
-
-**Usar se:**
-
-- o hero precisa parecer caro;
-- o visual pode ser pré-renderizado;
-- a cena não precisa reagir ao usuário;
-- mobile performance importa;
-- a marca precisa de impacto visual;
-- o asset pode ser um vídeo em loop;
-- o usuário tem logo, imagem, símbolo ou mockup;
-- ou o usuário não tem nada, mas a skill pode criar um objeto signature abstrato.
-
-**Fluxo:**
-
-1. Definir conceito do hero.
-2. Criar imagem base.
-3. Transformar imagem em vídeo.
-4. Exportar WebM/MP4/poster.
-5. Implementar no site com overlay de copy e CTA.
-
-**Melhor para:** site de agência; marca pessoal premium; site de autoridade; portfolio cinematográfico; AI product; luxury SaaS; high-ticket service; manifesto visual.
-
----
-
-### 3. Hybrid motion
-
-Usar quando o melhor resultado mistura **vídeo/image-to-video com UI animada**.
-
-**Usar quando:**
-
-- o hero pode ser vídeo;
-- a interface precisa de microinterações;
-- o site precisa parecer vivo;
-- 3D real seria pesado demais;
-- o usuário quer "uau" mas não precisa de interação 3D real.
-
-**Combinar:**
-
-- vídeo hero ou image-to-video;
-- Framer Motion;
-- React Bits;
-- microinterações;
-- scroll effects;
-- text reveal;
-- cards com hover 3D leve;
-- shader sutil opcional;
-- poster mobile.
-
-**Melhor para:** Signature 3D Experience; agência premium; landing de alto valor; portfolio; hero cinematográfico; sites onde performance é importante.
-
-**Regra:** para a maioria dos sites high-end, **Hybrid motion é o caminho recomendado** — a menos que exista motivo claro para 3D real.
-
----
-
-### 4. Motion 2D premium
-
-Usar quando 3D é exagero ou não aumenta conversão.
-
-**Inclui:** text reveal; parallax; masked typography; image reveal; hover cards; SVG motion; scroll storytelling; magnetic buttons; animated mockups; cinematic section transitions; gradient background animado; background noise; reveal por seção; staggered animations.
-
-**Usar quando:**
-
-- o projeto é Advanced Site;
-- o público não precisa de 3D;
-- performance é prioridade;
-- a estética pede sofisticação discreta;
-- o 3D pareceria gratuito;
-- a marca precisa parecer premium, não tech demo.
-
----
-
-## Image-to-Video Workflow
-
-Usar este workflow quando o projeto precisa de visual cinematográfico high-end **sem interação 3D em tempo real**.
-
-### Quando escolher image-to-video
-
-Escolher quando:
-
-- o hero precisa parecer caro;
-- a cena pode ser pré-renderizada;
-- o site precisa performar bem;
-- o usuário quer forte impacto visual;
-- o 3D real seria overkill;
-- o hero é mais atmosférico do que interativo;
-- o usuário quer transformar uma imagem em vídeo;
-- o usuário tem logo, mockup, imagem ou produto visual;
-- ou o usuário ainda não tem imagem, mas a marca precisa de um objeto signature.
-
-### Etapa 1 — Definir conceito do hero
-
-Definir: hero object; feeling; three-second memory; câmera; iluminação; atmosfera; color logic; duração; loop behavior; formato desktop; formato mobile.
-
-Se faltar imagem, perguntar:
-
-> Você tem logo, símbolo, imagem, produto, print, mockup ou dashboard que possa virar hero visual?
-
-Se o usuário disser não:
-
-> Vou criar uma direção de hero visual abstrato baseado na marca, no feeling e no hero object definidos no brief.
-
-### Etapa 2 — Escolher asset base
-
-Opções: logo da marca; símbolo da marca; produto; dashboard; mockup; print de interface; objeto abstrato signature; monólito; cluster de partículas; cena atmosférica; imagem gerada por prompt.
-
-**Uso da logo.** A logo pode ser usada como base visual, mas **não automaticamente**.
-
-Usar logo quando: tem símbolo forte; é simples; é reconhecível; pode virar objeto 3D; reforça a marca; tem geometria interessante; o site é de autoridade/portfolio; o objetivo é memorabilidade de marca.
-
-Não usar logo quando: é tipográfica demais; é genérica; não tem símbolo forte; fica institucional demais; o hero object do brief é mais forte; distorcer a logo prejudicaria a marca.
-
-Se usar logo: criar versão 3D / vidro / metal / cristal / partículas; manter legibilidade; não distorcer a marca; usar luz cinematográfica; animar com câmera lenta; exportar vídeo/poster.
-
-**Quando não há logo nem imagem forte**, propor: objeto signature abstrato; monólito futurista; esfera de partículas; cluster cristalino; forma de vidro escuro; dashboard cinematográfico fictício; cena atmosférica; símbolo conceitual baseado no feeling.
-
-Nunca travar por falta de imagem.
-
-### Etapa 3 — Prompt para imagem base
-
-Sempre entregar um prompt de imagem base quando recomendar image-to-video ou hybrid motion.
-
-**Template:**
-
-```
-Create a cinematic hero image for a premium [type of business] website.
-
-Subject:
-[Describe the hero object. If no object exists, create an abstract signature object based on the brand feeling.]
-
-Mood:
-[Feeling from the brief], premium, controlled, intentional, cinematic, not generic.
-
-Composition:
-Large negative space, object centered or slightly off-center, editorial layout, deep atmosphere, suitable for website hero overlay.
-
-Color:
-[Color logic], restrained accent color, no random palette.
-
-Lighting:
-Cinematic rim light, soft shadows, atmospheric depth, controlled highlights.
-
-Style:
-[Reference style: Apple Vision Pro / Linear / Anthropic / editorial tech / luxury / etc.]
-
-Avoid:
-Cheap sci-fi, excessive glow, clutter, random symbols, text, people, fake UI, oversaturated neon.
-
-Output:
-4K, clean composition, suitable for image-to-video animation and website hero.
-```
-
-**Exemplo preenchido:**
-
-```
-Create a cinematic hero image for a premium technology studio website.
-
-Subject:
-A floating abstract signature object inspired by the brand identity, made of dark glass and subtle metallic edges.
-
-Mood:
-Cinematic, precise, expensive, restrained, futuristic but editorial.
-
-Composition:
-Object centered, slightly tilted, large negative space, dark off-black background, subtle cyan rim light, soft atmospheric depth, no text, no people.
-
-Lighting:
-Soft rim light, cold cyan highlights, deep shadows, subtle volumetric glow.
-
-Style:
-Apple Vision Pro meets Linear meets high-end editorial technology.
-
-Output:
-4K, clean background, suitable for image-to-video animation.
-```
-
-### Etapa 4 — Prompt para image-to-video
-
-Sempre entregar um prompt de vídeo.
-
-**Template:**
-
-```
-Animate this image into a cinematic website hero loop.
-
-Motion:
-[Describe camera motion: slow push-in, orbit, parallax, drift, light movement.]
-
-Camera:
-[Static / slow push-in / slight orbit / dolly / parallax depth.]
-
-Lighting:
-[Subtle light movement, rim light, atmosphere.]
-
-Duration:
-[4–8 seconds.]
-
-Loop:
-Seamless loop. End frame should match the start frame in position, lighting and atmosphere.
-
-Mood:
-[Feeling], premium, calm, controlled, intentional.
-
-Avoid:
-Fast movement, shaky camera, excessive particles, explosions, cheap sci-fi, random objects, text, logo distortion.
-
-Output:
-WebM and MP4, desktop crop, mobile crop, poster frame included.
-```
-
-**Exemplo preenchido:**
-
-```
-Animate this image into a cinematic website hero loop.
-
-Motion:
-Slow camera push-in, slight orbit to the right, subtle parallax depth, soft light movement across the object, minimal particle drift in the background.
-
-Duration:
-6 seconds.
-
-Loop:
-Seamless loop. End frame should match the start frame in position and lighting.
-
-Mood:
-Premium, calm, controlled, futuristic, editorial.
-
-Avoid:
-Fast movement, shaky camera, excessive particles, dramatic explosions, cheap sci-fi effects, text, logos changing shape.
-
-Output:
-WebM and MP4, 16:9 desktop crop and 9:16 mobile crop, poster frame included.
-```
+A decisão vem **antes** de qualquer stack. Stack é consequência do path. **Carregue `references/motion-paths.md`** para o detalhe de cada um dos quatro paths antes de recomendar um.
 
 ---
 
@@ -373,38 +81,15 @@ O que **esta skill** decide para Signature 3D:
 
 - qual dos quatro paths usar (na maioria dos casos: **Hybrid motion**);
 - qual o asset base (logo? objeto signature abstrato? cena atmosférica?);
-- prompts de imagem e vídeo;
+- prompts de imagem e vídeo — ver `references/image-to-video-workflow.md`;
 - performance plan completo;
 - handoff para `implementation-planner`.
 
 ---
 
-## Performance Requirements
-
-Todo plano 3D, vídeo ou motion avançado deve incluir:
-
-- fallback mobile;
-- poster image;
-- `prefers-reduced-motion`;
-- lazy load;
-- dynamic import;
-- compressão WebM/MP4;
-- WebP/AVIF;
-- redução de partículas;
-- limite de shaders;
-- Core Web Vitals respeitados;
-- pause offscreen;
-- mobile crop;
-- desktop/video split.
-
-**Targets sugeridos:**
-
-- LCP < 2.5s desktop;
-- LCP < 3.5s mobile 4G;
-- CLS < 0.1;
-- INP < 200ms;
-- bundle inicial controlado;
-- 3D/vídeo fora do critical path quando possível.
+## Performance Requirements + Handoff
+
+Todo plano 3D, vídeo ou motion avançado precisa de fallback mobile, poster image, `prefers-reduced-motion`, lazy load e respeitar Core Web Vitals. Ao final, sempre entregar o bloco de handoff para `implementation-planner` (motion path, assets, arquivos esperados, stack, notas). Lista completa de requisitos + targets (LCP/CLS/INP) + template exato do handoff em `references/performance-and-handoff.md`.
 
 ---
 
@@ -418,56 +103,14 @@ Quando esta skill for acionada, entregar:
 4. **Justificativa** — por que esse path para esse projeto.
 5. **Asset base recomendado** — logo / imagem / vídeo / mockup / símbolo abstrato / objeto signature / prompt visual.
 6. **O que o usuário precisa enviar** — assets faltantes ou decisões pendentes.
-7. **Prompt para imagem base** — preenchido com base no brief.
-8. **Prompt para vídeo / image-to-video** — preenchido.
+7. **Prompt para imagem base** — preenchido com base no brief (template em `references/image-to-video-workflow.md`).
+8. **Prompt para vídeo / image-to-video** — preenchido (template em `references/image-to-video-workflow.md`).
 9. **Direção de câmera, luz, duração, loop behavior**.
 10. **Plano de implementação no site** — onde entra, como, com qual fallback.
 11. **Fallback mobile**.
 12. **Performance notes** (Core Web Vitals, lazy load, reduced motion).
 13. **O que evitar** (web3 template, neon, sci-fi barato, 3D gratuito).
-14. **Handoff para `implementation-planner`** (template abaixo).
-
----
-
-## Handoff para implementation-planner
-
-Ao final, sempre entregar um bloco assim:
-
-```
-## Handoff para implementation-planner
-
-Motion path escolhido:
-[3D real / image-to-video / hybrid motion / motion 2D premium]
-
-Assets necessários:
-- [asset 1]
-- [asset 2]
-
-Arquivos esperados:
-- hero.webm
-- hero.mp4
-- hero-poster.webp
-- hero-mobile.webm
-- hero-mobile-poster.webp
-
-Stack recomendada:
-- Next.js
-- React
-- TypeScript
-- Tailwind
-- Framer Motion
-- React Three Fiber, se necessário
-- Three.js, se necessário
-
-Implementation notes:
-- [notas]
-
-Performance constraints:
-- [notas]
-
-Fallback:
-- [notas]
-```
+14. **Handoff para `implementation-planner`** (template em `references/performance-and-handoff.md`).
 
 ---
 
@@ -483,3 +126,13 @@ O objetivo é **resultado premium, não complexidade gratuita**. Sempre escolher
 4. 3D real
 
 3D real só quando a interação justifica. Se o objeto não precisa reagir ao usuário, 3D real é desperdício de orçamento, performance e tempo — e o vídeo cinematográfico costuma parecer mais caro.
+
+---
+
+## Reference map — carregar cada arquivo quando necessário
+
+- `references/motion-paths.md` — os quatro paths em detalhe: quando usar, stack recomendada, exemplos, quando evitar. **Carregar antes de recomendar um path.**
+- `references/image-to-video-workflow.md` — fluxo completo (4 etapas) + templates de prompt (imagem base e image-to-video) com exemplos preenchidos. **Carregar quando o path escolhido for image-to-video ou hybrid motion.**
+- `references/performance-and-handoff.md` — lista completa de requisitos de performance + targets, e o template exato do bloco de handoff. **Carregar ao fechar o output desta skill.**
+
+Nenhum conteúdo foi perdido nessa divisão — cada regra, exemplo e template acima vive integralmente no seu arquivo `references/`.