---
name: "react-intersection-observer-lazy"
description: "Trigger animations, lazy-load media, and trigger infinite scrolling when elements enter viewport."
metadata:
  author: "Daniel Schmidt"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "trigger animation on scroll inview"
  - "lazy load component intersection observer"
  - "useinview hook react"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# react-intersection-observer Viewport Triggers & Lazy Load

Implements react-intersection-observer: useInView hook, configuring threshold and rootMargin buffers, triggerOnce optimization, and lazy-loading heavy interactive widgets.

## When to Invoke
Invoke this skill whenever you need to:
- trigger animation on scroll inview
- lazy load component intersection observer
- useinview hook react

## Execution SOP & Rules
1. Import hook: const { ref, inView } = useInView({ threshold: 0.1, triggerOnce: true, rootMargin: '100px' }).
2. Attach ref to container: <section ref={ref} className={inView ? 'opacity-100' : 'opacity-0'}>.
3. Set triggerOnce: true for entrance animations to avoid unnecessary recalculations during scroll.
4. For infinite scrolling: call fetchNextPage() inside a useEffect watching inView.

## 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.