---
name: "drei-r3f-helper-primitives"
description: "Accelerate React Three Fiber development with @react-three/drei production utilities."
metadata:
  author: "Pmndrs"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use orbitcontrols drei"
  - "add contactshadows drei"
  - "render html inside 3d drei"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Drei R3F Helper Primitives & Controls

Integrates production-tested Drei components: OrbitControls, Environment, Float, ContactShadows, Text3D, Html overlays, and Center bounding box alignments.

## When to Invoke
Invoke this skill whenever you need to:
- use orbitcontrols drei
- add contactshadows drei
- render html inside 3d drei

## Execution SOP & Rules
1. Utilize <Environment preset="city" /> for instant, professional ambient environment lighting.
2. Use <ContactShadows opacity={0.6} scale={10} blur={2} /> for realistic soft ambient occlusion on ground planes.
3. Anchor 2D HTML widgets to 3D bones or meshes with <Html center distanceFactor={15}>.
4. Center imported GLTF assets automatically with the <Center> layout wrapper.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.