astroicers/visual-web-stack

¿Qué hace visual-web-stack?

Habilidad para Claude Code — Reglas y recetas de integración entre paquetes: React 19 + R3F + Anime.js + GSAP + Lenis + Zustand

Descripción general

Esta habilidad te permite combinar React 19, React Three Fiber (R3F), Anime.js, GSAP, Lenis y Zustand en un solo proyecto, con reglas claras para evitar conflictos y maximizar la compatibilidad. Es útil para crear experiencias visuales ricas, como animaciones encadenadas, transiciones 3D suaves y gestores de scroll avanzados.

Plataformas soportadas

• Claude Code (entorno de terminal)

Cómo funciona

Proporciona recetas de integración que establecen cómo cada biblioteca se comunica con React y entre sí. Por ejemplo:

- React 19: Aprovecha los nuevos hooks y capacidades de concurrencia.
- R3F: Renderiza objetos 3D en el canvas de React.
- Anime.js y GSAP: Controlan animaciones imperativas pero se integran con el ciclo de vida de React.
- Lenis: Gestiona el scroll suave y se sincroniza con animaciones.
- Zustand: Almacena estado global que puede ser consumido por cualquier componente.

Reglas clave

1. Orden de importación: Siempre importa React y Zustand primero, luego R3F, y finalmente las librerías de animación (Anime.js, GSAP).
2. Ciclo de vida: Usa useEffect para inicializar animaciones imperativas y useCallback o useMemo para optimizar renders.
3. Sincronización de scroll: Lenis debe instanciarse en un hook personalizado y ser consumido por todos los componentes que dependan del scroll.
4. Estado compartido: Zustand stores deben definirse en archivos separados y actualizarse mediante acciones que solo muten el estado cuando sea necesario.

Recetas de integración

React 19 + Zustand

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

React 19 + R3F

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
      <OrbitControls />
    </Canvas>
  )
}

Animaciones con GSAP o Anime.js

import { useEffect, useRef } from 'react'
import gsap from 'gsap'
// o import anime from 'animejs'

function AnimatedBox() {
  const ref = useRef()

  useEffect(() => {
    gsap.to(ref.current, { x: 100, duration: 2 })
  }, [])

  return <div ref={ref} style={{ width: 100, height: 100, background: 'blue' }} />
}

Lenis para scroll suave

import Lenis from 'lenis'
import { useEffect } from 'react'

function SmoothScrollApp() {
  useEffect(() => {
    const lenis = new Lenis()

    function raf(time) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }

    requestAnimationFrame(raf)

    return () => lenis.destroy()
  }, [])

  return <div>Contenido con scroll suave</div>
}

Notas adicionales

• Mantén las versiones de los paquetes actualizadas para evitar breaking changes.
• No mezcles Anime.js y GSAP en la misma animación si hay dependencias de orden temporal.
• Para animaciones complejas 3D, considera usar useFrame de R3F en lugar de librerías externas.

---

Este skill fue generado por astroicers y está optimizado para Claude Code.