대화 트랜스크립트나 스크린샷을 기반으로 구성 가능한 채팅 모션 오버레이를 생성합니다. 일반 말풍선 장면, 앱 스타일의 채팅 컨테이너, 옵션 장치 프레임, 사전 설정 또는 업로드된 아바타, 닉네임 표시 규칙, 투명 비디오 지원 Remotion 번들을 포함합니다. Codex가 Douyin, 데모 비디오, 스토리 재연, 소셜 메시지 증명 장면 또는 Hyperframe 및 Remotion 워크플로우에 임베드 가능한 알파 오버레이를 위한 재사용 가능한 숏폼 채팅 클립을 만들어야 할 때 사용하세요.
이 스킬은 주어진 채팅 대화 기록이나 스크린샷을 분석하여 동적인 채팅 모션 오버레이를 생성하는 전문 도구입니다. 개발자나 AI 에이전트 사용자가 트랜스크립트를 입력하면, 스킬은 말풍선 중심의 일반 장면부터 실제 메신저 앱과 유사한 스타일의 컨테이너, 사용자 지정 닉네임 표시 규칙, 사전 설정 또는 업로드 가능한 아바타를 포함한 시각적으로 풍부한 출력물을 만들어냅니다. 또한 옵션으로 장치 프레임을 추가하거나 투명 배경의 비디오(알파 채널)를 지원하는 Remotion 번들을 생성하여, 최종 결과물을 Douyin 같은 숏폼 플랫폼, 데모 영상, 스토리 재현, 또는 Hyperframe 및 Remotion 기반의 고급 미디어 워크플로우에 직접 활용할 수 있게 합니다. 결과물은 재사용이 용이하며, Codex와 같은 AI 코딩 에이전트 환경에서 쉽게 통합되어 빠른 프로토타이핑과 콘텐츠 제작을 가능하게 합니다.
npx skills add https://github.com/nexu-io/open-design/tree/main/skills/chat-motion-overlay트랜스크립트 또는 스크린샷에서 구성 가능한 채팅 모션 오버레이를 생성합니다. 여기에는 일반 말풍선 장면, 앱 스타일의 채팅 컨테이너, 옵션 장치 프레임, 사전 설정 또는 업로드된 아바타, 닉네임 표시 규칙, 투명 비디오 지원 Remotion 번들이 포함됩니다. Codex가 Douyin, 데모 비디오, 스토리 재연, 소셜 메시지 증명 장면 또는 Hyperframe 및 Remotion 워크플로우에 임베드 가능한 알파 오버레이를 위한 재사용 가능한 숏폼 채팅 클립을 만들어야 할 때 사용하세요.
This repo contains 20 individual skills — each has its own dedicated page.
Use this plugin when the user wants a video concept, storyboard, shot list, prompt pack, or render-ready motion brief for a product, campaign, or explainer.
Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".
Create talking head videos and lip sync audio to video via fal.ai. Useful for explainer avatars, multilingual dubbing previews, and social cuts.
Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
Programmatic video creation with React. Useful for branded explainers, social cuts, dashboards-to-video, and reproducible motion graphics.
Creator-facing social media analytics dashboard in a single HTML file. A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI cards (followers, engagement rate, likes, reposts), a follower-growth chart, a "top post this week" preview, and a trending topics / top comments side panel. Use when the brief mentions a "social media dashboard", "creator analytics", "social analytics", or names specific platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together with metrics like followers, engagement, likes, reposts.
Generate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration.
Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design.
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
Short-form video generation skill — 3-10 second clips for product reveals, motion teasers, ambient loops. Defaults to Seedance 2 but works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4 saved to the project folder. When the workspace also ships an interactive-video / hyperframes skill, prefer composing several short shots into a single timeline rather than one long monolithic clip.
Use this plugin when the user wants a "Bold Poster Frame" HyperFrames motion video — A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.
Use this plugin when the user wants a "Bold Signal Frame" HyperFrames motion video — Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.
Use this plugin when the user wants a "Build Minimal Frame" HyperFrames motion video — Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
Use this plugin when the user wants a "Creative Voltage Frame" HyperFrames motion video — Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.
Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.
Use this plugin when the user wants a "Product Promo · 30s" HyperFrames motion video — Multi-scene 30-second product promo: problem-type intro, brand reveal, benefits flowchart, product surfaces, value pillars, foundation, CTA outro. Forked from Nate Herk's hyperframes-student-kit (linear-promo-30s); brand-specific copy + assets replaced with generic placeholders.
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.