mobile-app

モバイルアプリのスキル

リアルな iPhone 15 Pro デバイスのフレーム内に、モバイルアプリの画面モックアップを 1 つ作成します。

リソースマップ

mobile-app/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: device frame + screen primitives (READ FIRST)
└── references/
    ├── layouts.md          ← 6 screen archetypes (Feed / Detail / Onboarding / Profile / Checkout / Focus)
    └── checklist.md        ← P0/P1/P2 self-review (anti-fake-device)

ワークフロー

ステップ 0 — 事前準備

1. assets/template.html を <style> ブロックの末尾まで通して読みます。 Dynamic Island、ステータスバーの SVG アイコン、ホームインジケーター、サイドレール、タブバーはすべて HTML/SVG で描画済みです。画面ごとにインラインで再実装しないでください。
2. references/layouts.md を読み、6 種類のアーキタイプを確認します。
3. 有効な DESIGN.md を読みます。 そのトークンを、シード内の 6 つの :root 変数に割り当てます。

ステップ 1 — シードをコピー

assets/template.html をプロジェクトのルートに index.html としてコピーします。有効なデザインシステムのトークンで 6 つの :root 変数を置き換えます。ページの <title> と、デバイスの上にあるキャプションも置き換えます。

ステップ 2 — アーキタイプを 1 つだけ選択

ブリーフの表現	使用するもの
フィード、受信トレイ、タイムライン、リスト、メッセージ、通知	A — フィード
記事、投稿、アイテム、レシピ、曲、商品、曲の詳細	B — 詳細
登録、ウェルカム、イントロ、ウォークスルー、ツアー	C — オンボーディング
プロフィール、アカウント、ユーザーページ、人物の自己紹介	D — プロフィール
チェックアウト、支払い、注文、フォーム、設定のステップ	E — チェックアウト
タイマー、地図、ダッシュボードウィジェット、大きな数字 1 つ	F — フォーカス／ヒーローカード

モバイル画面の役割は 1 つです。ブリーフに 2 つの役割が含まれているように見える場合は、画面を 1 つ作成し、もう 1 つは追加対応として提案します。

ステップ 3 — 貼り付けて内容を入力

layouts.md からアーキタイプのブロックを <main class="content"> にコピーし、プレースホルダーのカードと置き換えます。角括弧で囲まれたテキストには、ブリーフに沿った具体的な文言を入力します。タブバーを表示しないアーキタイプ（B、C、E）では、<nav class="tabbar"> ブロックを完全に削除します。

ステップ 4 — セルフチェック

references/checklist.md に沿って確認します。特に次の点に注意してください。

• フレームに Dynamic Island、ステータスバーの SVG アイコン、ホームインジケーターが残っていること
• タップ対象が 44px 以上であること
• アクセントカラーは 1 色にし、画面内で 2 回以下使用すること
• ディスプレイ見出しに引き続き var(--font-display)（セリフ体）を使用していること

ステップ 5 — 成果物を出力

<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">
<!doctype html>
<html>...</html>
</artifact>

内容を説明する前に、1 文だけ記述します。</artifact> の後は出力しません。

厳守事項

• スマートフォンは実物らしくします。 Dynamic Island の間隔、SVG のステータスアイコン、ホームインジケーターを維持します。シードではこれらが保護されています。フレームを書き換えないでください。
• 画面は 1 つ、役割も 1 つです。 複数タブのツアーや、つなぎ合わせたフローは作成しません。
• アクセントの使用上限は 2 回です。 デフォルトは、選択中のタブ 1 つと主要アクション 1 つです。
• 数値は .num クラスで等幅フォントにします。
• ディスプレイテキストは var(--font-display) でセリフ体にします。
• 外部画像は使用しません。 .ph-img のプレースホルダーを使用します。