mcpField
T
thumb-first

thumb-first

github.com/kylezantosデザイン・UI1637 回インストール22 週間前に更新
リポジトリ

thumb-first について

thumb-firstは、デザイン判断とプラットフォーム実装の両方を確認するモバイルレビュー用スキルを統括します。独立して保守される2つのスキルを実行し、主観的な意見と客観的な不具合を区別して結果をまとめます。

主な機能

  1. 01デザインとプラットフォームレビューの統括
  2. 02全体レビューと個別レビューの切り替え
  3. 03Web/PWAとネイティブの判別
  4. 04指摘の種別を保った結果統合
  5. 05影響度と優先度による修正順の整理

活用シーン

  1. 01モバイル画面のデザインと実装のレビュー
  2. 02デザインまたは技術レビューのみの実施
  3. 03スクリーンショット、URL、コードの指摘統合
  4. 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.md2段階のオーケストレーションと統合手順全体レビューを実施するとき
references/unified-report.md統合レポートの構成 — 2種類の異なる指摘と、統合した修正順序レポートを作成するとき

コメント