thumb-first について
thumb-firstは、デザイン判断とプラットフォーム実装の両方を確認するモバイルレビュー用スキルを統括します。独立して保守される2つのスキルを実行し、主観的な意見と客観的な不具合を区別して結果をまとめます。
主な機能
- 01デザインとプラットフォームレビューの統括
- 02全体レビューと個別レビューの切り替え
- 03Web/PWAとネイティブの判別
- 04指摘の種別を保った結果統合
- 05影響度と優先度による修正順の整理
活用シーン
- 01モバイル画面のデザインと実装のレビュー
- 02デザインまたは技術レビューのみの実施
- 03スクリーンショット、URL、コードの指摘統合
- 04修正項目の優先順位付け
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ kylezantos/ thumb-first --skill thumb-firstインストール後、Claude Code で/thumb-firstを入力して読み込まれたか確認します。
同梱ファイルreferences/unified-report.mdworkflows/full-review.md
詳細
Thumb-First · モバイルレビュー(統括)
Thumb-First モバイルスイートのワンストップのエントリーポイントです。独立して保守されている2つの兄弟スキルを連携させ、出力を統合します。
| レイヤー | スキル | 回答する問い | 出力 |
|---|---|---|---|
| デザイン判断 | thumb-first-design | これが適切なモバイルデザインですか?(プラットフォーム非依存) | デザインへの影響度順に、分岐案と所見 |
| プラットフォーム技術 | thumb-first-platform | デバイス向けに正しく構築されていますか?(Web/PWA に深く対応、ネイティブは引き継ぎ) | 客観的な不具合、P0–P3、ファイル:行 |
2つのレイヤーは有効期間が異なります。デザイン判断は長く通用しますが、プラットフォーム固有の情報はOSやブラウザーのリリースごとに古くなります。そのため、別々のスキルとして管理し、それぞれ独立してバージョン管理しています。この統括スキルは、両方を実行して結果を調整するための接点です。統合レポートで2種類の指摘を視覚的に区別することが最も重要です。所見を不具合のように見せたり、必須の修正を好みの問題のように見せたりしてはいけません。
モード選択
$ARGUMENTS から判定し、指定がなければフルレビューをデフォルトにします。
| モード | トリガー | 実行内容 |
|---|---|---|
| フルレビュー(デフォルト) | 「review」、「audit」、引数なしでの呼び出し、またはデザインと技術の両方にまたがる依頼 | 両方のパスを実行 → 統合レポート |
| デザインのみ | 「design」、「judgment」、「patterns」、「forks」、「lenses」 | thumb-first-design のみ |
| プラットフォームのみ | 「platform」、「technical」、「PWA」、「safe area」、「viewport」、「performance」、「defects」 | thumb-first-platform のみ |
デザインのみ、またはプラットフォームのみの場合は、該当する兄弟スキルに引き継いで終了します。統合は実行しません。
ユーザーがレビューを依頼したものの、対象を提示していない場合は、スクリーンショット、ライブURL、コード、説明のどれをレビューするのか確認してから振り分けます。どちらのパスもこれらすべてを対象にできます。必要なのは、そのうち1つだけです。
フルレビュー — オーケストレーション
workflows/full-review.md を読み、記載された手順に従います。概要は次のとおりです。
Step 0 · 対象を一度だけ判定
リポジトリを調べて、Web/PWA(next.config、vite、Web manifest、サービスワーカー)か、ネイティブ(react-native/expo、app.json、ios/+android/、*.swift、pubspec.yaml)かを判定します。曖昧な場合は確認します。判定結果を両方のパスに渡します。プラットフォームパスは対象によって処理が大きく分岐します(thumb-first-platform の Step 0 を参照)。ネイティブの場合は、引き継ぎまたは制約の明示を行い、Webの監査を装うことはありません。
Step 1 · デザインパス
thumb-first-design の監査(../thumb-first-design/workflows/audit.md。../thumb-first-design/references/designer-lenses.md を読み込み)を実行します。デザインに関する指摘と、内部で判断した分岐案を出力します。このレイヤーはすべての対象に適用されます。
Step 2 · プラットフォームパス
Web/PWA の場合は thumb-first-platform の監査パス(../thumb-first-platform/workflows/audit-mobile-pwa.md)を実行します。ネイティブの場合は、ネイティブ分岐(引き継ぎ/制約の明示)に進みます。ファイル:行とP0–P3を含む、客観的な不具合を出力します。
Step 1 と Step 2 は独立しています。速度を優先する場合は、2つの並列サブエージェントとして実行してから統合します。対象の範囲が小さければ、メインコンテキストで順番に実行してもかまいません。
Step 3 · 統合
references/unified-report.md に従い、結果を1つのレポートにまとめます。
- デザインと判断 — 影響度の高い順に、分岐案と所見、「判断が必要」な項目を記載します。視覚的にはアンバー/ニュートラルで区別します。
- プラットフォームの不具合 — 客観的な指摘をP0–P3、ファイル:行、「必須修正」とともに記載します。重大度に応じて赤の色調で区別します。
- 統合修正順 — 両方の種類を織り交ぜた優先順位付きリストを1つ作成し、読者が種類にかかわらず、何から対応すべきか分かるようにします。
HTMLは ../thumb-first-design/references/report-template.html(標準レポート)をベースにし、プラットフォームの不具合のセクションを追加します。テンプレートを一から作り直さないでください。
このアンブレラが該当しないもの
- デザインやプラットフォームに関する知識自体を保持するものではありません。それらは2つの兄弟スキルにあります。このファイルは振り分けと統合のみを行います。デザイナー視点やSafari特有の挙動をここに追加したくなった場合は、兄弟スキルに追加してください。
- 実装を行うものではありません。デザインに関する調査結果は
responsive-craft/RN-Expo スキルに引き継ぎ、プラットフォームの不具合はthumb-first-platformの修正ワークフローで修正します。
スイートの概要
thumb-first/ ← this umbrella (routing + merge)
thumb-first-design/ ← design judgment (8 lenses, forks) — platform-agnostic
thumb-first-platform/ ← technical verification (web/PWA deep, native handoff)
リファレンスとワークフローの一覧
| ファイル | 内容 | 読み込むタイミング |
|---|---|---|
| workflows/full-review.md | 2段階のオーケストレーションと統合手順 | 全体レビューを実施するとき |
| references/unified-report.md | 統合レポートの構成 — 2種類の異なる指摘と、統合した修正順序 | レポートを作成するとき |