mcpField
T
tarsier

tarsier

github.com/jpcaparasクリエイティブ・メディア5687 回インストール1 日前に更新
リポジトリ

tarsier について

Tarsierは、自転車に乗るメガネザルのSVGと、500×500のPNG、Markdownの記録を生成する一回限りの創作スキルです。固定プロンプトで画像を作り、作業ディレクトリにファイルとして保存したい場合に使えます。

主な機能

  1. 01自転車に乗るメガネザルのSVG生成
  2. 02余白付き500×500 PNGへのラスタライズ
  3. 03メタデータ付きMarkdown記録の作成
  4. 04新しいフォルダーへの3ファイル保存

活用シーン

  1. 01固定プロンプトによる画像制作
  2. 02ベクター画像とラスター画像の同時保存
  3. 03プロンプトと生成したSVGソースの記録

インストール

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

$npx skills add https://github.com/jpcaparas/skills --skill tarsier

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

metadata.json
README.md
skill-card.prompt.md
agents/
.gitkeep
assets/
.gitkeep
evals/
evals.json
references/
.gitkeep
scripts/
rasterize.py
test_skill.py
validate.py
templates/
transcript.md

詳細

ターシャ

一度きりのクリエイティブ生成ツールです。自転車に乗るメガネザルの完全な SVG、白地に余白を付けた 500×500 のラスター PNG、そして何をどのように作成したかを記録した Markdown のトランスクリプトを生成します。

呼び出し

/tarsier

引数はありません。プロンプトは固定で、変更されることはありません。モデル名と推論レベルは、ハーネスが公開している場合にハーネスから取得します。

生成するもの

呼び出し元の現在の作業ディレクトリ内に新しいフォルダーを作成し、その中に 3 つのファイルを生成します。

{DIR}/
├── {BASE}.svg     # the raw SVG you authored
├── {BASE}.png     # 500x500 raster, 16px padding, white background
└── {BASE}.md      # transcript with metadata and the full SVG source

{BASE} は tarsier-<model>-<reasoning>-<NZST-timestamp> の形式です。

実行手順

以下の手順を順番に実行してください。各手順には確認ポイントがあります。省略しないでください。

ステップ 1 — セットアップ
  1. モデル名：ハーネスのメタデータから現在のモデル ID を読み取ります。角括弧内のコンテキストウィンドウの接尾辞を削除します（例：claude-opus-4-6[1m] → claude-opus-4-6）。ハーネスがモデル ID を公開していない場合は、unknown-model を使用します。
  2. 推論レベル：ハーネスのメタデータまたは会話から、現在有効な推論レベルまたは処理レベルを読み取ります。取得できない場合は、default を使用します。
  3. タイムスタンプ（NZST）： 
    TZ='Pacific/Auckland' date '+%Y%m%dT%H%M%S'
  4. ベース名を組み立てる：tarsier-{model}-{reasoning}-{timestamp} — すべて小文字にし、ハイフンで区切ります。
  5. 出力フォルダーを作成する：現在の作業ディレクトリ内に作成します。 
    mkdir -p ./{BASE}
ステップ 2 — SVG の生成

以下のプロンプトだけが与えられたものとして応答します。装飾を加えたり、交渉したり、ユーザーにスタイルの指示を求めたりしないでください。

自転車に乗るメガネザルの SVG を生成してください

SVG を {DIR}/{BASE}.svg に書き込みます。

技術要件（ラスター化との互換性のみを目的としており、アートの内容を制限するものではありません）：

  • xmlns="http://www.w3.org/2000/svg" を含む完全な <svg> 要素
  • viewBox 属性を含めること
  • SVG マークアップ自体以外のテキストや文章を含めないこと
  • 自己完結していること — 外部画像参照や外部フォントのインポートを使用しないこと

メガネザルは、非常に大きく丸い目、長い指、長い尾、小さな毛深い体を持つ夜行性の小型霊長類です。自転車に乗っていることがはっきりわかるように描いてください。それ以外のアートディレクション（詳細さ、スタイル、色）は自由です。

ステップ 3 — PNG へのラスター化

このスキルの scripts/ ディレクトリにあるラスター化スクリプトを実行します。このスクリプトは SVG を 500×500 の白いキャンバスに 16px の余白を付けて配置し、プロジェクターやブログのサムネイルで一貫して表示されるようにします。

python3 <skill-dir>/scripts/rasterize.py "{DIR}/{BASE}.svg" "{DIR}/{BASE}.png"

<skill-dir> は、このスキルがインストールされたパスです。ハーネスがそのパスを公開していない場合は、この SKILL.md ファイルの場所を基準に scripts/rasterize.py のパスを解決します。

PNG が作成され、空でないことを確認します。

test -s "{DIR}/{BASE}.png" && echo "PNG OK: $(wc -c < "{DIR}/{BASE}.png") bytes"
ステップ 4 — トランスクリプトの作成

{DIR}/{BASE}.md に、次の正確な形式で書き込みます（角括弧で囲まれた項目を置き換え、構成は維持してください）。

# Tarsier

| Field | Value |
|-------|-------|
| Date | {NZST datetime, e.g. 2026-04-10T14:30:45 NZST} |
| Model | {model} |
| Reasoning | {reasoning} |
| Prompt | Generate an SVG of a tarsier riding a bicycle |

## SVG Output

​```svg
{the complete SVG code — verbatim from Step 2}
​```
ステップ 5 — 報告

出力フォルダーをユーザーに伝え、その内容を一覧表示します。例：

./{BASE}/
├── {BASE}.svg
├── {BASE}.png  (500x500)
└── {BASE}.md

出力のアップロード、デプロイ、共有、ホスティングを申し出ないでください。別のバリエーションが必要かどうかユーザーに尋ねないでください。このスキルは一度きりの生成を前提としています。

プロンプト

プロンプトは常に次のとおりです。

自転車に乗るメガネザルの SVG を生成してください

これは固定です。トランスクリプト内で言い換えないでください。独自の推論に追加の指示を加えないでください。一度きりの生成ツールの価値は、入力が固定されており、SVG だけが変数であることにあります。

命名規則

tarsier-<model>-<reasoning>-<NZST-timestamp>

  • モデル：ハーネスが報告するモデル ID。小文字にし、ハイフンで区切ります。取得できない場合は unknown-model を使用します。[1m] のようなコンテキストウィンドウの接尾辞は削除します。
  • 推論：このセッションの処理レベルを小文字で指定します（default、low、standard、high、thinking など）。
  • タイムスタンプ：NZST の YYYYMMDDTHHmmSS 形式（年月日と時刻の間に句読点を入れません）。

例：tarsier-claude-opus-4-6-default-20260410T143045

注意点

1. rsvg-convert をインストールする必要があります。 ラスタライズスクリプトは rsvg-convert（librsvg に含まれています）をシェルから実行します。macOS の場合：brew install librsvg。Debian/Ubuntu の場合：apt install librsvg2-bin。バイナリが見つからないと、スクリプトはステップ 3 でゼロ以外の終了コードを返して失敗します。PNG を黙ってスキップせず、そのエラーをユーザーに伝えてください。

2. viewBox のない SVG は切り抜かれます。 ラスタライザーは viewBox を抽出し、見つからない場合は幅と高さの属性を使用します。どちらもない場合は 0 0 100 100 を仮定しますが、描画が切り取られることがほとんどです。必ず viewBox を含めてください。これは、PNG が空白になったり切り抜かれたりする最も一般的な原因です。

3. <svg> 要素の外側に何も置かないでください。 ラスタライザーは <svg ...> と </svg> の間にある内容だけをコピーします。SVG タグより前にある HTML コメント、文章、DOCTYPE は黙って破棄されます。コメントが必要な場合は、SVG 内に `` を置いてください。

4. タイムスタンプには UTC やローカル時刻ではなく、NZST を使用してください。 TZ='Pacific/Auckland' というプレフィックスは、ハーネスがどこで実行されても出力の並び順を一貫させるためのものです。省略すると、実行ごとにフォルダー名が一致しなくなります。

5. プロンプトは固定し、アートは変化させてください。 ワンショットジェネレーターの要点は、入力が変わらないことです。「詳細にする」「フラットな色を使う」といった創作上の指示を独自の解釈で追加しないでください。実行ごとのばらつきは、プロンプトに対する編集ではなく、モデルから生まれるものです。

6. 出力フォルダーは呼び出し元の CWD に作成されます。 mkdir -p ./{BASE} はスキルのディレクトリ内ではなく、ユーザーがコマンドを実行した場所にフォルダーを作成します。これは意図的な仕様です。ユーザーは、作業中のファイルと同じ場所にファイルができることを期待します。

このスキルのファイル

  • scripts/rasterize.py — SVG → 500×500 PNG のラッパーです。ステップ 3 で実行されます。実行ごとに変更しないでください。
  • evals/evals.json — スキルのテストケース（スモーク、エッジ、ネガティブ、開示）です。
  • templates/transcript.md — ステップ 4 のトランスクリプト形式を記入用テンプレートとして用意したものです。

コメント

Markdown 対応