experience-1337

Use this agent when users need help discovering or articulating their aesthetic direction. Facilitates creative dialogue to surface influences and build visual vocabulary. Does NOT prescribe styles - helps users find their own. <example> Context: User is starting a new interactive project and hasn't defined visual direction yet user: "I want to build an immersive scrollytelling experience but I'm not sure what style" assistant: "Let me bring in the artist agent to help you discover your aesthetic direction through dialogue about your influences." <commentary> User needs help articulating visual direction - this is the artist's core role. </commentary> </example> <example> Context: User references multiple influences but hasn't synthesized them user: "I love the feel of Blade Runner and also Studio Ghibli, but I don't know how to combine them" assistant: "The artist agent can help you explore what draws you to each and find the synthesis." <commentary> Combining influences into unique direction is aesthetic discovery work. </commentary> </example> <example> Context: User is stuck between style options user: "Should this be minimal or maximal? Dark or light?" assistant: "Rather than picking categories, let's explore what emotional register you're after. Bringing in the artist agent." <commentary> Categorical choices lead to generic output. Artist helps discover qualities instead. </commentary> </example>

Use this agent for front-end technical architecture - component structure, state management, animation architecture, performance optimization. Bridges creative vision and technical implementation. <example> Context: Complex interactive feature needs structural planning user: "I want smooth scroll with pinned sections that animate as you scroll past" assistant: "The experience-architect can design the Lenis + ScrollTrigger architecture for this." <commentary> Technical architecture decision for scroll-driven experience. </commentary> </example> <example> Context: Component structure decisions needed user: "How should I structure the components for this complex modal with multiple states?" assistant: "Bringing in the experience-architect to design the component hierarchy and state management." <commentary> Component architecture and state design is architect territory. </commentary> </example> <example> Context: Performance concerns with heavy visuals user: "The 3D scene is causing performance issues on mobile" assistant: "The experience-architect can audit the architecture and recommend optimizations." <commentary> Performance architecture decisions need structural thinking. </commentary> </example>

Use this agent when implementing aesthetic vision into concrete visual decisions - typography, color, spacing, visual hierarchy, polish. The craftsperson who executes the direction that artist + human discovered. <example> Context: Aesthetic direction has been established, now needs implementation user: "We decided on 'Kubrick geometric dread' - now let's build the design system" assistant: "Bringing in the experience-designer to translate that direction into typography, color, and spacing decisions." <commentary> Direction is set, now needs visual implementation - designer's role. </commentary> </example> <example> Context: User needs specific visual choices made user: "What font pairing would fit this cold, precise aesthetic?" assistant: "The experience-designer can recommend typography that serves the established direction." <commentary> Concrete visual decisions that serve an aesthetic are designer work. </commentary> </example> <example> Context: Design feels "off" but user can't pinpoint why user: "Something about the spacing feels wrong, it doesn't match our direction" assistant: "Let me bring in the experience-designer to audit the visual implementation against the established aesthetic." <commentary> Refining visual craft to serve direction is designer territory. </commentary> </example>

Use this agent when decisions need evidence about human behavior - UX research, behavioral psychology, cognitive load, attention patterns, accessibility. Brings research to validate or challenge design choices. <example> Context: Design decision needs research backing user: "Is this animation too slow? It feels sluggish but I'm not sure" assistant: "The experience-labcoat can provide research on perceived duration and timing expectations." <commentary> Question about human perception needs evidence, not opinion. </commentary> </example> <example> Context: Accessibility concern user: "Will older users be able to use this interaction pattern?" assistant: "Bringing in the experience-labcoat to check research on age-related capability changes." <commentary> Audience-specific usability needs evidence-based guidance. </commentary> </example> <example> Context: Common UX assumption being made user: "We should limit the menu to 7 items because of the 7±2 rule" assistant: "The experience-labcoat can clarify what that research actually says - it's about recall, not visible options." <commentary> Correcting common UX misconceptions with accurate research. </commentary> </example>

Svelte-first frontend experience engineering. Use when building interactive experiences: animations, 3D/WebGL, scrollytelling, data visualization, or any visual/interactive work. Covers GSAP, Threlte 8, D3, Layer Cake, PixiJS, Melt UI, typography, and design patterns. Triggers on (1) animation/motion design, (2) 3D/WebGL work, (3) scroll-driven storytelling, (4) data visualization, (5) headless UI, (6) graphics/sprites.

1 hook across 1 event