WTFM

WTFM

F***ingマニュアルを書こう。
コーディングエージェント向けの、ユーザードキュメントを作成するプラグインです。スクリーンショットも含まれます。

インストール · クイックスタート · 使用例 · CLI · 公開 · FAQ · ドキュメント · ウェブサイト

_{plausible/analyticsからの実際の出力を、早送りで再生しています。実際の実行には数分かかります。}

WTFM は、ユーザードキュメントを作成するコーディングエージェント向けのプラグインです。Claude Code または Codex にガイドを依頼すると、ソースを読み取り、手順を平易な言葉で書き、実際のテンプレートと CSS からレンダリングしたスクリーンショットですべての画面を示します。アプリの起動も、手動でのキャプチャも、アカウントも不要です。

API リファレンスでも README でもありません。コードを読むことのない人、たとえばエクスポートボタンが見つからない顧客や、チームメンバーを招待する管理者のためのドキュメントです。

WTFM は以前、SupportPages Writer という名称でした。supportpages コマンドは引き続き wtfm のエイリアスとして機能し、既存のインストール、設定、SUPPORTPAGES_* 環境変数にも変更はありません。

一度ターミナルで設定すれば、あとはエージェントに依頼するだけです。

curl -fsSL https://wtfm.sh/install | bash

wtfm setup          # once per computer

wtfm init           # once per project

あなた → Claude Code： チームメイトを招待する手順を、イラスト付きガイドとして作成してください。

機能

• ソースをもとに作成します。 ルート、ボタンのラベル、操作フローは、入力した説明ではなくコードから取得するため、手順はユーザーが実際に目にする内容と一致します。
• アプリを起動せずにスクリーンショットを作成します。 モックアップを独自のマークアップ、スタイル、ブランディングから再構築し、ローカルのヘッドレス Chromium で PNG にレンダリングします。
• プレーンな Markdown 形式で出力します。 各記事は、画像と同じ場所にある index.md として作成されます。コードと一緒にコミットすることも、任意のドキュメントサイトに追加することもできます。
• 保存前にチェックします。 すべての記事について、構成、文章、スクリーンショットのチェックに合格してから保存します。
• すでに使っているエージェントを利用します。 独自のサブスクリプションとモデル設定で Claude Code または Codex を使用できます。
• ローカル優先です。 公開を選択しない限り、SupportPages.io にデータが送信されることはありません。

使用例

ほかのオープンソースのコードベースでも、同じワークフローを実行できます。各画像は、WTFM がそのリポジトリのソースコードをもとに作成したガイドから抜き出したスクリーンショットです。アプリは一度も実行されていません。

immich-app/immich · SvelteKit	paperless-ngx/paperless-ngx · Angular	maybe-finance/maybe · Rails
新しいアルバムの作成方法	タグを作成してドキュメントに適用する方法	新しいアカウントの追加方法

ヘルプセンター全体をご覧になりたい場合は、WTFM のドキュメントをご覧ください。掲載されている記事とスクリーンショットはすべて、WTFM がこのリポジトリをもとに作成したものです。

インストール

curl -fsSL https://wtfm.sh/install | bash

インストーラーは、チェックサム検証済みのリリースを専用の Node.js とともにダウンロードし、sudo を使わずに wtfm コマンドを ~/.local/bin にインストールして、PATH への追加を提案します。また、wtfm のエイリアスとして supportpages もインストールします。

必要なもの：

• ARM64 または x64 の macOS または Linux（Windows では WSL を使用してください）
• インストールしてサインイン済みの Claude Code または Codex
• Git

スクリーンショット用の Chromium は、wtfm setup を初めて実行したときにダウンロードされます。

**更新：**リリースは1日に1回、更新を確認してバックグラウンドでインストールします。今すぐ更新するには wtfm update を実行するか、SUPPORTPAGES_AUTO_UPDATE=0 を設定して自動更新を無効にしてください。

Codex へのインストール

WTFM は Codex プラグインとしても利用できます。PATH に npm とともに Node.js 22.12 以降を設定しておく必要があります。

codex plugin marketplace add SupportPages-io/wtfm
codex plugin add wtfm@supportpages

その後、新しい Codex セッションを開始してください。プラグインを初めて起動すると、npm パッケージがインストールスクリプトを実行せずにインストールされ、スクリーンショット用の Chromium がバックグラウンドでダウンロードされます。Codex は、/hooks にあるプラグインの2つのフックを実行前に確認するよう求めます。WTFM はこれらのフックがなくても動作します。更新するには、codex plugin add wtfm@supportpages をもう一度実行してください。

ソースからビルド

Node.js 22.12 以降、npm、Git が必要です。

git clone https://github.com/SupportPages-io/wtfm.git
cd wtfm
./install-cli.sh

これにより、チェックアウトしたコードがビルドされ、wtfm（および supportpages エイリアス）としてインストールされます。変更をプルした後は、./install-cli.sh をもう一度実行してください。

クイックスタート

ターミナルで一度設定すれば、あとはすべてコーディングエージェントで操作できます。

1. コンピューターをセットアップする

wtfm setup

これにより、Claude Code および／または Codex が接続され、SupportPages.io のライターが追加され、スクリーンショットレンダラーがダウンロードされます。どのように使うか尋ねられたら、アカウントを作成せずに自分のプロジェクトに記事を保存するを選択してください。

2. プロジェクトをセットアップする

cd path/to/your-product
wtfm init

記事の保存先と使用するモデルを選択してください。WTFM はその後、プロジェクトの構成、スタイル、ブランディングを一度分析するので、すべての記事はその分析結果をもとに作成されます。

3. コーディングエージェントに依頼する

プロジェクトで Claude Code または Codex を開き（すでに開いているセッションは再起動してください）、自然な言葉で記事の作成を依頼します。

チームメイトを招待する方法を、図解付きのガイドにしてください。

数分後、記事がプロジェクトに追加されます。

output/articles/how-to-invite-a-teammate/
├── index.md
├── block_open-settings.png
├── block_invite-form.png
└── block_send-invite.png

これでワークフローは完了です。ほかにも、次のように依頼できます。

どのようなヘルプ記事がありますか？

サインインリンクの有効期限が切れた場合のトラブルシューティング記事を書いてください。

CLI コマンド

セットアップと実行の継続には、ターミナルだけを使います。記事の執筆は コーディングエージェントで行います。

コマンド	内容
wtfm setup	このコンピューターをセットアップします。コーディングエージェントを接続し、レンダラーをインストールします
wtfm init	このプロジェクトをセットアップします。記事の保存先、使用するモデル、プロジェクトの分析を設定します
wtfm configure	このプロジェクトのエージェント、モデル、執筆スタイル、記事フォルダーを変更します
wtfm analyse	大きな変更の後にプロジェクト分析を再実行します（--refresh）
wtfm status	このプロジェクトのセットアップ状況と記事の進捗を表示します
wtfm doctor	必要なものがすべてインストールされ、接続されているか確認します
wtfm telemetry off	匿名の利用回数とクラッシュレポートの送信を停止します（on、status）
wtfm update	最新リリースをインストールします
wtfm uninit	このプロジェクトのセットアップ情報を削除します（復元用アーカイブは保持されます）
wtfm remove	コーディングエージェントとの接続を解除します（プロジェクトと記事は保持されます）
wtfm uninstall	このコンピューターから WTFM を削除します。--purge-config を指定すると、サインアウトし、プロジェクトとの紐付けも削除します

すべてのオプションを確認するには、wtfm --help を実行してください。status と doctor は --json を受け付けます。

記事について

• 保存先。 デフォルトでは output/articles/<slug>/ です。リポジトリ内に保存するには、init 時または wtfm configure で docs/help のようなフォルダーを選択してください。
• 執筆スタイル。 wtfm configure で、フレンドリー、簡潔、技術的、フォーマルから選択できます。
• スクリーンショット。 記事ごとに最大3枚です。メインの操作手順を優先し、任意の分岐はテキストで説明します。すべてのスクリーンショットには、「created automatically by supportpages.io」という小さな帯が入ります。

仕組み

1. setup でローカルの MCP サーバーと執筆エージェントを Claude Code または Codex に接続します。
2. init でエージェントがプロジェクトを一度マッピングします。フレームワーク、ルート、レイアウト、CSS、ブランディングを分析します。
3. 記事を依頼すると、執筆エージェントが関連するソースを読み、手順を書き、実際の UI を模した HTML モックアップとして各スクリーンショットを作成します。
4. モックアップをローカルの Chromium で PNG にレンダリングし、ソースと照合してから記事と一緒に保存します。

公開

ユーザーが読める場所を用意しましょう。 リポジトリ内の Markdown フォルダーは、見つけられなければ誰の役にも立ちません。同じチームが開発した SupportPages.io を使えば、WTFM が作成したガイドを、ユーザーが検索したり質問したりできるヘルプセンターにできます。独自ドメインとブランドで公開でき、製品の変更に合わせて最新の状態に保たれます。

• マージのたびに最新の状態に。 プルリクエストがマージされると、SupportPages.io が差分を読み取り、確認用の記事の更新案を作成します。
• 動画による解説。 各ガイドには、字幕付きで同じ手順をたどるナレーション動画を付けられます。
• 検索だけでなく、回答も。 読者は自分の言葉で質問でき、記事から導き出された回答と、出典へのリンクを受け取れます。
• 独自ドメインでのブランド設定、公開前に下書きを確認するためのエディター、コーディングエージェントからの直接公開も利用できます。

上記の機能は、SupportPages.io を使わなくてもすべて動作します。無料アカウントでは、最大 10 件の記事をホストできます。

ここでも同じパターンです。ターミナルで一度接続すれば、あとはエージェントで作業できます。

プロジェクトを接続する：

wtfm publish

ブラウザーでサインインするかアカウントを作成し、ヘルプセンターを選択します。すでに保存している記事は、下書きとしてアップロードされます。（新しいプロジェクトを設定していますか？ その場合は、wtfm init の実行中に SupportPages.io のヘルプセンターに公開する を選択してください。）

続けてエージェントに依頼する：

レポートのエクスポート方法を説明するガイドを書いてください。

新しい記事は下書きとしてヘルプセンターに追加され、エディターで確認するためのリンクが表示されます。公開は必ず別の手順で行います。エディターで 公開 をクリックするか、次のように依頼してください。

レポートのエクスポート方法を説明するガイドを公開してください。

コマンド	説明
wtfm publish	サインインし、ヘルプセンターを選択して、このプロジェクトで保存した記事をアップロードします
wtfm yolo	SupportPages.io 上でマニュアル全体を作成します（アカウントが必要です。下書きのみ）
wtfm login / logout	このコンピューターへのサインイン、またはサインアウトを行います
wtfm sync	ヘルプセンターの設定と記事の履歴を更新します

ヘルプセンターが GitHub や Bitbucket へのアクセスを必要とすることはありません。必要とするのは wtfm yolo のみです。

wtfm yolo：マニュアル全体を作成する

何もない状態から始めますか？ wtfm yolo は、製品に必要なすべてのガイドを計画して一度に作成します。お使いのコンピューターやコーディングエージェントの使用量を使うのではなく、SupportPages.io のサーバー上で作成します。

wtfm yolo

不足しているものがあれば、ブラウザーでのサインイン、ヘルプセンターの選択または作成、リポジトリの接続（コードから記事を作成するため、SupportPages.io には読み取りアクセスが必要です）を順に案内します。その後、プランで作成できる記事数を表示し、開始前に確認します（--yes を指定すると確認を省略します）。無料プランでは、最初の 10 件のガイドを作成できます。

進捗はリアルタイムで表示されます。セクション、おすすめの記事、そして作成された下書きの順に確認できます。すべて下書きとして保存され、エディターで公開するまでは公開されません。エディターへのリンクは最後に表示されます。Ctrl+C を押しても監視が停止するだけで、実行は続きます。wtfm status を実行すると、再び進捗を確認できます。実行に失敗した場合は、wtfm yolo を再度実行すると、作成済みの下書きを失わずに再開できます。

プライバシー

• ローカルプロジェクトから SupportPages.io に送信されるのは、匿名の利用回数とクラッシュレポートのみです（詳細は下記をご覧ください）。コーディングエージェントとそのモデルプロバイダーは、ほかのタスクと同様にソースコードを読み取ります。
• 公開時にアップロードされるのは記事、その画像、小規模な出所記録です。ソースコードがアップロードされることはありません。
• wtfm yolo は、そこで接続したリポジトリから SupportPages.io に書き込みます。SupportPages.io がコードにアクセスできるのは、このコマンドを実行した場合のみです。
• 認証情報は ~/.config/supportpages 内のプライベートファイルに保存され、リポジトリには保存されません。サインインすると、接続中のアカウントを表示するため、アカウントのメールアドレスも同じ場所に保存されます。
• **そのほかのネットワークリクエストで、コードや記事が送信されることはありません。**スクリーンショット用の Chromium は Google の Chrome for Testing ストレージからダウンロードされ、プラグインのパッケージは npm レジストリからインストールされます。プロジェクト独自のスタイルをコンパイルできない場合、解析時にその CSS フレームワーク（Bootstrap、Bulma、または Foundation）が jsDelivr CDN から取得されます。また、プロジェクトのスタイルがないモックアップをレンダリングする際は、Tailwind が CDN から読み込まれます。記事に任意の生成画像を追加する場合は、独自の OPENAI_API_KEY を設定している場合に限り OpenAI を使用します。WTFM がこのキーを設定することはありません。
• プロジェクトの解析は無人で実行されます。init と analyse は、エージェントの権限確認プロンプトを無効にしてエージェントを起動します（Claude Code では --dangerously-skip-permissions、Codex では --dangerously-bypass-approvals-and-sandbox）。記事の執筆では、エージェントの通常の承認プロンプトが表示されます。

プラグインのフック

Claude Code プラグインとしてインストールすると、WTFM は2つのフックを登録します。どちらも、Chromium のダウンロードを除き、ネットワーク経由で情報を送信することはなく、ツール呼び出しをブロックしたり変更したりすることもありません。

• SessionStart は、スクリーンショット用の Chromium がインストールされているか確認します。インストールされていない場合は、puppeteer の Chromium ダウンロードをバックグラウンドで一度だけ開始し、セッションに何も出力せずにすぐ戻ります。
• PostToolUse はすべてのツール呼び出し後に実行されますが、記事の執筆中（プロジェクト内に .rtfm-trace/CURRENT マーカーがある状態）でなければ何もしません。実行中は、ツール呼び出しごとに1行をプロジェクト内の .rtfm-trace/<article>.ndjson に追記します。記録されるのは、時刻、ツール名、ファイルパス、検索パターン、およびシェルコマンドの先頭500文字です。このトレースはコンピューター内に保存され、実行中に同じ作業が繰り返されていないか確認するために使用されます。何も出力せず、常に正常終了します。

匿名の使用回数とクラッシュレポート

WTFM は、どれだけのインストールが利用されているか、また何かが壊れたときにそれを知らせてくれるので、修正できます。プロジェクトを初めてセットアップするときに通知され、簡単に無効にできます。サインインせずに SupportPages.io に送信され、手元のコンピューターからサインインするまでは匿名のままです。サインイン後は、そのコンピューターからの使用状況がアカウントに紐づけられます。無効にすると、どちらの送信も停止します。

送信される情報

• このコンピューターで作成されたランダムなインストール ID（コンピューターの情報から生成されたものではありません）、WTFM のバージョン、コーディングクライアントの名前（例：claude-code）、OS、CPU アーキテクチャ、Node.js のメジャーバージョン。
• WTFM が初めて使用されたとき、アンインストールされたとき（設定が保持されたかどうかも含みます）、プロジェクトがセットアップされたとき（ローカルまたはホスト型）、記事や動画のチュートリアルが完了したときの回数：結果、保存先（ローカル、アップロード、SupportPages.io で生成）、失敗した場合のエラーコード、所要時間（秒単位）。同様に、wtfm yolo の実行開始時と終了時にも送信されます。
• 予期しないエラーに限り、エラーの種類とコード、および WTFM 外のすべてのパスを <external> に置き換えたスタックフレーム。ほかのコードからのメッセージは送信されません。

送信されない情報： コード、ファイル名やパス、記事のタイトルや内容、リポジトリ名やプロジェクト名、認証情報。IP アドレスは保存されません。手元のコンピューターからサインインしたときにもインストール ID が送信され、その後、そのコンピューターからの使用状況がアカウントに紐づけられます。

次のいずれかの方法で無効にできます

• コーディングエージェントに SupportPages のテレメトリーを無効にするよう依頼します。
• wtfm telemetry off を実行します。
• SUPPORTPAGES_TELEMETRY=0 または DO_NOT_TRACK=1 を設定します。

CI では常に無効です。wtfm doctor で有効かどうかとその理由を確認できます。SUPPORTPAGES_TELEMETRY_DEBUG=1 を設定すると、各レポートの送信時に stderr に出力されます。

よくある質問

これは API ドキュメントや README 向けですか？ いいえ。WTFM が作成するのは、製品を使う人向けのエンドユーザードキュメントです。スクリーンショット付きの手順ガイドやトラブルシューティングガイドを作成します。開発者向けドキュメントは、すでにエージェントがうまく扱えます。

Claude Code にドキュメントを書かせるだけではだめですか？ 適切な手順は書いてくれるでしょう。しかし、画面を見せることはできず、確認していないラベルを推測します。WTFM は、プロジェクト分析、独自の UI コードからスクリーンショットを生成するレンダラー、保存前に実行されるチェックを追加します。

費用はいくらですか？ WTFM は無料で、Apache 2.0 のライセンスです。記事の作成には、お使いの Claude Code または Codex のサブスクリプションを使用します。例外は wtfm yolo です。SupportPages.io 上で実行され、アカウントが必要です。無料プランでは 10 件のガイドを作成できます。

wtfm: command not found と表示されます。 新しいターミナルを開くか、インストーラーに表示された PATH コマンドを実行してください。

エージェントに SupportPages のツールが表示されません。 wtfm setup の実行中に開いていた Claude Code または Codex のセッションを再起動してください。

セットアップが完了しません。 wtfm doctor を実行して、報告された問題を修正してから、もう一度 wtfm init を実行してください。

記事の作成が途中で中断されました。 エージェントに続けるよう依頼するか、wtfm status を実行して中断した箇所を確認してください。

使用状況データは収集されますか？ 匿名の使用回数とクラッシュレポートのみです。コードや記事は収集されません。送信される情報の詳細や無効にする方法については、匿名の使用回数とクラッシュレポートを参照してください。

Windows で使用できますか？ はい。WSL 内で使用できます。

詳しくは supportpages.io/wtfm をご覧ください。

コントリビュート

バグ報告やプルリクエストを歓迎します。バグを報告する際は、OS、wtfm --version の出力、実行したコマンドとその出力を含めてください。認証情報や非公開のコードは削除してください。大きな変更の場合は、まず issue を作成し、進め方について合意してください。

コードに取り組むには：

npm ci
npm test
node scripts/cli.mjs --help

engine/ 内の記事エンジンは、エンジンのリリースごとに上流から同期されます。そのため、ここでレビューされた変更は、メンテナーが上流に反映します。

ライセンス

Apache 2.0。engine/ に含まれる UI スタイルシートには、それぞれ独自のライセンスが適用されます。詳細は NOTICE を参照してください。このライセンスは SupportPages の名称やロゴには適用されません。