@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/animated-component-libraries/SKILL.md

@@ -1,820 +0,0 @@
----
-name: animated-component-libraries
-description: "Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP. Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "wendymardigian-prog/Editor-IA-Pro"
----
-
-# Animated Component Libraries
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-## Overview
-
-This skill provides expertise in pre-built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production-ready, animated components that significantly accelerate development of modern, interactive web applications.
-
-**Magic UI** provides 150+ TypeScript components built on Tailwind CSS and Framer Motion, designed for seamless integration with shadcn/ui. Components are copy-paste ready and highly customizable.
-
-**React Bits** offers 90+ animated React components with minimal dependencies, focusing on visual effects, backgrounds, and micro-interactions. Components emphasize performance and ease of customization.
-
-Both libraries follow modern React patterns, support TypeScript, and integrate with popular design systems.
-
-## Core Concepts
-
-### Magic UI Architecture
-
-Magic UI components are built on three foundational technologies:
-
-1. **Tailwind CSS**: Utility-first styling with full customization via `tailwind.config.js`
-2. **Framer Motion**: Physics-based animations and gesture recognition
-3. **shadcn/ui Integration**: Follows shadcn conventions for CLI installation and component structure
-
-**Installation Methods**:
-
-# Via shadcn CLI (recommended)
-npx shadcn@latest add https://magicui.design/r/animated-beam
-
-# Manual installation
-
-# 1. Copy component code to components/ui/
-
-# 3. Add required CSS animations to globals.css
-
-# 4. Ensure cn() utility exists in lib/utils.ts
-```
-**Component Structure**:
-```
-```typescript
-// All Magic UI components follow this pattern:
-import { cn } from "@/lib/utils"
-import { motion } from "motion/react"
-
-interface ComponentProps extends React.ComponentPropsWithoutRef<"div"> {
-  customProp?: string
-  className?: string
-}
-
-export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
-  return (
-    <motion.div
-      className={cn("base-styles", className)}
-      {...props}
-    >
-      {/* Component content */}
-    </motion.div>
-  )
-}
-
-### React Bits Architecture
-
-React Bits emphasizes lightweight, standalone components with minimal dependencies:
-
-1. **Self-Contained**: Each component has minimal external dependencies
-2. **CSS-in-JS Optional**: Many components use inline styles or CSS modules
-3. **Performance-First**: Optimized for 60fps animations
-4. **WebGL Support**: Some components (Particles, Plasma) use WebGL for advanced effects
-
-**Installation**:
-
-# Manual copy-paste (primary method)
-
-# Copy component files from reactbits.dev to your project
-
-## Common Patterns
-
-### 1. Magic UI: Animated Background Patterns
-
-Create dynamic background effects with SVG-based patterns:
-
-```typescript
-import { GridPattern } from "@/components/ui/grid-pattern"
-import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
-import { cn } from "@/lib/utils"
-
-export default function HeroSection() {
-  return (
-    <div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
-      {/* Static Grid Pattern */}
-      <GridPattern
-        squares={[
-          [4, 4], [5, 1], [8, 2], [5, 3], [10, 10], [12, 15]
-        ]}
-        className={cn(
-          "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
-          "fill-gray-400/30 stroke-gray-400/30"
-        )}
-      />
-
-      {/* Animated Interactive Grid */}
-      <AnimatedGridPattern
-        numSquares={50}
-        maxOpacity={0.5}
-        duration={4}
-        repeatDelay={0.5}
-        className={cn(
-          "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
-          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
-        )}
-      />
-
-      <h1 className="relative z-10 text-6xl font-bold">
-        Your Content Here
-      </h1>
-    </div>
-  )
-}
-
-### 2. React Bits: Text Reveal Animations
-
-Implement scroll-triggered text reveals with BlurText:
-
-```jsx
-import BlurText from './components/BlurText'
-
-export default function MarketingSection() {
-  return (
-    <section className="py-20">
-      {/* Word-by-word reveal */}
-      <BlurText
-        text="Transform your ideas into reality"
-        delay={100}
-        animateBy="words"
-        direction="top"
-        className="text-5xl font-bold text-center mb-8"
-      />
-
-      {/* Character-by-character reveal with custom easing */}
-      <BlurText
-        text="Pixel-perfect animations at your fingertips"
-        delay={50}
-        animateBy="characters"
-        direction="bottom"
-        threshold={0.3}
-        stepDuration={0.4}
-        animationFrom={{ filter: 'blur(20px)', opacity: 0, y: 50 }}
-        animationTo={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
-        className="text-2xl text-gray-600 text-center"
-      />
-    </section>
-  )
-}
-
-### 3. Magic UI: Button Components with Effects
-
-Create interactive buttons with shimmer and border beam effects:
-
-```typescript
-import { ShimmerButton } from "@/components/ui/shimmer-button"
-import { BorderBeam } from "@/components/ui/border-beam"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-
-export default function CTASection() {
-  return (
-    <div className="flex gap-4 items-center">
-      {/* Shimmer Button */}
-      <ShimmerButton
-        shimmerColor="#ffffff"
-        shimmerSize="0.05em"
-        shimmerDuration="3s"
-        borderRadius="100px"
-        background="rgba(0, 0, 0, 1)"
-        className="px-8 py-3"
-      >
-        Get Started
-      </ShimmerButton>
-
-      {/* Card with Animated Border */}
-      <Card className="relative w-[350px] overflow-hidden">
-        <div className="p-6">
-          <h3 className="text-2xl font-bold">Premium Plan</h3>
-          <p className="text-gray-600">Unlock all features</p>
-          <Button className="mt-4">Subscribe</Button>
-        </div>
-        <BorderBeam duration={8} size={100} />
-      </Card>
-    </div>
-  )
-}
-
-### 4. React Bits: Interactive Dock Navigation
-
-Implement macOS-style dock with magnification effects:
-
-```jsx
-import Dock from './components/Dock'
-import { VscHome, VscArchive, VscAccount, VscSettingsGear } from 'react-icons/vsc'
-import { useNavigate } from 'react-router-dom'
-
-export default function AppNavigation() {
-  const navigate = useNavigate()
-
-  const dockItems = [
-    {
-      icon: <VscHome size={24} />,
-      label: 'Dashboard',
-      onClick: () => navigate('/dashboard')
-    },
-    {
-      icon: <VscArchive size={24} />,
-      label: 'Projects',
-      onClick: () => navigate('/projects')
-    },
-    {
-      icon: <VscAccount size={24} />,
-      label: 'Profile',
-      onClick: () => navigate('/profile')
-    },
-    {
-      icon: <VscSettingsGear size={24} />,
-      label: 'Settings',
-      onClick: () => navigate('/settings')
-    }
-  ]
-
-  return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2">
-      <Dock
-        items={dockItems}
-        spring={{ mass: 0.15, stiffness: 200, damping: 15 }}
-        magnification={80}
-        distance={250}
-        panelHeight={70}
-        baseItemSize={55}
-      />
-    </div>
-  )
-}
-
-### 5. React Bits: Animated Statistics with CountUp
-
-Display animated numbers for dashboards and landing pages:
-
-```jsx
-import CountUp from './components/CountUp'
-
-export default function Statistics() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 py-16">
-      {/* Revenue Counter */}
-      <div className="stat-card text-center">
-        <CountUp
-          start={0}
-          end={1000000}
-          duration={3}
-          separator=","
-          prefix="$"
-          className="text-6xl font-bold text-blue-600"
-        />
-        <p className="text-xl text-gray-600 mt-2">Revenue Generated</p>
-      </div>
-
-      {/* Uptime Percentage */}
-      <div className="stat-card text-center">
-        <CountUp
-          end={99.9}
-          duration={2.5}
-          decimals={1}
-          suffix="%"
-          className="text-6xl font-bold text-green-600"
-        />
-        <p className="text-xl text-gray-600 mt-2">Uptime</p>
-      </div>
-
-      {/* Customer Count */}
-      <div className="stat-card text-center">
-        <CountUp
-          end={10000}
-          duration={2}
-          separator=","
-          className="text-6xl font-bold text-purple-600"
-        />
-        <p className="text-xl text-gray-600 mt-2">Happy Customers</p>
-      </div>
-    </div>
-  )
-}
-
-### 6. Magic UI: Marquee Component for Infinite Scroll
-
-Create infinite scrolling content displays:
-
-```typescript
-import { Marquee } from "@/components/ui/marquee"
-
-const testimonials = [
-  { name: "John Doe", text: "Amazing product!", avatar: "/avatar1.jpg" },
-  { name: "Jane Smith", text: "Exceeded expectations", avatar: "/avatar2.jpg" },
-  { name: "Bob Johnson", text: "Highly recommend", avatar: "/avatar3.jpg" }
-]
-
-export default function Testimonials() {
-  return (
-    <section className="py-20">
-      <h2 className="text-4xl font-bold text-center mb-12">
-        What Our Customers Say
-      </h2>
-
-      {/* Horizontal Marquee */}
-      <Marquee pauseOnHover className="[--duration:40s]">
-        {testimonials.map((item, idx) => (
-          <div key={idx} className="mx-4 w-[350px] rounded-lg border p-6">
-            <p className="text-lg mb-4">"{item.text}"</p>
-            <div className="flex items-center gap-3">
-              <img src={item.avatar} alt={item.name} className="w-10 h-10 rounded-full" />
-              <p className="font-semibold">{item.name}</p>
-            </div>
-          </div>
-        ))}
-      </Marquee>
-
-      {/* Vertical Marquee */}
-      <Marquee vertical reverse className="h-[400px] mt-8">
-        {testimonials.map((item, idx) => (
-          <div key={idx} className="my-4 w-full max-w-md rounded-lg border p-6">
-            <p>{item.text}</p>
-          </div>
-        ))}
-      </Marquee>
-    </section>
-  )
-}
-
-### 7. React Bits: WebGL Background Effects
-
-Add high-performance animated backgrounds:
-
-```jsx
-import Particles from './components/Particles'
-import Plasma from './components/Plasma'
-import Aurora from './components/Aurora'
-
-// Particles Effect
-export default function ParticlesHero() {
-  return (
-    <section style={{ position: 'relative', height: '100vh' }}>
-      <Particles
-        particleCount={200}
-        particleColors={['#FF6B6B', '#4ECDC4', '#45B7D1']}
-        particleSpread={10}
-        speed={0.12}
-        moveParticlesOnHover={true}
-        particleHoverFactor={2}
-        particleBaseSize={100}
-        sizeRandomness={1.2}
-        alphaParticles={true}
-        cameraDistance={20}
-        className="particles-bg"
-      />
-      <div className="relative z-10 flex items-center justify-center h-full">
-        <h1 className="text-7xl font-bold text-white">
-          Welcome to the Future
-        </h1>
-      </div>
-    </section>
-  )
-}
-
-// Plasma Effect
-export default function PlasmaBackground() {
-  return (
-    <div className="relative min-h-screen">
-      <Plasma
-        color1="#FF0080"
-        color2="#7928CA"
-        color3="#00DFD8"
-        speed={0.8}
-        blur={30}
-        className="plasma-bg"
-      />
-      <div className="relative z-10 p-8">
-        <h1>Content with Plasma Background</h1>
-      </div>
-    </div>
-  )
-}
-
-// Aurora Effect
-export default function AuroraHero() {
-  return (
-    <div className="relative min-h-screen">
-      <Aurora
-        colors={['#FF00FF', '#00FFFF', '#FFFF00']}
-        speed={0.5}
-        blur={80}
-      />
-      <main className="relative z-10">
-        <h1>Cyberpunk Aurora Effect</h1>
-      </main>
-    </div>
-  )
-}
-
-## Integration Patterns
-
-### Integration with shadcn/ui
-
-Magic UI components are designed to work seamlessly with shadcn/ui:
-
-# Install shadcn/ui component
-npx shadcn@latest add button card
-
-# Install Magic UI component
-npx shadcn@latest add https://magicui.design/r/shimmer-button
-
-# Use together in components
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { ShimmerButton } from "@/components/ui/shimmer-button"
-import { BorderBeam } from "@/components/ui/border-beam"
-```
-**Utility Function Required** (`lib/utils.ts`):
-```
-```typescript
-import clsx, { ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-### Integration with Framer Motion
-
-Both libraries leverage Framer Motion for animations:
-
-```jsx
-import { motion } from "framer-motion"
-import { Magnet } from './components/Magnet'
-
-// Combine React Bits Magnet with Framer Motion gestures
-export default function InteractiveCard() {
-  return (
-    <Magnet magnitude={0.4} maxDistance={180}>
-      <motion.div
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        className="card p-6 rounded-xl shadow-lg"
-      >
-        <h3>Interactive Card</h3>
-        <p>Combines magnetic pull with scale animation</p>
-      </motion.div>
-    </Magnet>
-  )
-}
-
-### Integration with React Router
-
-Combine animated components with routing:
-
-```jsx
-import { AnimatePresence, motion } from "framer-motion"
-import { useLocation, Routes, Route } from "react-router-dom"
-import { Dock } from './components/Dock'
-
-export default function App() {
-  const location = useLocation()
-
-  return (
-    <>
-      {/* Animated Page Transitions */}
-      <AnimatePresence mode="wait">
-        <Routes location={location} key={location.pathname}>
-          <Route path="/" element={
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-            >
-              <HomePage />
-            </motion.div>
-          } />
-        </Routes>
-      </AnimatePresence>
-
-      {/* Persistent Dock Navigation */}
-      <Dock items={navItems} />
-    </>
-  )
-}
-
-### Combining Magic UI and React Bits
-
-Leverage strengths of both libraries in a single project:
-
-```jsx
-// Magic UI: Patterns and structural components
-import { GridPattern } from "@/components/ui/grid-pattern"
-import { BorderBeam } from "@/components/ui/border-beam"
-import { Marquee } from "@/components/ui/marquee"
-
-// React Bits: Interactive elements and effects
-import BlurText from './components/BlurText'
-import CountUp from './components/CountUp'
-import Particles from './components/Particles'
-
-export default function LandingPage() {
-  return (
-    <main>
-      {/* Hero with React Bits background + Magic UI pattern */}
-      <section className="relative h-screen">
-        <Particles particleCount={150} />
-        <GridPattern
-          squares={[[4,4], [8,2], [12,6]]}
-          className="opacity-30"
-        />
-        <BlurText
-          text="Next-Generation Platform"
-          className="text-7xl font-bold"
-        />
-      </section>
-
-      {/* Stats with React Bits CountUp */}
-      <section>
-        <CountUp end={10000} suffix="+" />
-      </section>
-
-      {/* Testimonials with Magic UI Marquee */}
-      <section>
-        <Marquee>
-          {/* Testimonial cards */}
-        </Marquee>
-      </section>
-    </main>
-  )
-}
-
-## Performance Optimization
-
-### Magic UI Performance Tips
-
-1. **Use CSS Masks Instead of Clipping**: More performant for large patterns
-
-```typescript
-<GridPattern
-  className="[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]"
-/>
-```
-2. **Reduce Animation Complexity**: Lower `numSquares` for AnimatedGridPattern on mobile
-```
-```typescript
-const isMobile = window.innerWidth < 768
-<AnimatedGridPattern
-  numSquares={isMobile ? 20 : 50}
-  duration={isMobile ? 6 : 4}
-/>
-```
-3. **Lazy Load Components**: Use React.lazy for heavy components
-```
-```typescript
-const AnimatedGridPattern = React.lazy(() =>
-  import("@/components/ui/animated-grid-pattern")
-)
-
-### React Bits Performance Tips
-
-1. **WebGL Components**: Reduce particle count on low-end devices
-
-```jsx
-const particleCount = navigator.hardwareConcurrency > 4 ? 300 : 150
-
-<Particles
-  particleCount={particleCount}
-  speed={0.1}
-/>
-```
-2. **Disable Animations on Reduced Motion**:
-```
-```jsx
-const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-<BlurText
-  text="Accessible text"
-  delay={prefersReducedMotion ? 0 : 100}
-  animateBy={prefersReducedMotion ? "none" : "words"}
-/>
-```
-3. **Optimize Marquee Content**: Limit items for better performance
-```
-```typescript
-<Marquee repeat={2}> {/* Instead of default 4 */}
-  {items.slice(0, 10)} {/* Limit items */}
-</Marquee>
-```
-4. **Use RequestIdleCallback for Non-Critical Animations**:
-```
-```jsx
-useEffect(() => {
-  if ('requestIdleCallback' in window) {
-    requestIdleCallback(() => {
-      // Initialize expensive animations
-    })
-  }
-}, [])
-
-## Common Pitfalls
-
-### 1. Missing Dependencies
-
-**Problem**: Component breaks due to missing `motion` or utility functions.
-
-**Solution**: Always install required dependencies and utilities:
-
-# React Bits WebGL components
-npm install ogl
-
-# Ensure cn() utility exists
-```typescript
-// lib/utils.ts
-import clsx, { ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-### 2. CSS Animations Not Applied
-
-**Problem**: Magic UI animations don't work after manual installation.
-
-**Solution**: Add required CSS animations to `globals.css`:
-
-```css
-/* app/globals.css */
-@theme inline {
-  --animate-ripple: ripple var(--duration, 2s) ease calc(var(--i, 0) * 0.2s) infinite;
-  --animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite alternate;
-  --animate-marquee: marquee var(--duration) linear infinite;
-  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
-}
-
-@keyframes ripple {
-  0%, 100% { transform: translate(-50%, -50%) scale(1); }
-  50% { transform: translate(-50%, -50%) scale(0.9); }
-}
-
-@keyframes shimmer-slide {
-  to { transform: translate(calc(100cqw - 100%), 0); }
-}
-
-@keyframes marquee {
-  from { transform: translateX(0); }
-  to { transform: translateX(calc(-100% - var(--gap))); }
-}
-
-@keyframes marquee-vertical {
-  from { transform: translateY(0); }
-  to { transform: translateY(calc(-100% - var(--gap))); }
-}
-
-### 3. Z-Index Conflicts
-
-**Problem**: Background patterns or effects cover foreground content.
-
-**Solution**: Use proper z-index layering:
-
-```jsx
-<div className="relative">
-  {/* Background (z-0 or negative) */}
-  <GridPattern className="absolute inset-0 -z-10" />
-
-  {/* Content (higher z-index) */}
-  <div className="relative z-10">
-    <h1>Content appears above pattern</h1>
-  </div>
-</div>
-
-### 4. Performance Issues with Multiple Animated Components
-
-**Problem**: Page lags when multiple heavy animations run simultaneously.
-
-**Solution**: Implement progressive enhancement and conditional rendering:
-
-```jsx
-import { useState, useEffect } from 'react'
-
-export default function OptimizedPage() {
-  const [enableHeavyEffects, setEnableHeavyEffects] = useState(false)
-
-  useEffect(() => {
-    // Check device capability
-    const isHighEnd = navigator.hardwareConcurrency > 4 &&
-                     !navigator.userAgent.includes('Mobile')
-    setEnableHeavyEffects(isHighEnd)
-  }, [])
-
-  return (
-    <section className="relative">
-      {enableHeavyEffects ? (
-        <Particles particleCount={300} />
-      ) : (
-        <GridPattern /> {/* Lighter alternative */}
-      )}
-
-      <div className="content">
-        {/* Page content */}
-      </div>
-    </section>
-  )
-}
-
-### 5. TypeScript Type Errors
-
-**Problem**: TypeScript complains about component props.
-
-**Solution**: Extend proper base types:
-
-```typescript
-// Magic UI pattern
-interface CustomComponentProps extends React.ComponentPropsWithoutRef<"div"> {
-  customProp?: string
-  className?: string
-}
-
-// React Bits pattern
-interface CustomProps extends React.HTMLAttributes<HTMLDivElement> {
-  customProp?: string
-}
-
-### 6. Tailwind Classes Not Applied
-
-**Problem**: Custom Tailwind classes in Magic UI components don't work.
-
-**Solution**: Ensure content paths include component directory:
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./components/**/*.{js,jsx,ts,tsx}", // Include components directory
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
-## Resources
-
-### Official Documentation
-- **Magic UI**: https://magicui.design
-- **React Bits**: https://reactbits.dev
-- **shadcn/ui**: https://ui.shadcn.com
-- **Framer Motion**: https://motion.dev
-
-### Key Scripts
-- `scripts/component_importer.py` - Import and customize components from both libraries
-- `scripts/props_generator.py` - Generate component prop configurations
-
-### References
-- `references/magic_ui_components.md` - Complete Magic UI component catalog with usage examples
-- `references/react_bits_components.md` - React Bits component library reference
-- `references/customization_guide.md` - Prop-based customization patterns for both libraries
-
-### Starter Assets
-- `assets/component_showcase/` - Interactive demo of all components
-- `assets/examples/` - Landing page sections, dashboard widgets, micro-interactions
-
-## Related Skills
-
-- **motion-framer**: For understanding underlying animation concepts used by both libraries
-- **gsap-scrolltrigger**: Alternative approach for scroll-driven animations
-- **react-spring-physics**: Alternative physics-based animation library
-- **threejs-webgl**: For 3D background effects as alternative to Particles/Plasma
-
-## Source
-
-Rewritten for AICUT from [`wendymardigian-prog/Editor-IA-Pro`](https://github.com/wendymardigian-prog/Editor-IA-Pro)
-(MIT), .agents/skills/animated-component-libraries/SKILL.md. The method is that skill's own; the way it runs is AICUT's.
-
-The repository holds 8 skills; this is the one its entry stands for.