독특하고 모션이 풍부한 마케팅, 에디토리얼, 포트폴리오, 랜딩 웹사이트를 디자인하고 구현합니다. 오리지널 참고 이미지, 인상적인 히어로 섹션, GSAP 안무, 하나의 부드러운 스크롤 엔진, 선택적 Three.js 셰이더, 정직한 아이콘 및 로고 출처, 사진 아바타, 접근성 및 성능 보호 기능을 갖춘 Awwwards 수준의 프리미엄 웹사이트를 제작할 때 사용하세요.
이 기술은 개발자와 AI 에이전트가 Awwwards 수준의 시네마틱하고 모션 중심적인 웹사이트를 제작하도록 설계된 종합적인 비주얼 및 모션 시스템입니다. GSAP을 사용한 정교한 애니메이션, 부드러운 스크롤 엔진, 선택적 Three.js 셰이더를 통합하여 독창적이고 참조 이미지에서 영감을 받은 비주얼을 구현합니다. 사용자가 프리미엄, 인터랙티브, 하이컨셉, 또는 모션 리드 웹사이트를 요청할 때 활성화되며, 성능 최적화, 접근성, 정직한 아이콘/로고 소싱, 사진 아바타 사용을 보장합니다. Cursor, Claude Code, Codex와 같은 다양한 AI 코딩 플랫폼과 호환되며, 마케팅, 에디토리얼, 포트폴리오, 랜딩 페이지 등 다양한 웹 프로젝트에 적용 가능합니다.
npx skills add MengTo/Skills독특하고 모션이 풍부한 마케팅, 에디토리얼, 포트폴리오, 랜딩 웹사이트를 아트 디렉션하고 구현합니다. 오리지널 참고 이미지에서 영감을 받은 비주얼, 인상적인 히어로 섹션, GSAP 안무, 하나의 부드러운 스크롤 엔진, 선택적 Three.js 셰이더, 정직한 아이콘 및 로고 출처, 사진 아바타, 접근성 및 성능 보호 기능을 갖추고 있습니다. 사용자가 Awwwards 수준의 프리미엄, 시네마틱, 인터랙티브, 하이컨셉, 또는 모션 중심 웹사이트를 요청하거나, 이 비주얼 및 모션 시스템을 명시적으로 요청할 때 사용하세요.
This repo contains 10 individual skills — each has its own dedicated page.
Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography, zoom-follow framing, ffprobe/thumbnail verification, and optional native recording compatibility checks. Use when the user asks to record or re-record browser actions, show cursor clicks and zooms, make Dribbble/UI inspiration or product demo recordings, or asks whether Codex, Playwright, or an MCP can produce a natural browser demo video.
Generate ElevenLabs text-to-speech audio from scripts or inline text using local voice profiles. Use when the user asks for ElevenLabs, text-to-speech, TTS, narration, voiceover, speech audio, or voice generation; load voice names, voice ids, emails, owners, and account-specific defaults only from local config outside the skill.
Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.
Turn a reference video into a super detailed recreation or inspiration prompt. Use when the user provides, mentions, uploads, links, or points to a video and asks to analyze the design, UI, animations, transitions, scroll interactions, typography, colors, assets, WebGL/Three.js, storytelling, section-by-section behavior, or to create a prompt/article that recreates the page, app, interaction, or motion system.
Create an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use when asked for scroll-reveal, animate-on-scroll, or sequencing element animations when they enter the viewport.
Use when designing or implementing product-grade web motion like Stripe, Linear, Apple, and Vercel. Covers motion principles, easing/duration defaults, choreography patterns, scroll/hover interactions, performance, accessibility (reduced motion), and implementation guidance.
Create premium cinematic web motion systems with GSAP, ScrollTrigger, and Lenis. Use for luxury editorial websites, creative studio portfolios, Awwwards-style interactions, smooth scroll reveals, staggered text, parallax, pinned sections, magnetic hover states, custom cursors, and mouse-reactive layered movement.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.
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.