← ClaudeAtlas

ls-design-3d-weblisted

Design or implement purposeful 3D and spatial web experiences using Three.js, React Three Fiber, Plotly, model-viewer, Spline, WebGL, or WebGPU. Use for 3D heroes, product viewers, configurators, scroll narratives, spatial interfaces, and procedural or scientific visualizations.
verbalogicproject-creator/L.S.Design · ★ 0 · Web & Frontend · score 72
Install: claude install-skill verbalogicproject-creator/L.S.Design
# L.S.Design 3D Web Use depth to explain, demonstrate, or create atmosphere without sacrificing content, identity, accessibility, or runtime stability. ## Decision order User and repository requirements come first, followed by product, data, platform, and brand truth, accessibility and function, this specialist's guidance, then aesthetic defaults. ## Protect the host design Do not change the host page's font families, font loading, typography tokens, DOM text colors, brand palette, or global theme unless that change is explicitly in scope. Charts, materials, shaders, and loading states consume project tokens or deliberately neutral placeholders. A sample colorscale is never authority to recolor the product. Keep essential copy, navigation, controls, prices, configuration state, and calls to action in semantic DOM. Canvas text may supplement but must not become the only usable representation. ## Choose the mode and stack - Use Plotly for data-first scientific 3D with standard analytical interaction. - Use D3 or semantic SVG for supporting 2D topology and data views. - Use Three.js as the framework-neutral custom 3D baseline. - Use React Three Fiber when the host is React and declarative scene integration helps. - Use `model-viewer` for a straightforward product viewer or supported AR flow. - Use Spline only after its hosting, privacy, loading, fallback, and runtime constraints fit the product. - Use WebGPU or TSL only as a capability-enhanced path with a tested fallbac