multimodal-spatial-video-cloner · v4.4.1 · 2026-10-20 · sha256 d9699a9e89aab502
multimodal-spatial-video-cloner v4.4.1A
Immutable. This exact content never changes and is served at /api/v1/blob/d9699a9e89aab502.
---
name: multimodal-spatial-video-cloner
description: "Expert guide for reverse-engineering UI/UX interactions from screen-recordings and spatial video, extracting animation spring curves, and generating pixel-perfect Tailwind CSS v4 and Framer Motion code / Panduan ahli rekayasa balik interaksi UI/UX dari rekaman layar dan video spasial, ekstraksi kurva pegas animasi, dan pembuatan kode presisi Tailwind CSS v4 serta Framer Motion."
author: "Roedy Rustam"
version: "4.4.1"
---
# multimodal-spatial-video-cloner — vibes-plug Skill
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
---
<a name="english"></a>
## English
### Orchestration & Integration
Connects and orchestrates with `brainstorming`, `zero-to-prod-orchestrator`, `website-design-cloner`, `senior-frontend`, `tailwind-expert`, `svg-animation-motion-expert`, and `ui-ux-pro-max` to transform screen recordings, UI video captures, and spatial demos into production-ready React 19 and Tailwind CSS v4 code.
### Description
Production guide for analyzing UI/UX screen-recordings, dynamic software walkthroughs, and spatial video captures to reverse-engineer interface hierarchies, interaction flows, and physics-based motion. Extracts exact layout hierarchies, color palettes, spacing rhythm, spring physics (stiffness, damping, mass), and micro-interactions, emitting clean Tailwind CSS v4 components with Framer Motion or native CSS View Transitions.
### Trigger Conditions
Activate this skill when:
- Provided with a screen recording, GIF, or video walkthrough of a target user interface or web app.
- Replicating complex UI micro-interactions, gesture-driven drawer animations, or fluid card expansion flows.
- Converting recorded spatial or mobile interfaces into responsive desktop and mobile web experiences.
- Extracting exact animation timing, cubic bezier curves, and spring parameters from visual media.
---
### Core Concepts & Patterns
#### 1. Video-to-Code Extraction Pipeline
```
[Screen Recording / MP4 / WebM]
│
▼
[Keyframe Slicing & Optical Flow]
├── Layout Keyframes (0%, 25%, 50%, 75%, 100%)
└── Motion Vector Analysis (Acceleration & Spring Bounds)
│
▼
[Design Token & Physics Extraction]
├── OKLCH Colors, Typography, Border Radii
└── Spring Parameters: { stiffness: 350, damping: 28, mass: 0.8 }
│
▼
[Production Code Synthesis]
├── React 19 Functional Component
├── Tailwind CSS v4 Theme Utility Classes
└── Framer Motion / Native CSS Transition Specs
```
#### 2. Reverse-Engineered Spring Card Component (React 19 & Tailwind v4)
```tsx
import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
export interface SpatialCardProps {
title: string;
category: string;
description: string;
imageUrl: string;
}
export function ReverseEngineeredSpringCard({
title,
category,
description,
imageUrl
}: SpatialCardProps) {
const [isExpanded, setIsExpanded] = useState(false);
// Extracted physics from 60fps screen recording
const springTransition = {
type: 'spring' as const,
stiffness: 380,
damping: 30,
mass: 0.9
};
return (
<div className="relative p-4 flex justify-center items-center">
<motion.div
layout
transition={springTransition}
onClick={() => setIsExpanded(!isExpanded)}
className="w-full max-w-md bg-neutral-900 border border-neutral-800 rounded-3xl p-5 shadow-2xl cursor-pointer overflow-hidden focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:outline-none"
tabIndex={0}
role="button"
aria-expanded={isExpanded}
>
<motion.div layout className="relative h-48 w-full rounded-2xl overflow-hidden mb-4">
<img
src={imageUrl}
alt={title}
className="w-full h-full object-cover transition-transform duration-500 ease-out hover:scale-105"
/>
<span className="absolute top-3 left-3 bg-black/60 backdrop-blur-md text-emerald-400 text-xs font-semibold px-3 py-1 rounded-full border border-emerald-500/20">
{category}
</span>
</motion.div>
<motion.h3 layout className="text-xl font-bold text-white tracking-tight">
{title}
</motion.h3>
<AnimatePresence>
{isExpanded && (
<motion.p
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
className="text-neutral-400 text-sm mt-3 leading-relaxed"
>
{description}
</motion.p>
)}
</AnimatePresence>
<motion.div layout className="mt-4 flex items-center justify-between text-xs text-neutral-500">
<span>Click to {isExpanded ? 'collapse' : 'expand'}</span>
<span className="text-emerald-400 font-medium">Physics Verified</span>
</motion.div>
</motion.div>
</div>
);
};
```
---
### Best Practices
1. **Extract Timing from Keyframe Deltas**: Calculate milliseconds between animation start, midpoint apex, and settled state from video frame timestamps.
2. **Support Reduced Motion**: Always wrap spring animations in `useReducedMotion()` checks, falling back to instant opacity fades for accessibility compliance (WCAG 2.2).
3. **Use OKLCH Color Spaces**: Convert colors extracted from video pixels into native Tailwind v4 OKLCH tokens to preserve visual fidelity across HDR displays.
4. **Never Truncate Intermediate States**: Accurately capture enter, active, and exit transitions rather than snapping between binary states.
---
### Common Pitfalls to Avoid
| Anti-Pattern | Visual Artifact | Correct Approach |
| :--- | :--- | :--- |
| Guessing arbitrary `duration: 0.3s ease-in-out` | Feels robotic and unlike the fluid video source | Calibrate spring stiffness and damping from motion vectors |
| Missing focus outline on interactive motion cards | Fails accessibility audit for keyboard navigation | Include `focus-visible:ring-2 focus-visible:outline-none` |
| Overlooking responsive constraints seen in recording | Breaks on mobile viewports | Extract responsive layout shifts across desktop and mobile frames |
---
### Integration with Other Skills (MANDATORY)
- `website-design-cloner` — Complement static URL cloning with dynamic video micro-interaction extraction.
- `senior-frontend` — Integrate generated motion components into React 19 and Next.js 15 apps.
- `tailwind-expert` — Map extracted spacing and colors to Tailwind CSS v4 `@theme` directives.
- `svg-animation-motion-expert` — Implement complex vector path interpolations seen in recorded demos.
### Referenced By Orchestrators (MANDATORY)
- `brainstorming` — Added to "UI/UX & Design Systems" and "Penemuan & Audit" matrix rows.
- `zero-to-prod-orchestrator` — Integrated in Phase 1 (Discovery & PRD) and Phase 5 (Frontend & Design Systems).
---
<a name="bahasa-indonesia"></a>
## Bahasa Indonesia
### Integrasi Orkestrasi
Terhubung dan mengorkestrasi dengan `brainstorming`, `zero-to-prod-orchestrator`, `website-design-cloner`, `senior-frontend`, `tailwind-expert`, `svg-animation-motion-expert`, dan `ui-ux-pro-max` untuk mengubah rekaman layar, video antarmuka, dan demo spasial menjadi kode React 19 dan Tailwind CSS v4 siap produksi.
### Deskripsi
Panduan produksi untuk menganalisis rekaman layar UI/UX, video walkthrough software, dan rekaman spasial guna merekayasa balik hierarki visual, alur interaksi, dan fisika animasi. Mengekstrak tata letak, palet warna, ritme spasi, parameter pegas (*stiffness, damping, mass*), serta mikro-interaksi, menghasilkan komponen Tailwind CSS v4 dengan animasi Framer Motion atau CSS native yang presisi.
### Kondisi Pemicu
Aktifkan skill ini ketika:
- Diberikan rekaman video, GIF, atau tangkapan layar antarmuka pengguna atau aplikasi web.
- Mereplikasi mikro-interaksi UI yang rumit, animasi laci geser, atau ekspansi kartu yang dinamis.
- Mengonversi rekaman antarmuka aplikasi seluler/spasial menjadi halaman web responsif.
- Mengekstrak durasi animasi, kurva *cubic-bezier*, dan parameter fisika pegas secara akurat dari media visual.
---
### Konsep Inti & Pola Praktik
#### 1. Pipeline Analisis Video ke Kode
1. **Pemotongan Keyframe**: Mengambil frame pada titik 0%, 25%, 50%, 75%, dan 100% dari durasi interaksi.
2. **Kalkulasi Vektor Gerak**: Menghitung percepatan dan pantulan (*bounce*) elemen untuk menentukan parameter pegas (*spring physics*).
3. **Penyusunan Kode Produksi**: Menyusun komponen React 19 dengan utilitas Tailwind CSS v4 dan transisi Framer Motion atau CSS native.
#### 2. Kepatuhan Aksesibilitas
- Selalu sediakan fallback bagi pengguna dengan preferensi `prefers-reduced-motion`.
- Wajib menyertakan cincin fokus aksesibel (`focus-visible:ring-2`) pada elemen interaktif.
---
### Praktik Terbaik
1. **Hitung Waktu dari Timestamp Video**: Ukur milidetik transisi berdasarkan jarak antar frame untuk memperoleh kelembutan animasi yang identik.
2. **Gunakan Token OKLCH**: Manfaatkan gamut warna luas di Tailwind v4 untuk mempertahankan kecerahan warna yang terlihat di layar HDR.
3. **Pertahankan State Keluar (*Exit Transitions*)**: Pastikan elemen menghilang secara bertahap menggunakan `AnimatePresence`, bukan terputus seketika.
4. **Desain Responsif Sejak Awal**: Sesuaikan tata letak komponen agar tampil optimal di layar ponsel maupun desktop.
---
### Jebakan Umum yang Harus Dihindari
| Praktik Buruk | Dampak Buruk | Solusi Rekayasa |
| :--- | :--- | :--- |
| Mengira-ngira durasi animasi secara sembarangan | Gerakan terasa kaku dan tidak natural | Kalibrasi nilai stiffness dan damping dari video |
| Menghapus outline fokus pada kartu interaktif | Tidak lulus uji aksesibilitas navigasi keyboard | Berikan `focus-visible:ring-2 focus-visible:outline-none` |
| Mengabaikan layout layar kecil | Tampilan berantakan saat dibuka di perangkat mobile | Periksa perilaku responsif dari rekaman video |
---
### Integrasi dengan Skill Lain (WAJIB)
- `website-design-cloner` — Melengkapi kloning URL statis dengan ekstraksi mikro-interaksi dari video.
- `senior-frontend` — Integrasi komponen animasi ke aplikasi React 19 dan Next.js 15.
- `tailwind-expert` — Memetakan warna dan ukuran ke konfigurasi tema Tailwind CSS v4.
- `svg-animation-motion-expert` — Mengimplementasikan animasi path vektor yang tampak pada video.
### Direferensikan oleh Orchestrator (WAJIB)
- `brainstorming` — Tambahkan ke baris "UI/UX & Design Systems" dan "Penemuan & Audit" pada Matriks Orkestrasi.
- `zero-to-prod-orchestrator` — Tambahkan ke Fase 1 (Discovery & PRD) dan Fase 5 (Frontend, Design Systems & Mobile Apps).