ai-agents-skills

⚡ Install the full creative stack in one command

curl -sSL https://raw.githubusercontent.com/hoodini/ai-agents-skills/master/install.sh | bash

Installs 16 skills as one package: director (award-winning film + AI-production Bible, story-first workflow) · yuv-pilot (top-of-pyramid orchestrator) · yuv-design-system (brand) · yuv-decks (cinematic presentations) · yuv-viral-video (short-form) · video-edit · video-to-landing-page · parallax-landing-page · hyperframes + 4 companions · nano-banana-pro (AI images) · mermaid-diagrams. Plus ffmpeg / Node / Python / faster-whisper / hyperframes CLI / Python venvs / cross-tool symlinks to ~/.copilot/skills + ~/.agents/skills. Works on macOS, Linux, Windows (Git Bash/WSL).

After install, restart your agent and just type what you want:

"make a deck about <topic> for <audience>"
"build a stunning parallax landing page from this video: <path>"
"edit this video into a viral short: <path>"

The right skill auto-fires. Projects save to ~/Documents/yuv-projects/{decks,landings,videos}/<slug>/ so they're always findable.

🌐 Live examples: yuv.ai · effects.yuv.ai (HyperFrames effects catalog) · examples/parasites/ (three parallax landings: GitHub Desktop, Marcus the lion, Hope the cheetah)

🪜 The YUV.AI skills pyramid

The YUV.AI creative stack is a three-tier pyramid. You don't have to remember which skill does what — say what you want, the orchestrator routes.

                  ┌─────────────────────┐
                  │     yuv-pilot       │   ← top: intent → route
                  │  (orchestrator)     │
                  └──────────┬──────────┘
                             │
        ┌────────────────────┼────────────────────┐
        ▼                    ▼                    ▼
   ┌─────────┐        ┌─────────────┐      ┌──────────────┐
   │yuv-decks│        │ yuv-design- │      │  yuv-viral-  │
   │         │        │   system    │      │    video     │
   │ talks · │        │             │      │              │
   │ slides ·│        │ palette ·   │      │ short MP4s · │
   │ keynotes│        │ typography ·│      │ Reels · TikTok│
   │         │        │ 3 modes ·   │      │ MrBeast-paced │
   │         │        │ assets      │      │ editorial    │
   └─────────┘        └─────────────┘      └──────────────┘
   ┌─────────────┐    ┌─────────────────┐  ┌──────────────────┐
   │ video-edit  │    │ parallax-       │  │ video-to-        │
   │             │    │ landing-page    │  │ landing-page     │
   │ captioned · │    │                 │  │                  │
   │ Hebrew+EN · │    │ scroll-scrub ·  │  │ Apple-style ·    │
   │ transcript- │    │ video frames ·  │  │ sticky hero ·    │
   │ review flow │    │ github/lion/hope│  │ frames + sections│
   └─────────────┘    └─────────────────┘  └──────────────────┘
                             │
                             ▼ (the middle tier uses these)
   open-slide · hyperframes · gsap · nano-banana-pro · video-use ·
   slide-authoring · mermaid-diagrams · hyperframes-cli · website-to-hyperframes

                  Brand DNA — universal Fly High throughline:
                  flight metaphors · HUD + dials · phoenix mark ·
                  "Let's Fly High" watermark · Anton + JetBrains Mono
                  (palette is the chapter, motifs are the brand)

How to invoke

Three palette modes (only when applied)

The pyramid auto-applies only when YUV.AI brand context is signaled (my brand, for me, YUV.AI, etc.). Generic requests stay outside the system — Claude / Copilot / Cursor pick whatever fits the project.

🆕 NEW: cinematic-scrub-landing — golden landing page template

Drop in a hero video + logo + product photo. Get back a premium cinematic landing page with mouse-driven video scrubbing and a 5-beat narrative arc.

The hero video lives fixed across the whole page — moving the mouse left-right scrubs the timeline so the subject responds to the cursor. Below it, four fully-opaque sections each carry their own brand identity (bright primary-accent recipe / cream nostalgia album / dark contemplative pricing / red action finale) and walk the viewer through longing → joy → nostalgia → contemplation → action. Works for any language (RTL or LTR) and any subject — food, tech, animals, fashion, services, SaaS, wildlife, music, books, real estate.

What's baked in (every rule hard-won from a real production build):

• All-keyframes ffmpeg re-encode (-g 1 -keyint_min 1) so mouse-scrub is buttery, not stuttery
• The z-index trap documented as hard rule #1 (outer wrapper has NO bg class, or the video disappears)
• Per-section opaque identities — no monotone scrim through every section
• Language-aware typography trinity (Hebrew Rubik+Assistant+Suez One / English Anton+Inter+Caveat / Arabic Cairo+Tajawal+Reem Kufi / Japanese Noto Sans JP / etc.)
• RTL/LTR mirroring — hero panel side, cursor cue side, scroll-to-top position, arrow direction
• Six reusable visual primitives — polaroid, stamp, ribbon, highlight-circle, ghost-text, motif SVGs
• Real product photography wins over generated gradients — the skill always finds prominent placement for PRODUCT_IMAGE
• Clickable scroll-spy navbar + scroll-to-top button + favicon set from the logo
• 12-step verification gate before reporting done

Reference implementation: https://github.com/hoodini/bamba (Israeli RTL site for the snack "במבה" — the original build this skill was distilled from).

🔗 View cinematic-scrub-landing →

Pairs with parallax-landing-page (scroll-scrub frames, page never moves) and video-to-landing-page (Apple-style sticky hero with sections below) — pick cinematic-scrub-landing when the hero should respond to the cursor and the page below should tell a story.

🆕 NEW: yuv-design-system — single source of truth for visuals

Yuval Avidani's canonical design system, now public. Replaces the prior yuv-design skill (which only covered the Warm Editorial pink/yellow/bone family). Encodes:

• Two palette modes — Fly High (purple #5E17EB + yellow #FFEC00 + grey, the default for keynotes / dashboards / dev-facing UIs) and Warm Editorial (pink + yellow + bone, only for the Hope / bigcats / practical.yuv.ai brand family)
• Mandatory typography — Anton + Inter for English, Rubik + Assistant for Hebrew, letter-spacing 0 by default
• Signature components — PurpleBar, YellowUnderline, FlightHUD, CompassDial, CounterUp, HeroBg
• Brand assets bundled — 4 phoenix logos + studio portrait, with a 4-step asset-retrieval fallback chain for any machine
• Canonical link set + bio — auto-included on any footer / about / credits block
• Lessons-learned reference — 15 hardened production patterns (bilingual toggle, mobile hamburger threshold, Anton letter-spacing rules, yellow-span line-height ≥ 1.0, IntersectionObserver for GSAP catalogs, GH Pages cert nudge, …)
• Pre-flight checklist — 14 mandatory checks before any visual ships

🔗 View yuv-design-system →

Pairs with yuv-decks (cinematic presentation builder), yuv-viral-video (short-form video), and hyperframes (capture web → MP4). Project brand wins when explicitly specified; otherwise this skill fills the vacuum.

🆕 NEW: yuv-decks — opinionated cinematic deck builder

Builds open-slide presentation decks in Yuval Avidani's signature style: 4-act narrative arc (Boarding → Ascent → Cruise → Descent), Yuval voice (plain-language, no jargon, ≤8–12 word bullets, define every name), the flight-themed JourneyBar unifying every slide, reusable UseCase / CaseStudy / LessonsGrid templates, and an automatic orchestration of nano-banana cinematic hero images + Hyperframes video moments + Mermaid technical diagrams.

Inherits all palette/typography/components from yuv-design-system and locks the Decks mode (Fly High purple/yellow/grey — the dedicated palette for slides). For talks whose central metaphor IS literal flight, opt into the cinematic-flight mode (sky-blue + hot pink) — same arc and JourneyBar, different palette. Never falls through to Neon (web/app palette).

🔗 View yuv-decks →

Reference implementation: https://github.com/hoodini/build-agents-that-ship (the NICE pre-hackathon "Build Agents That Ship" deck, May 2026).

🆕 NEW: Parallax Landing Page Skill