mcpField
S
show-me-artifact

show-me-artifact

github.com/yahyabedirhanドキュメント257 回インストール6 日前に更新
リポジトリ

show-me-artifact について

レポートや意思決定事項を、長いチャットやローカル HTML ではなくブラウザーで読めるアーティファクトページとして公開するスキルです。状況、比較、決定事項を用途に応じて表示し、内容の更新と再公開にも対応します。

主な機能

  1. 01レポートをアーティファクトページとして公開
  2. 02状況や比較に合わせた表示形式
  3. 03選択肢と根拠を含む決定カード
  4. 04ページデータの更新と再公開

活用シーン

  1. 01ブラウザーで読めるレポートの共有
  2. 02複数の選択肢の比較提示
  3. 03更新されるレポートでの決定の収集と記録

MCP 対応

Claude の `Artifact` ツールでブラウザー向けページを公開します。利用できない場合は、`/show-me` で簡潔な HTML ファイルを作成するよう README で案内されています。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/yahyabedirhan/skills --skill show-me-artifact

インストール後、Claude Code で/show-me-artifactを入力して読み込まれたか確認します。

詳細

長いチャットメッセージやローカルの HTML ファイルではなく、ユーザーがブラウザーで読む単一の成果物ページとしてレポートを公開します。これには Claude の Artifact ツールが必要です。利用できない場合は、代わりに /show-me を使って、要点を絞った HTML ファイルを 1 つ作成してください。

手順

  1. ビューと原則を確認するために /show-me を読み込み、 そこで開くローカルの HTML ファイルの代わりに、それらを単一の成果物ページとして公開します。

  2. レポートまたは意思決定セットごとにページを 1 つ作成します。 ユーザーが別のテーマについて尋ねた場合は、セクションを追加せず、新しいページを作成します。まず、読者が最初に知る必要のある内容、つまり現状と、判断待ちの事項の数を示します。その後、各ポイントに適したビューを選びます。

    • 進捗は、各チェックポイントに完了・進行中・待機中の状態を付けたチェックポイント一覧と進捗メーターで示します。
    • 多数の項目の状態は、ステータスごとにグループ化したツリーで示し、各末端項目に理由を 1 行で添えます。
    • 実行、選択肢、またはバージョンは、表で並べて比較します。
    • 未決定の事項は、それぞれ意思決定カードにします。

    読者の理解や判断に役立つ情報だけをページに載せ、各ポイントの詳細はファイルへのリンクで示します。

  3. ファイルを開いたり、前の内容までスクロールしたりせず、カードだけで判断できるように、各意思決定カードを作成します。 決定する内容、重要な理由、主張を裏付ける最小限の視覚資料、選択肢、推奨として示す選択肢を記載します。各カードには短い ID(D1、D2)を付け、各選択肢には文字(A、B、C)を付けます。これにより、ユーザーは「D3: B」のように 1 行で回答できます。

  4. ページを作成し、Artifact ツールで公開します。 ページの内容を 1 行で説明し、リンクをユーザーに伝えます。

    • ページが更新される場合、 たとえば各チェックポイントでレポートを更新する場合:
      • データファイル: data.json にコンテンツを保存し、プロジェクトの .scratch/ に置きます。セッションのスクラッチパッドはセッション終了時に削除されるため、後のセッションで再構築できるようにする必要があります。
      • ジェネレーター: 隣に置いた build.py で HTML に変換します。build.py を書く前に artifact-design を読み込み、再構築のたびにテーマとスマートフォン幅への対応ルールが反映されるようにします。
      • 編集: 再構築すると HTML が上書きされるため、変更はすべて data.json または build.py で行います。
      • 再公開: 同じファイルパスから公開し、ユーザーがすでに持っているリンクに新しいバージョンが表示されるようにします。
    • 作業を引き継ぐ場合、またはプルリクエストからページへリンクする場合は、 ページの URL とデータファイルの場所を記載します。後のセッションでは、その URL に対して Artifact ツールの read アクションを使ってページを読み込み、新しいページを作成する代わりに、url にその URL を設定して再構築・公開します。
  5. ユーザーがカードに回答したら、 その回答に沿って作業し、次回の再公開時にページ上でそのカードを決定済みとしてマークします。これにより、決着した事項をページで再度尋ねることがなくなります。

    • 回答がページへのコメントの場合は、 ArtifactComments ツールで読み込み、チャットでの回答と同様に扱います。

コメント