Author React Three Fiber scenes with performance and accessibility guardrails.
npx skills add https://github.com/shipiit/shipit-ui-design --skill three-d-scene
Please help me install this Agent Skill. Skill: three-d-scene Source: https://github.com/shipiit/shipit-ui-design/tree/main/skills/three-d-scene Command: npx skills add https://github.com/shipiit/shipit-ui-design --skill three-d-scene
This Skill prevents slow, inaccessible, and fragile React Three Fiber (R3F) scenes by enforcing a consistent 3D architecture, performance practices, and mobile/reduced-motion fallbacks.
Ask it to generate a R3F hero/product scene for your UI, using the Scene component pattern with Suspense, token-driven materials, and an SVG/PNG poster fallback for mobile and reduced-motion users.
High-intent search queries and answers about installing and using this skill.
Optimize React Three Fiber performance by configuring deterministic frameloop settings, applying Suspense boundaries, and using instancing for repeated meshes to prevent per-frame recreation. This approach maintains visual consistency while avoiding frame rate drops in UI hero scenes.
Add reduced motion and mobile fallbacks to R3F scenes by implementing an SVG or PNG poster fallback. This ensures accessibility and prevents rendering heavy 3D environments on small viewports or when users request reduced motion.
Integrate CSS design tokens into Three.js materials by bridging token values directly into material properties without hardcoding. This preserves theme consistency across your design system and ensures 3D scenes match your UI styling.
Use drei utilities like Environment, ContactShadows, and Float safely by following performance guardrails that respect shadow and postprocessing costs. Lazy-loading heavy scenes and models further prevents performance degradation in R3F.
React Three Fiber scenes break without Suspense boundaries because asynchronous asset loading needs fallback handling. Enforcing scoped Canvas setup with Suspense ensures safe loading states and prevents runtime errors during model fetching.
concept2cureGenerate CSS variable and Tailwind design tokens for light and dark modes.
racciolyRun Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.
yonetim258852Construct declarative 3D scenes in React with React Three Fiber and Drei.
naveedharriGenerate animated GIF and static PNG LinkedIn visuals from a user-provided concept.
