3D Experience Web Design Squad

Squad para planejar e construir experiencias 3D web imersivas — do briefing estrategico ao deploy otimizado com Three.js, React Three Fiber, GSAP e scroll-driven narratives.

O que Faz

O 3D Experience Web Design Squad e um pipeline de 6 fases que transforma um objetivo em linguagem natural em uma experiencia 3D web completa, validada e otimizada. Combina o melhor de 4 skills especializadas:

• design-3d-experience — Stack selection, model pipeline, anti-patterns
• frontend-design — DFII scoring, design system anti-generico, craft visual
• scroll-experience — Story beats, parallax, GSAP ScrollTrigger, narrativa
• threejs-skills — Three.js, PBR materials, lighting, raycasting, performance

Zero decoracao sem proposito. Zero templates genericos. Validacao em 6 categorias com 32 items.

Pipeline — 6 Fases

Agentes

Tasks

Workflows

experience_creation_pipeline

Pipeline principal de 6 fases — do briefing a validacao.

[Strategist] -> [Architect] -> [Engineer] -> [Narrator] -> [Guardian] -> [Validator]

scene_iteration_flow

Fluxo rapido de iteracao sobre cena 3D existente.

[Engineer] -> [Guardian]

Uso

Pipeline completo

/SQUADS:3dx:experience-strategist

Agentes individuais

/SQUADS:3dx:experience-strategist     — Briefing + DFII + stack
/SQUADS:3dx:design-architect          — Design system
/SQUADS:3dx:scene-engineer            — Cena 3D
/SQUADS:3dx:scroll-narrator           — Scroll narrative
/SQUADS:3dx:performance-guardian      — Performance audit
/SQUADS:3dx:experience-validator      — Validacao final

Configuracao

• config/coding-standards.md

  — Naming conventions, regras de formato

• config/tech-stack.md

  — Three.js, R3F, GSAP, Vite, Lenis

• config/source-tree.md

  — Estrutura de diretorios

Licenca

MIT