Communitygithub.com

gravar-site

サイトの水平動画(PC画面、1440×900、30fps)を滑らかに録画し、マウスを動かして機能をクリックしながらクライアントや見込み客に送信します。スマホでリンクを開く予定だがPCでの見え方も確認したい場合に使用します。

gravar-site とは?

このスキルは、AIエージェントが指定されたWebサイトをヘッドレスブラウザで開き、マウスの動きやクリックをシミュレーションしながら滑らかな水平MP4動画(1440×900、30fps)を録画するためのものです。自動モードでは、サイトの上部からセクションごとにスクロールし、メニューボタン、タブ、FAQ、フォーム要素などを操作します。スクリプトはPlaywrightとffmpegを使って録画を実行するため、AIモデルは低コストなもの(Claude CodeではHaiku、Codexではminiモデルなど)で十分です。出力はMP4と、12フレームのサムネイルを含む「連絡票」画像で、納品前に視覚的な確認が必須です。フォーム送信や外部サイトへの遷移は禁止されており、自動チェックで品質を保証します。

対応✓Claude Code✓Codex CLI✓Cursor✓Antigravity✓Gemini CLI
npx skills add https://github.com/mkttpierre/site-demonstracao/tree/HEAD/skills/gravar-site

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

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

ドキュメント

Gravar site(サイト録画)

このスクリプトは、ヘッドレスブラウザでサイトを開き、フレームごとにクロックを進めて、アニメーションが重くても一切カクつかないMP4を生成します。録画するのはスクリプトであり、AIではありません。AIモデルはモードを選び、コマンドを実行し、最後に画像を確認するだけです。そのため、このスキルは最も安価なモデルで実行してください。

  • Claude Code: Haiku(/model haiku)または低負荷のSonnet。Opusは無駄です。
  • Codex / ChatGPT: miniモデルまたは低負荷モデル。
  • その他のエージェント(Gemini CLI, Antigravity, Cursor): 高速モデル(Flashまたは同等)。

サブエージェントを開いたり、他のエージェントに委任したりしないでください。タスクを説明するコストの方がコマンドを実行するコストよりも高くなります。

実行方法

node "${CLAUDE_SKILL_DIR}/scripts/gravar.mjs" --url https://site.com --saida "C:/caminho/entregas/site-pc.mp4"

初回実行時: cd "${CLAUDE_SKILL_DIR}/scripts" && npm install。スクリプトはPlaywrightのChromiumとffmpegを自動で探します。不足している場合は、エラーメッセージにインストール方法が表示されます。処理時間は1〜3分です。

出力: MP4と、ok、再生時間、サイズ、チェック結果、folha_de_contato(連絡票)を含むRESULTADO {...}の行。

2つのモード

  • 自動モード(デフォルト、スクリプトなし): サイト上部を表示し、メニューボタンにマウスを合わせます。セクションごとにスクロールダウンし、各セクションでタブを開き、Q&Aを開き、フォームオプションをクリックし、名前(「Maria」)と短いメッセージを入力し、ボタンやリンクにマウスを合わせます。最後にトップに戻ります。最大75秒(--max 60で短縮)。ほとんどのサイトで動作し、2種類の異なる構造でテスト済みです。
  • スクリプトモード(--roteiro roteiro.json): オペレーターが正確なシーケンスを希望する場合、または自動モードが何かを見逃した場合に使用します。フォーマットとアクションはreferencia/roteiro-exemplo.jsonを参照。セレクターはPlaywrightのもの(#id、.classe、text=Agendar、role=button[name="X"])です。

オプション: --viewport 1440x900、--fps 30、--bloquear dominio.com(ブロックを追加)、--sem-folha(連絡票なし)。

スクリプトが自動で守るルール

  • フォームは絶対に送信せず、WhatsApp、Instagram、その他のサイトも開きません。リンクにはマウスを乗せるだけです。
  • ネットワークはすべて許可します。マップ、フォント、埋め込み動画はこれによってのみ読み込まれます。サイトのドメインだけを許可して他をブロックすると、マップが壊れ、ブランドフォントが変更されます。
  • セクションを録画する前に、マップとiframeがリアルタイムで読み込まれるのを待ちます。
  • スクロールがガタついた場合、フォームが送信された場合、ウィンドウが開かれた場合、サイト外に移動した場合は拒否(ok: false)します。

納品前の確認(必須)

  1. folha_de_contato(連絡票)の画像(動画全体から12フレーム)を読む。確認項目: 白い画面、画像の欠落、フォントの変更、マップエラー、テスト用テキストの表示(XXXXXX、「lorem」、仮のCRPや電話番号)、カーソルの消失。
  2. 何か問題があれば、サイトを修正するかスクリプトを使用してください。問題を残したまま納品しないでください。
  3. 連絡票を削除(rmでfolha_de_contatoのパスを指定)し、オペレーターにMP4のパス、再生時間、サイズを伝えてください。

動画はクライアントのentregas/フォルダに保存されます。送信するかどうかはオペレーターの判断です。

制限事項

  • 水平動画のみ。垂直動画の場合は--viewport 390x844でサイズは変わりますが、タッチ操作はシミュレーションしません。将来の拡張として扱い、約束しないでください。
  • ログインが必要なサイト、または実際のデータでのみ開くサイト: スクリプトとプレビューURLを使用してください。
  • サイトを修正した後に再録画する場合は、最初に変更を公開してください(スクリプトは公開URLまたはサーバーが稼働しているhttp://localhost:portaを録画します)。

Individual skills in this repo

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

関連スキル