mobile-app について
iPhone 15 Proのフレーム内に表示する、1画面のモバイルアプリを設計するスキルです。ステータスバーやアプリヘッダー、メインコンテンツ、タブバーに加え、Dynamic Islandとセーフエリアの余白も指定します。
主な機能
- 01iPhone 15 Proフレーム
- 02ステータスバーとアプリヘッダー
- 03フィード、リスト、詳細、フォームのレイアウト
- 044〜5項目のボトムタブバー
- 05Dynamic Islandとセーフエリアの余白
活用シーン
- 011画面のモバイルアプリ設計
- 02iPhone 15 Proのモックアップ作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/mobile-appを入力して読み込まれたか確認します。
同梱ファイルexample.html
README（原文）English
プロジェクトの README よりこの README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。
【模板: iPhone 单屏 App】 【意图】一个屏幕的 mobile app 设计, 放在像素级 iPhone 15 Pro frame 里。 【布局】
- Status bar (时间 + 电池 + 信号)
- App header (标题 / 头像 / 搜索)
- Main content (一个清晰的 archetype: feed / list / detail / form)
- Bottom tab bar (4-5 tab) 【设计细节】
- 真实的 dynamic island; safe-area 留白
コメント
Markdown 対応