Lord1Egypt/awesome-skill-forge

Sketch

ユーザーがデザインの方向性を確定する前に「とりあえず見てみたい」場合にこのスキルを使用します。つまり、UI/UXのアイデアを捨てる前提のHTMLモックアップとして探求することです。目的は、ユーザーが視覚的な方向性を横並びで比較できるように、2～3のインタラクティブなバリエーションを生成することであり、製品コードを生成することではありません。

ユーザーが「この画面をスケッチして」「Xがどう見えるか見せて」「レイアウトAとBを比較して」「このUIの2～3の案を見せて」「いくつかのバリエーションを見せて」「作る前にモックアップして」などと言った場合にロードします。

使用すべきでない場合

• ユーザーが本番用コンポーネントを求めている場合 → claude-designを使用するか、適切に構築する
• ユーザーが洗練された単発のHTMLアーティファクト（ランディングページ、資料）を求めている場合 → claude-design
• ユーザーが図を求めている場合 → excalidraw、architecture-diagram
• デザインがすでに確定している場合 → そのまま構築する

ユーザーが完全なGSDシステムをインストールしている場合

gsd-sketchが兄弟スキルとして表示されている場合（npx get-shit-done-cc --hermesでインストール）、完全なワークフローのために**gsd-sketch**を優先します。これには、永続的な.planning/sketches/ディレクトリとMANIFEST、フロンティアモード分析、過去のスケッチ間の一貫性監査、およびGSDの他の部分との統合が含まれます。このスキルは軽量なスタンドアロンバージョンであり、状態管理機構のない1回限りのスケッチです。

コアメソッド

インプット → バリエーション → 直接比較 → 勝者決定（または反復）

1. インプット（ユーザーがすでに十分な情報を提供している場合はスキップ）

バリエーションを生成する前に、3つのことを取得します。一度にすべてを尋ねるのではなく、1つずつ質問します。

1. 雰囲気。「これはどんな雰囲気にすべき？形容詞、感情、バイブ。」 — 「落ち着いた、エディトリアル、Linearみたい」という答えは、「ミニマル」よりも多くの情報を伝えます。
2. 参考。「あなたが想像している雰囲気を捉えているアプリ、サイト、製品は何ですか？」 — 実際の参考例は抽象的な説明より優れています。
3. コアアクション。「この画面でユーザーが行う最も重要なことは何ですか？」 — すべてのバリエーションがこれをうまく機能させるべきです。そうでなければ、単なる飾りです。

各質問の後に簡潔に答えた内容を反映します。ユーザーがすでに上記の3つをすべて提供している場合は、すぐにバリエーションに進みます。

2. バリエーション（2～3、決して1つではなく、4つ以上は稀）

一度に2～3つのバリエーションを生成します。各バリエーションは完全でスタンドアロンのHTMLファイルです。バリエーションを説明するのではなく、構築します。比較が目的です。

各バリエーションは、異なるピクセル値ではなく、異なるデザインポリシーを採用する必要があります。3つの優れたバリエーションの軸：

• 密度： コンパクト / 開放的 / 超高密度（対極の2つを選ぶ）
• 強調： コンテンツファースト / アクションファースト / ツールファースト
• 美学： エディトリアル / 実用的 / 遊び心
• レイアウト： シングルカラム / サイドバー / 分割ペイン
• 基盤： カードベース / 裸のコンテンツ / ドキュメントスタイル

1つの軸を選び、そこから展開します。アクセントカラーのみが異なる2つのバリエーションは労力の無駄です — ユーザーはそれらを区別できません。

バリエーションの命名： 番号ではなく、ポリシーを説明します。

sketches/
├── 001-calm-editorial/
│   ├── index.html
│   └── README.md
├── 001-utilitarian-dense/
│   ├── index.html
│   └── README.md
└── 001-playful-split/
    ├── index.html
    └── README.md

3. リアルなHTMLにする

各バリエーションは単一の自己完結型HTMLファイルです：

• インライン<style> — ビルドステップ不要、外部CSS不要
• システムフォントまたは1つのGoogleフォント（<link>経由）
• CDN経由のTailwind（<script src="https://cdn.tailwindcss.com"></script>) でOK
• リアルなダミーコンテンツ — 実際の文章、実際の名前、「Lorem ipsum」ではない
• インタラクティブ： リンクがクリック可能、ホバーが実際に機能、少なくとも1つの状態遷移（開く/閉じる、フィルター、トグル）。静止画像は、粗くてもアニメーションのあるものよりも悪いスパイクです。

ブラウザで開きます。壊れているように見える場合は、ユーザーに表示する前に修正します。

バリエーションを視覚的に確認する — Hermesのブラウザツールを使用してください。 HTMLを書いてレンダリングされることを期待するだけでは不十分です。各バリエーションをロードして確認します：

browser_navigate(url="file:///absolute/path/to/sketches/001-calm-editorial/index.html")
browser_vision(question="このレイアウトはきれいで読みやすく見えますか？目に見えるバグ（テキストの重なり、スタイル未設定の要素、壊れた画像）はありますか？")

browser_visionは、ページに実際に表示されているもののAI説明とスクリーンショットのパスを返します — 純粋なソース検査では見逃されるレイアウトバグ（例：静かに失敗したフォントのインポート、崩れたフレックスコンテナ）をキャッチします。各バリエーションが正しく見えるまで修正して再ナビゲートします。

高速スタートのためのデフォルトCSSリセット＋システムフォントスタック：

<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #1a1a1a;
    background: #fafafa;
    line-height: 1.5;
  }
</style>

4. バリエーションのREADME

各バリエーションのREADME.mdは以下に答えます：

## バリエーション：{ポリシー名}

### デザインポリシー
このバリエーションを動かす原則を一文で。

### 主な選択
- レイアウト：...
- タイポグラフィ：...
- 色：...
- インタラクション：...

### トレードオフ
- 得意な点：...
- 苦手な点：...

### 最適な用途
- このバリエーションが実際に役立つユーザーやユースケース

5. 直接比較

すべてのバリエーションが構築されたら、それらを比較として提示します。単にリストするのではなく、意見を述べます：

## ホーム画面の3つの案

| 次元 | Calm editorial | Utilitarian dense | Playful split |
|-----------|----------------|-------------------|---------------|
| 密度   | 低            | 高              | 中        |
| プライマリアクションの可視性 | 低 | 高 | 中 |
| スキャン容易性 | 高 | 中 | 低 |
| 雰囲気 | 落ち着いた、信頼できる | シャープ、ツール的 | 魅力的、エネルギッシュ |

**私の意見：** パワーユーザーにはUtilitarian dense、コンテンツ重視のオーディエンスにはCalm editorial。Playful splitは最も弱い — 両方をやろうとしてどちらにもコミットしていない。

ユーザーに勝者を選ばせるか、2つを組み合わせてハイブリッドにするか、別のラウンドを依頼します。

テーマ設定（プロジェクトにビジュアルアイデンティティがある場合）

ユーザーに既存のテーマ（色、フォント、トークン）がある場合は、共有トークンをsketches/themes/tokens.cssに配置し、各バリエーションで@importします。トークンは最小限に保ちます：

/* sketches/themes/tokens.css */
:root {
  --color-bg: #fafafa;
  --color-fg: #1a1a1a;
  --color-accent: #0066ff;
  --color-muted: #666;
  --radius: 8px;
  --font-display: "Inter", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, sans-serif;
}

使い捨てスケッチに過剰にトークン化しないでください — 通常は3色と1フォントで十分です。

インタラクティビティの基準

スケッチは、ユーザーが以下のことができる場合に十分インタラクティブです：

1. プライマリアクションをクリックして、何か目に見えることが起こる（状態変化、モーダル、トースト、ナビゲーションのフェイント）
2. 1つの意味のある状態遷移を見る（リストのフィルタリング、モードの切り替え、パネルの開閉）
3. 認識可能なアフォーダンスにホバーする（ボタン、行、タブ）

それ以上は使い捨ての過剰エンジニアリングです。それ以下はスクリーンショットです。

フロンティアモード（次に何をスケッチするか選ぶ）

既存のスケッチがあり、ユーザーが「次に何をスケッチすべき？」と言った場合：

• 一貫性のギャップ — 異なるスケッチからの2つの勝利バリエーションが独立した選択をしており、まだ組み合わされていない
• 未スケッチの画面 — 言及されたが、まだ探求されていない
• 状態カバレッジ — ハッピーパスはスケッチされたが、空 / ローディング / エラー / 1000アイテムの状態は未対応
• レスポンシブギャップ — 1つのビューポートで検証済み。モバイル / ウルトラワイドでも機能するか？
• インタラクションパターン — 静的なレイアウトは存在する。トランジション、ドラッグ、スクロール動作は未対応

2～4の名前付き候補を提案します。ユーザーに選ばせます。

出力

• リポジトリルートにsketches/（ユーザーがGSD規則を使用している場合は.planning/sketches/）を作成する
• バリエーションごとに1つのサブディレクトリ：NNN-stance-name/index.html + README.md
• ユーザーに開き方を伝える：macOSではopen sketches/001-calm-editorial/index.html、Linuxではxdg-open、Windowsではstart
• バリエーションは使い捨てとして扱う — 保存する必要があると感じたスケッチは、アセットとして保存するのではなく、実際のプロジェクトコードに昇格させるべき

1つのバリエーションの典型的なツールシーケンス：

terminal("mkdir -p sketches/001-calm-editorial")
write_file("sketches/001-calm-editorial/index.html", "<!doctype html>...")
write_file("sketches/001-calm-editorial/README.md", "## バリエーション：Calm editorial\n...")
browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html")
browser_vision(question="これはどう見えますか？明らかなレイアウト問題はありますか？")

各バリエーションで繰り返し、その後比較表を提示します。

帰属

GSD（Get Shit Done）プロジェクトの/gsd-sketchワークフローから改変 — MIT © 2025 Lex Christopherson (gsd-build/get-shit-done)。完全なGSDシステムは、永続的なスケッチ状態、テーマ/バリエーションのパターン参照、および一貫性監査ワークフローを提供します。インストールはnpx get-shit-done-cc --hermes --global。