アートディレクションと実装を融合し、リッチなモーション、オリジナル画像、GSAP、Three.jsなどを活用した、受賞級のプレミアムWebサイトを構築します。
このスキルは、Awwwards級のプレミアムでシネマティックなWebサイトを制作するための包括的なシステムです。マーケティング、エディトリアル、ポートフォリオ、ランディングページなど、印象的でモーション豊かなサイトをアートディレクションから実装まで担当します。主な特徴として、オリジナルの画像制作、GSAPを用いた高度なモーション（コレオグラフィー）、スムーススクロールエンジン、オプションでThree.jsシェーダーによる三次元表現、誠実なアイコン・ロゴ調達、実写アバター、アクセシビリティとパフォーマンスの保護策が含まれます。このスキルはClaude CodeやCursorなどのAIエージェント向けに設計されており、ユーザーが「Awwwards品質」「プレミアム」「シネマティック」「インタラクティブ」「ハイコンセプト」「モーション重視」のサイトを要求した際、または明示的に本システムを指定した際に自動的に適応されます。
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.