fixing-motion-performance は何をしますか?
アニメーションパフォーマンスの問題(レイアウトスラッシング、コンポジタープロパティ、スクロール連動モーション、ぼかし効果など)を監査・修正します。アニメーションがカクつく、トランジションがギクシャクする、CSS/JSアニメーションのパフォーマンスをレビューする際に使用します。
アニメーションのパフォーマンス問題(レイアウトスラッシング、コンポジタープロパティ、スクロール連動モーション、ぼかし効果など)を監査・修正します。アニメーションがカクつく、トランジションがギクシャクする、CSS/JSアニメーションのパフォーマンスをレビューする際に使用します。
このスキルは、ウェブページやアプリケーションにおけるアニメーションパフォーマンスの問題を診断し、修正するための専門ツールです。主な対象は、レイアウトスラッシング(強制リフロー)、不適切なコンポジタープロパティの使用、スクロールに連動した重いアニメーション、過剰なぼかし効果など、ブラウザのレンダリングパイプラインに悪影響を与える一般的なパフォーマンスのボトルネックです。このスキルは、CSSアニメーションやJavaScript(特に`requestAnimationFrame`や`Web Animations API`)を使用したアニメーションのパフォーマンスレビューや、実際にユーザーが体感するカクつき(ジャンク)や引っかかり(スタッター)の修正に役立ちます。開発者はこのスキルを使うことで、Chrome DevToolsのPerformanceパネルを使ったプロファイリング結果の分析、`will-change`プロパティや`transform`・`opacity`といったコンポジターのみで処理されるプロパティへの変換提案、`IntersectionObserver`を用いたスクロール連動アニメーションの最適化など、具体的な改善策を得ることができます。このスキルは主にWeb開発環境(Claude Code、Cursor、Codexなど)での使用を想定しており、提供されるアドバイスは最新のブラウザ最適化手法に基づいています。
npx skills add https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performanceアニメーションパフォーマンスの問題(レイアウトスラッシング、コンポジタープロパティ、スクロール連動モーション、ぼかし効果など)を監査・修正します。アニメーションがカクつく、トランジションがギクシャクする、CSS/JSアニメーションのパフォーマンスをレビューする際に使用します。
This repo contains 3 individual skills — each has its own dedicated page.
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.
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.