How does this skill handle web animation performance?

It enforces performance rules like animating only transform and opacity properties, batching DOM operations to avoid layout thrashing, and mandatory GSAP cleanup to prevent memory leaks.

Does it assist with the creative/aesthetic direction?

Absolutely. It features an 'artist' agent designed to help users discover their visual voice through a structured interview process covering influences, qualities, and context.

Is the code accessible and WCAG compliant?

Yes, the skill integrates cognitive design principles, fluid typography using clamp(), and prefers-reduced-motion guards to ensure inclusive experiences.

What frameworks are supported by the build-experience skill?

The skill is Svelte-first (specifically Svelte 5), but it also provides patterns for Astro islands, Threlte 8, and vanilla implementations using GSAP or PixiJS.

Can I use this for 3D and WebGL projects?

Yes, it includes deep knowledge of Threlte 8, Three.js, and PixiJS, including mobile-specific optimizations for draw call budgets and shader performance.

Interactive Experience Engineer

Name: Interactive Experience Engineer
Author: yzavyas

byyzavyas

•

Herramientas de Diseño

Architects high-performance, Svelte-based interactive frontends featuring 3D graphics, motion design, and complex data visualizations.

Acerca de

The build-experience skill transforms Claude into a specialized frontend engineer focused on creating high-end, interactive web experiences. It provides domain-specific expertise in Svelte 5, Threlte 8, and GSAP to implement complex animations, WebGL-driven 3D environments, and 'scrollytelling' narratives. Beyond code generation, the skill facilitates aesthetic discovery and enforces rigorous performance standards—such as compositor-only animations and memory-safe GSAP cleanup—to ensure digital experiences are technically robust, accessible, and emotionally engaging across both desktop and mobile platforms.

Características Principales

High-performance motion design using GSAP, ScrollTrigger, and Lenis
Specialized agent roles for aesthetic discovery and cognitive UX design
Advanced Svelte 5 and Threlte 8 implementation patterns
Complex data visualization using D3 and the Layer Cake framework
WebGL and 2D canvas optimization with PixiJS and Three.js
3 GitHub stars

Casos de Uso

Developing performant 3D web experiences and interactive product prototypes
Creating accessible, fluid data dashboards with high-density visual components
Building immersive scrollytelling landing pages for data journalism or brand narratives

Acerca de

Características Principales

High-performance motion design using GSAP, ScrollTrigger, and Lenis
Specialized agent roles for aesthetic discovery and cognitive UX design
Advanced Svelte 5 and Threlte 8 implementation patterns
Complex data visualization using D3 and the Layer Cake framework
WebGL and 2D canvas optimization with PixiJS and Three.js
3 GitHub stars

Casos de Uso

Developing performant 3D web experiences and interactive product prototypes
Creating accessible, fluid data dashboards with high-density visual components
Building immersive scrollytelling landing pages for data journalism or brand narratives