taste-skill-swiftui

モデルによって構築されたアプリ画面は、モデルが見てきたすべてのアプリ画面の平均像のように見えます。つまり、4つのタブを持つTabView、大きなタイトル、それぞれにSF Symbolが入った角丸カードのList、青いグラデーションの「はじめる」ボタン、3つのシンボルページからなるオンボーディング、光るペイウォール。そのどれも間違ってはいませんが、何一つとして「決断」されたものではありません。

このスキルは、それらのデフォルトを決断に置き換えます。4つの方法で:

スクリプトが方向性を提示し、あなたが選択します。 モデルに見た目を考えさせるように依頼すると、毎回カテゴリのデフォルトを選びます。scripts/draw.mjs はリサーチされた12の方向性から3つを提示します。あなたは題材のアイデアを最もよく表現するものを選び、その後、タイポグラフィ、パレット、シェイプ、モーション、画面のブループリントが提示されます。
アイデアは題材から生まれます。 最高のアプリは、モノ自体（その出力、そのオブジェクト、その儀式、その印刷物）から何かを採取して構築されたものであり、スタイリングから始まるものではありません。
ネイティブを優先し、カスタムは意図を持って。 すべての要素はラダー（後述）を登ります。カスタムコンポーネントは許可されており、アイデアが必要とする場合には推奨されますが、すべてのネイティブな振る舞いを備えていなければなりません。
あなたは自分が作ったものを見ます。 scripts/capture.sh は、デバイスマトリクス上で、ライト/ダークモード、デフォルト/アクセシビリティフォントサイズでアプリを撮影します。審査員のルーブリックが画像を評価します。修正し、もう一度見直します。

装飾を取り除くことは仕事の半分に過ぎません。色味を付けた四角形やカード、グラデーションを失い、何も得られなかった画面は薄っぺらです。残りの半分は実質です。つまり、より大きなタイポ、色彩の広いフィールド、この題材の世界に存在する実際の写真や描画オブジェクト、完全なコンテンツを備えた各画面、そしてこのアプリだけが提供できる、ユーザーが実行できるたった一つのこと。

以下のコマンドで、<skill> はこのスキルのフォルダです。プロジェクトルートから実行してください。作業ファイルは .taste-skill/ に出力されます。スクリプトには Node 18+ が必要です。capture.sh は Xcode と起動したシミュレーターが必要です。~/.claude/bin/devlock が存在する場合は、すべての xcodebuild と simctl の実行を devlock run でラップしてください（並列ビルドによりプロセス制限を超えたことが過去にあります）。

ネイティブラダー

アイデアが必要とする範囲までだけ登り、各ラング3コンポーネントをレポートに記録してください。

システムコンポーネント、システムルック。 NavigationStack、TabView、List、Form、Toggle、Picker、Menu、ContentUnavailableView、ディテント付き.sheet、ShareLink、Chart、ProgressView。無料で得られるもの: Dynamic Type、VoiceOver、Reduce Motion、RTL、Liquid Glass、キーボード、ポインター。プラットフォームの仕事であるコントロールにはこれらを使用してください。
システムコンポーネント、スタイル適用済み。 同じコンポーネントに、あなたのトークンを適用: ButtonStyle、LabelStyle、ToggleStyle、ListRowBackground、scrollContentBackground(.hidden)、tint、fontDesign、fontWidth、containerShape。ここに方向性の大部分が現れます。
カスタムコンポーネント。 システムコンポーネントがアイデアを表現できない場合のみ（ダイヤル、定規、チケット、ステージ、タイムラインの軸など）。カスタムコンポーネントには以下が必須です: @ScaledMetric/Font.custom(relativeTo:) によるDynamic Type、44×44pt以上の最小ヒット領域、ラベル・値・特性・調整可能アクションを備えたaccessibilityElement、Reduce Motionのパス、sensoryFeedback による触覚フィードバック、ダークモード、RTL（layoutDirection）、iPad/Macでのフォーカスとポインター状態、すべての状態のプレビュー。説明の文が必要なコントロールは、キャプションを付けるのではなく再設計してください。

プラットフォームが所有するものを再構築しないでください。つまり、アイデアがどうしても必要としない限り、手描きのタブバー、ナビゲーションバー、スイッチ、アラート、シート、キーボードアクセサリは使用しないでください。ブラーパネルを手動で実装しないでください。Liquid Glassはシステムバー、ツールバー、およびフローティングコントロール上のシステムガラスAPIからのみ提供されます。

Webからモバイルへ：元のルールの対応表

Taste-skill (Web)	こちら (ネイティブ)
ページ vs アプリ画面	アプリはほとんど常に2番目の種類です。初回起動画面、オンボーディング、ペイウォールは構成された画面です（ランに従います）。リスト、設定、フォーム、詳細画面は実用的な画面です（`references/screens.md` に従います）。
ヒーロー	起動後最初の画面（またはホームタブ）。「これは何か、何をするのか」を3秒以内に、大きなタイポまたは大きなオブジェクトで答えなければなりません。
見出しはどの幅でも最大2行	iPhone SE幅とiPadではデフォルトサイズで2行、アクセシビリティサイズでは折り返し（切り詰めは禁止）。
等しい外側マージン、密集したセクションなし	システムレイアウトマージン（16/20pt）を使用してください。iPadとランドスケープは独自の構成（分割ビュー、サイドバー、2カラム）を取得し、中央寄せの電話カラムは絶対に使用しないでください。
実際の写真の最低数（4枚）	主要画面ごとに1つ以上の実際の、または手作りのビジュアル。SF Symbolは機能的なグリフであり、写真ではありません。
スクロールシーン	`scrollTransition`、`visualEffect`、`matchedGeometryEffect`、`navigationTransition(.zoom)`、`KeyframeAnimator`、`PhaseAnimator`、`TimelineView`。
ライブなもの	ワオモーメント: このアプリだけが持つ、触覚フィードバックを伴い、片手で操作できる、たった一つのインタラクション。
実際のブラウザでの `inspect.mjs`	シミュレーターでの `capture.sh` とSwiftソースに対する `lint.mjs`。
モーションの最低限	初回実行とコアフロー全体で、少なくとも6つの意図的なモーションモーメント。それぞれにReduce Motionのフォールバックが必要です。
ガラス無し	手作りブラーカードは禁止。システムクローム上のシステムガラスは問題ありません。
モノスペース無し	数値の整列のための `.monospacedDigit()` のみ。コード以外で `design: .monospaced` を使用しないでください。
細い線無し	システムが描画するリスト区切り線は問題ありません。装飾的な `Divider` や1ptの枠線カードは禁止です。
フッター＝デザインされた閉じ	長い画面の最終行、またはフローの終了状態はデザインされていなければならず、単なる余白であってはなりません。

ラン

これらを順番に実行してください。ステップ1〜5は数分で完了し、アプリの良し悪しを決定します。

1. ブリーフとプロジェクトを読む

現実のものを確認してください。題材、オーディエンス、ユーザーが最初の1分間に行わなければならないこと、プラットフォームとデプロイターゲット、既存のデザインシステムやトークン、実際に存在するアセット（写真、製品ショット、イラスト、映像、画像ツール）、そしてリデザインで維持しなければならないもの（モデル、インテント、ウィジェット、購入、ローカライゼーション）。持っていないアセットを前提に計画しないでください。リクエストがあいまいな場合は、自分の解釈を一文で決定して述べてください。不足している事実が作業を妨げる場合にのみ質問してください。

題材のインベントリ: このクライアントに属し、競合他社にはない8〜12のもの。その名前と意味、ブリーフ内の数字（分数、グラム、価格、連続日数）、それが生きる制約（1日1回、オフライン、ワンタップ）、その素材と色、その儀式と時間、その世界の印刷物（チケット、ラベル、レシート、時刻表、パスポートスタンプ）、その音、その物理的なジェスチャー（振る、吹く、長押し）。ステップ4のアイデアはこのリストから生まれます。

2. 主張を書く

アプリを、証拠を伴う主張のリストとして、初回実行とコアフローの画面ごとに1行で記述してください。

画面: 主張 -> ユーザーが見たり行ったりする証拠。

主張のない画面は削除してください。これが、スプラッシュ、3つのオンボーディングページ、パーミッション要求、ペイウォール、4つのタブバーという定型的なシーケンスを回避する方法です。オンボーディングは、ユーザーがコア機能を一度実行できる場合にのみ、その存在価値があります。

3. 方向性を描く

node <skill>/scripts/draw.mjs --kind <種類> --brief "<題材についての一文>" \
  --screens <あなたの主張の順序での役割> [--tone <トーン>] [--have <アセット>] \
  [--keep palette,type] [--platform ios|ipad|watch|mac|vision] --options 3

これにより3つの方向性が提示されます。それぞれをあなたのインベントリと照らし合わせてください。どの方向性がこのクライアントだけが持つ何かを表現できるか？最も馴染みのあるものではなく、それを選択し、その理由を一文で書いてください。その後、完全なシートを提示します。

node <skill>/scripts/draw.mjs <--options なしの同じ引数> --direction <選択したID>

--kind: node <skill>/scripts/draw.mjs --list kinds（ユーティリティ、ヘルス、ファイナンス、ゲーム、キッズ、ソーシャル、メディア、プロダクティビティ、ライフスタイル、クリエイティブ、コマース、その他）。
--screens: --list roles からの役割（オンボーディング、ホーム、詳細、作成、結果、設定、ペイウォール、空）。
--tone: 静か、大胆、温かい、テクニカル、遊び心、高級、エディトリアル。ブリーフが要求する場合のみ。
--have: 存在するアセット: photography、product-photo、illustration、video、3d。何もなければ省略してください。その場合、ドローはそれらに依存する構成を避けます。
--keep palette,type: ブランドやデザインシステムがすでにこれらを固定している場合。ドローは構成、シェイプ、モーションのみを提示し、あなたがシステムの値を役割にマッピングします。
--seed <n> によりドローが再現可能になります。シートは使用したシードを表示します。

シートを採用してください。あなたが本来作成したであろうレイアウトとブレンドしないでください。スロットの再描画（--redraw type|palette|shape|motion|screen:<role>|direction）は、その理由を説明できる場合のみ行ってください。つまり、ブランドの制約に反する、存在しないアセットが必要、または実際のコンテンツを保持できない、といった場合です。より快適なものを得るために再描画しないでください。すべての再描画をレポートに記録してください。--show で再印刷します。

題材に対してパレットを確認してください。 提示されたパレットは、色だけでなく、比率のセット（1つの地面、1つのインク、1つのアクセント、オプションのフィールド）です。それが題材自身の素材と矛盾する場合は、一度再描画するか、比率を維持して題材から色を取得し、そのように明記してください。

4. アイデアを見つける

方向性は構成の方法です。アイデアはアプリをこの題材に属するものにするものです。構築する前に、題材自体から両方の空白を埋めてください。

このアプリでは、[題材に属する何か] が [方向性が求めるデバイス] になります。

以下のものを調べてください。その出力（それが生成するものを素材として表示）、そのオブジェクト（シルエットの形状）、その名前（絵を内包する文字）、その場所、その儀式（アプリが実行するシーケンス）、その人工物（チケット、ラベル、レシート）、その反対。

競合他社テスト: 最も近い実際の競合他社をその文に当てはめてみてください。それでも成立する場合、そのアイデアはカテゴリに属しています。「クリーンでモダン」はアイデアではありません。

ワオモーメント（ライブなもの）。 アプリに、使用ごとに異なる、アイデアから作られた1つのインタラクションを与えてください。マイクに吹きかけるとろうそくの火が揺らぐ、用量を設定して実際の半減期曲線を読む、電話を折るとカセットが再生される。実際のコンテンツを使用し、親指で片手操作が可能で、sensoryFeedback による触覚フィードバック、Reduce Motionのパスを持ち、タスクを決してブロックしません。それは遊び場ではなく、一つのことです。ステップ6で構築され、最後にモーションとして追加されるものではありません。

5. 言葉を書く

ビューを作成する前に、references/copy.md に従って、すべてのコピーデッキ（プレーンテキスト）を書き、最初のコミットからすべての文字列をString Catalog（Localizable.xcstrings）に配置してください。すべてのタイトルはデフォルトサイズで2行に収まります。画面ごとに1つのプライマリアクションがあり、その動作にちなんで名付けられています（「はじめる」「続ける」（その後何もなし）、「もっと詳しく」は禁止）。空、エラー、パーミッションのコピーは後回しにせず、今書いてください。プルーフは決して創作しないでください。偽のレビュー、ユーザー数、賞、プレスは禁止です。

6. それでも、構築する

頭の中でモーションをオフにして構築してください。作業順序:

トークン。 シートから Palette/Theme を、ライト/ダークバリアントを持つアセットカタログカラー（または ShapeStyle トークン列挙型）、Typography 列挙型、Metrics 列挙型（スペーシング、半径、1つのシェイプルール）として定義します。下流のすべてはトークンのみを参照します。ビュー内で Color(red:) や .font(.system(size: 17)) は使用しないでください。
最初の画面を、そのブループリントが説明するとおりに、 SE幅、標準、Pro Max、iPadで構築します。他のすべてが存在する前に、大きいものを大きく、小さいものを小さくします。
各画面をそのブループリントから、 このプロジェクトのコンテンツで構築します。隣接する画面はレイアウトを共有してはいけません。アイデアをすべての画面に持ち込み、 設定、ペイウォール、空の状態も含めてください。最も一般的な失敗は、特徴的なホーム画面の後に定型の Form が続くことです。
イメージ、 優先順位は次のとおり: プロジェクト自身のもの、生成したもの（画像ツールがある場合）、ライセンスを記録したオープンコレクションからの題材の世界の実際の写真（references/imagery.md）、コードで描画したもの（Shape、Canvas、Path）でパレット内の一貫したフラットグラフィック言語として、タイポと色のみ。SF Symbolは機能的なグリフとしてのみ使用します。
ワオモーメント をステップ4から、それが主張を証明する画面に実装します。
充実感。 各画面をポスターとして見てください。1つの支配的なものと、それが運ぶコンテンツ。ほとんどが空の地面である画面は未完成です。本文テキストは body 以上のフルインクで表示します。
フレーム。 1つのマージンシステム。すべての画面にタイトル（ナビゲーションタイトルまたは大きなディスプレイタイトル）があり、すべてのリストセクションにはそれを命名するヘッダーがあります。
状態とセマンティクス。 それらのすべて: ローディング、空、エラー、オフライン、パーミッション拒否、成功、無効、初回実行、長いコンテンツ、アクセシビリティサイズ、RTL。実際の Button、可視フォーカス、ラベル、ラベルが伝えられない場合のみの accessibilityHint、VoiceOverの順序、Reduce MotionとIncrease Contrastの尊重。
プラットフォームベースライン（グローバルルールより）: en-US、en-GB、en-AU、en-CA、es-MXを含むString Catalog。ポジティブな瞬間の後にのみ requestReview を、カウンターとインストールからの日数で制限し、バージョンごとに1回。触覚フィードバック。ダークとライト。アプリがコアアクションを持つ場合のApp Intents。

決定の背後にある詳細が必要な場合は、references/type.md、colour.md、layout.md、components.md を参照してください。以下のルールは短縮版です。

7. ゲート

node <skill>/scripts/lint.mjs <Swiftファイルまたはフォルダ>
<skill>/scripts/capture.sh <バンドルID> .taste-skill/capture   # 起動したシミュレーター

lint.mjs は、Swiftソースから禁止パターン、定型的なフレーズ、欠落したベースライン（String Catalog、Reduce Motion、触覚フィードバック）をスキャンします。capture.sh は、起動した各シミュレーター上のインストール済みアプリを、ライト/ダークモード、デフォルト/アクセシビリティサイズで起動し、スクリーンショットを保存します。すべての FAIL を修正してください。各 WARN は、デザイナーに一文で説明できない限り、誤りとして扱います。FAIL がなくなるまで再実行してください。特定の行は、末尾に特定のインラインマーカーを付けることでオプトアウトできます。

[翻訳対象外のため省略]

味覚スキル - SwiftUI