What problem does it solve? Raw components copied from 21st.dev often violate project conventions: missing client boundaries, inconsistent icon libraries, redundant class-merge utilities, and Framer Motion scroll animations that conflict with a GSAP + Lenis animation stack. This Skill normalizes those components into copy-paste-ready code that follows the workspace rules. ## Core Features & Use Cases - Client Boundary Enforcement: Adds "use client" at the top of the file and validates no imports precede it. - Import Normalization: Converts class-merge helpers to cn from @/lib/utils and maps external icons to the nearest lucide-react equivalent. - Hybrid Animation Policy: Keeps Framer Motion only for micro-interactions (hover, tap, modals) and replaces scroll-driven patterns like useScroll and whileInView with a // TODO: Replace with GSAP ScrollTrigger via useGSAP() marker. - Use Case: You paste a raw 21st.dev hero section using whileInView reveals and Radix icons, and receive a cleaned TSX component with lucide icons, Tailwind-aligned styles, and GSAP migration TODOs plus a summary of changes. ## Quick Start Paste the raw 21st.dev TSX component code and ask to refactor it into this workspace's standards with the target filename.
