Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add roedyrustam/vibes-plug --skill multimodal-spatial-video-clonergit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/roedyrustam/vibes-plug/multimodal-spatial-video-cloner)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/multimodal-spatial-video-cloner"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/multimodal-spatial-video-cloner/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/multimodal-spatial-video-cloner"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/multimodal-spatial-video-cloner.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00094 | $0.02682 |
| Opus 5.5 | $0.00038 | $0.01073 |
| Sonnet 5.5 | $0.00019 | $0.00536 |
| Haiku 4.5 | $0.00009 | $0.00268 |
Grade A, and why
multimodal-spatial-video-cloner scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 231 lines — stays where its author put it; the contents beside it link to each section on GitHub.
multimodal-spatial-video-cloner — vibes-plug Skill
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
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago Changed ccc99722a459
- 13d ago First seen · 231 lines · 94 tokens per session scan A 22e597f0fe0f
multimodal-spatial-video-cloner is a skill published in the GitHub repository roedyrustam/vibes-plug (75 stars, last pushed today), licensed MIT. It adds 94 tokens to every session and 2,682 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-04.
Other skills, from other repositories
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
frontend-blueprint
AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity. Use when the…
shadcnui
Expert shadcn/ui assistance covering Radix UI primitives, Tailwind CSS styling, copy-paste architecture, and accessibility. Use when building modern React component systems and accessible design systems.
bootstrap
Expert Bootstrap 5 assistance covering 12-column grid system, flexbox utilities, components, and responsive breakpoints. Use when rapidly prototyping responsive, mobile-first web layouts.
tailwindcss
Expert Tailwind CSS assistance covering utility classes, responsive variants, arbitrary values, and configuration. Use when styling modern web applications with speed and consistency.
frontend-ui-engineering
Front-load UI construction decisions — component boundary and prop API, state placement, required states, responsiveness, accessibility. Use when creating or refactoring a component, page, or design-system primitive. Don't use for pure logic (/tdd), throwaway exploration (/prototype), or auditing finished UI…