jpskill.com
📦 その他 コミュニティ 🟡 少し慣れが必要 👤 幅広いユーザー

📦 Browser Form Fill

browser-form-fill

ブラウザのウェブフォームに、指定したフィールド名と値を自動で入力し、既知のフォームではテンプレートも活用するSkill。

⏱ よくある定型作業 半日 → 数分

📺 まず動画で見る(YouTube)

▶ 【Claude Code完全入門】誰でも使える/Skills活用法/経営者こそ使うべき ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

Fill a web form by mapping field-name → value, with optional template lookup from browser-templates for known forms

🇯🇵 日本人クリエイター向け解説

一言でいうと

ブラウザのウェブフォームに、指定したフィールド名と値を自動で入力し、既知のフォームではテンプレートも活用するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • Browser Form Fill の使い方を教えて
  • Browser Form Fill で何ができるか具体例で見せて
  • Browser Form Fill を初めて使う人向けにステップを案内して

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Claude が読む原文 SKILL.md(中身を展開)

この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。

Browser Form Fill

Fill a form using a structured field map ({"first_name": "Ada", "company": "..."}). When a browser-templates entry exists for the host, use it to resolve field names → CSS selectors automatically; otherwise resolve via the page accessibility snapshot.

When to use

  • Submitting a known form (signup, contact, checkout) where field names are stable.
  • Re-using a stored template for a recurring submission.
  • Authoring a new template for a site by recording the resolved selectors.

Steps

  1. Open a recorded session via browser-record.
  2. Resolve selectors:
    • Template path (--template <name>): pull {field_name → selector} from browser-templates.
    • Snapshot path: call browser_snapshot, walk the accessibility tree, match each input's accessible name / label to the field map keys.
  3. AIDefence PII gate: every value in the field map passes aidefence_has_pii before any keystroke; record pii_in_form: true in the session manifest. Do not record the values themselves in the trajectory; record only the field names + a redacted placeholder.
  4. Fill with browser_fill / browser_type / browser_select / browser_check per input type.
  5. Submit if --submit: locate the submit button via the snapshot, browser_click, then browser_wait for navigation.
  6. Persist the template if a new mapping was discovered:
    npx -y @claude-flow/cli@latest memory store --namespace browser-templates \
      --key "<host>:<form-name>" \
      --value "{field_map:{...}, submit_selector:..., post_submit_url_pattern:...}"
  7. Verify post-submit state if a verification snippet was provided in the field map's _assert key.

Caveats

  • Trajectory steps for fills MUST redact values. The PII gate is the contract.
  • For inputs that require typing simulation (e.g., autocomplete reactions), use browser_type (simulates keystrokes) rather than browser_fill (sets value programmatically). Record which one was used in the trajectory step.
  • Multi-step forms are a sequence of browser-form-fill invocations; chain them via the same session id.
  • If the form has a CAPTCHA, surface the request to the user — do not attempt to bypass.