Communitygithub.com

motion-review

アニメーションを多用したWebページ（スクロールストーリー、WebGLヒーロー、フィルムスクラブ、シェーダーセクションなど）を、確認と修正のループでレビューし修正します。レビュー、批評、QA、ポリッシュ、または「リリース準備完了」を求められたとき、アニメーションランディングページやヒーローを公開する前に使用します。デスクトップとスマホサイズでセクションのスクリーンショットを撮り、10項目のルーブリックで採点し、ブロッキングQAチェック（コンソールエラー、オーバーフロー、リバーシブルスクロール、一時停止制御、動きの抑制、テキストサイズ、タップターゲット、白フラッシュ、フォント、altテキスト、フォーカス、ページ重量）を実施し、失敗した箇所を修正します。

motion-review とは？

motion-reviewは、アニメーションや動きを多用したWebページの品質を、スクリーンショット、ルーブリック評価、ブロッキングQAチェックの反復ループで徹底的にレビューし、修正するためのスキルです。開発者が「レビューして」「批評して」「QAして」「リリース可能にして」と依頼したときに使用します。このスキルは、Node.jsとPlaywrightを使用して、デスクトップ（1440×900）とスマートフォン（390×844）の2サイズで各セクションのスクリーンショットを自動撮影し、10項目のルーブリック（8点以上、かつ全項目7点以上が合格基準）で採点します。さらに、コンソールエラー、オーバーフロー、リバーシブルスクロール、動きの一時停止制御、prefers-reduced-motion対応、テキストサイズ、タップターゲットサイズ、白フラッシュ、フォントの読み込み、altテキスト、フォーカス順序、ページ重量など、12項目以上のブロッキングQAチェックを自動実行します。このスキルはClaude CodeなどのAIエージェント向けに設計されており、Claudeはスクリーンショットを確認し、問題点を特定してコードを修正し、再度スクリーンショットを撮って合格するまで繰り返す「ルック・アンド・フィックス」ループを実行します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iboss21/regescore-motioncraft-skills/tree/main/plugins/motioncraft/skills/motion-review
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

Motion review（モーションレビュー）

モーションページは、あなたのモニターで動くだけでは完成ではありません。固定されたルーブリックで高得点を獲得し、デスクトップとスマホの両方のサイズですべてのブロッキングチェックに合格し、コードを信頼するのではなく結果を目で確認したときに初めて完成です。

このスキルは3つのものを提供します：

  1. ルック・アンド・フィックスループ：スクリーンショットを撮り、採点し、最も悪いところを修正し、再度スクリーンショットを撮ります。
  2. 10の評価基準（1～10点）で構成されるルーブリック。5点、8点、10点の状態が定義されています：references/rubric.md。
  3. ブロッキングQAチェックリストとそれを計測するスタンドアロンスクリプト：references/qa-checklist.md、scripts/section-shots.mjs、scripts/qa-lite.mjs。

合格基準

  • ルーブリック平均点が8以上、かつすべての評価項目が7以上。
  • すべてのブロッキングチェックに合格（1440×900および390×844）。
  • 各セクションを両方のサイズで実際に目視確認していること。スクリーンショットなしのレビューは推測です。

ページが基準に達していない場合、ヒーローがどれだけ良く見えても、完成ではありません。

必要条件

  • Node 18 以降。
  • レビュー対象プロジェクトにPlaywrightがインストールされていること：npm i -D playwright の後 npx playwright install chromium。または、playwright-coreを使用してインストール済みのChromeに --chrome "<chromeへのパス>" オプションを指定することもできます。スクリプトは、Windows、macOS、Linuxの一般的な場所から自動的にChromeまたはEdgeを見つけます。
  • オプション：連絡シート（コンタクトシート）用に npm i -D sharp。これがなくても個々のPNGは生成されます。
  • プロジェクトフォルダからスクリプトを実行してください。スクリプトは最初に実行元フォルダ、次にスクリプト自身の隣でPlaywrightとsharpを探すため、プロジェクトに一度インストールすれば十分です。以下のスクリプトパスはこのスキルのフォルダからの相対パスです。Claude Codeはスキル読み込み時にそのフォルダを表示します。手動でコピーした場合は、例えば ~/.claude/skills/motion-review/ となるため、フルコールは node ~/.claude/skills/motion-review/scripts/qa-lite.mjs ./site のようになります。

?shot=N の規約

スクリプトは index.html?shot=N を開き、ページがN番目のセクションに移動することを期待します。以下のコードをページに一度追加してください（数行のコストで、すべてのレビューを再現可能にします）：

// QAフック：?shot=N は読み込み後にセクションNをビューポート中央にスクロールします。
const shot = new URLSearchParams(location.search).get("shot");
if (shot !== null) addEventListener("load", () => {
  const marked = document.querySelectorAll("[data-shot]");
  const s = (marked.length ? marked : document.querySelectorAll("section"))[+shot];
  if (s) scrollTo(0, s.getBoundingClientRect().top + scrollY + s.offsetHeight / 2 - innerHeight / 2);
});

フィルムや一度だけ再生されるイントロの場合、?shot が存在するときにタイムラインを最終状態にジャンプさせ、スクリーンショットがフレーム1ではなく完成フレームを表示するようにしてください。タイムドフィルムについては、アナリティクススキルの公正なキャプチャ方法を参照してください：../motion-analytics/references/reference-grading.md。

ルック・アンド・フィックスループ

ページが合格基準を満たすまで、このループを実行します。各パスでは、一度に多くの小さな問題を修正するのではなく、最も害の大きな問題を最初に修正してください。

1. スクリーンショットを撮る

node scripts/section-shots.mjs ./my-site 6 ./qa/shots

これにより、./my-site がローカルポートで提供され、index.html?shot=0 から ?shot=5 までがデスクトップとスマホのサイズで開かれ、d0.png ... d5.png、p0.png ... p5.png が書き出されます。sharpがインストールされている場合は desk-sheet.png と phone-sheet.png も生成されます。実行中に見つかったすべてのページエラーとコンソールエラーを表示します。

2. 確認する

まず2枚の連絡シートを開き、次に個々のフレームを確認します。セクションごとに以下の点を問いかけてください：

  • このフレームにページの唯一のアイデアが見えるか、それとも凡庸なセクションか？
  • スマホのフレームは独自の構図を持っているか、それともデスクトップを無理に押し込めただけか？
  • 画像の目立つ部分にテキストが重なっていないか？
  • 切り取られていたり、重なっていたり、空白だったり、まだ読み込み中のものはないか？
  • すべてのセクションが同じブランドに見えるか？

採点する前に、見たことを平易な言葉で書き留めてください。「スマホのヒーローの見出しが被写体の顔を隠している」は有用です。「良さそう」は有用ではありません。

3. チェックする

node scripts/qa-lite.mjs ./my-site

ブロッキングチェックごとにPASSまたはFAILを、計測値とともに表示します。FAILがある場合はリリースをブロックします。各チェックの意味、スクリプトの計測方法、通常の修正方法については references/qa-checklist.md を参照してください。

一部のチェックは人間による確認が必要です：一時停止制御がすべての動きを止めるか、高速フリング後にスクロールの逆再生がクリーンに行われるか、サウンドオンでページの感触が正しいかなど。チェックリストではこれらを手動とマークしています。必ず実施してください。

4. 採点する

スクリーンショットと実際のページ操作から、10のルーブリック基準すべてを採点します。references/rubric.md のアンカーを使用してください。コードの意図ではなく、画面に表示されているものに対して採点します。採点ごとに1文の根拠を書き添えてください。

5. 最も悪いところを修正する

最低点または最初のFAILを選びます。症状ではなく原因を修正してください：スマホでテキストが読めない場合、画像を縮小するのではなく、タイプスケールとスリム（半透明オーバーレイ）を修正してください。変更は小さく、局所的に保ってください。

6. 繰り返す

再度スクリーンショットを撮り、再度確認し、触れた基準を再評価します。合格基準を満たしたら終了します。新しいページでは通常3～5回のパスが必要です。

レビューレポート形式

レビューを報告するときは、結果を経時的に比較できるよう、以下の形式を使用してください：

ページ: <名前>   パス: <n>   日付: <yyyy-mm-dd>
ルーブリック: アイデア 8, クラフト 7, モーション 9, ... 平均 8.1, 最低 7 (クラフト)
ブロッキング: 12中11 PASS。FAIL: タップターゲット (スマホで44px未満が3つ: .nav a, #prev, #next)
確認済み: デスクトップ6、スマホ6フレーム
最悪の問題: <1文>
適用した修正: <1文>
次へ: <1文>

経験則

  • 採点はスマホ優先。 ほとんどの訪問者はスマホから来ます。デスクトップで9点、スマホで6点のページは6点です。
  • 止められないモーションはバグです。 5秒以上動くものには、目に見える一時停止コントロールが必要であり、動きの抑制（prefers-reduced-motion）設定では完全で構成されたページを提供しなければなりません。
  • スクロールは双方向に動作する必要があります。 上にスクロールすると、下にスクロールした結果が、どの速度でもクリーンに元に戻らなければなりません。
  • サイレントエラーは禁止。 コンソールエラーが1つでもあればFAILです。たとえページが正常に見えてもです。通常、フォールバックパスが壊れていることを意味します。
  • 静止フレームと動いているフレームの両方を評価する。 スクリーンショットは構図を示しますが、タイミングを評価するには実際にページを使用する必要があります。両方を行ってください。

関連

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

motion-analytics

Measure the quality and performance of a motion-heavy web page (WebGL, scroll film, shader heroes, particle scenes) and compare it fairly against a reference. Use when asked to profile, speed up, budget, benchmark or grade an animated page, when a scene stutters or drains phones, when choosing quality tiers or DPR caps, or when judging "how close is our page to the reference". Covers frame-time budgets with p50 and p95, a rolling quality ladder, page and texture weight budgets, Web Vitals for motion sites, and reference grading with side-by-side sheets and independent graders.

motioncraft-builder

Build a cinematic, award-level motion website or hero section (scroll-driven three.js scenes, film-led heroes, depth-photo parallax, synthesized sound, live 3D callouts) from one idea taken from the customer's own world. Use when someone asks for a premium animated landing page, a scroll story, a 3D product page, a video hero, an "Awwwards-style" or "expensive feeling" site, or wants a brief turned into a beat sheet, a grey-boxed mechanic and a dressed, accessible, fast page. Do not use for flat SaaS layouts, simple CSS fade-ins or static brochure pages.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

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.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

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...

community

affaan-m/everything-claude-code

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.

community