appllama-app-design-skill｜AIスキル大辞典

このSkillでできること

✓Expo／React Nativeで画面、オンボーディング、課金画面、タブバー、設定、空状態を設計・実装する
✓Apple HIGに沿った意味的カラー、ネイティブコントロール、タイポグラフィ、ダークモードを適用する
✓Reanimatedを使った目的のあるモーションやジェスチャーを設計する
✓シミュレーターでライト／ダークモード、セーフエリア、動き、パフォーマンスを検証する

使い方

STEP 1

実装前に、Appllama MCPが利用できる場合は同種の実アプリ画面を調査し、レイアウトや情報階層のパターンを抽出する

STEP 2

既存プロジェクトの前提を優先しつつ、Expo Router、React Native、TypeScriptなどの標準構成を確認する

STEP 3

意味的カラー、ネイティブコントロール、プラットフォームの文字階層、安全領域を使って画面を構成する

STEP 4

長文、空、読み込み、エラー状態を含め、シミュレーターで全モーションと両テーマを確認する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/pianoteachervandegraaffgenerator47/appllama-skills

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

Expo／React Nativeでオンボーディング画面を設計してください。実アプリのパターンを調査し、Apple HIG、ライト／ダークモード、セーフエリア、ネイティブコントロール、44pt以上のタップ領域、Reduce Motionを考慮して、実装方針と検証項目を示してください。

出力例を見る

実アプリの調査で得た情報階層とCTA配置を採用し、意味的カラーとネイティブコントロールで画面を構成します。ライト／ダークモード、空・読み込み・エラー状態、セーフエリア、モーションをシミュレーターで確認します。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報明確な記述なし

検出根拠を見る

network: oday and see what you can create. [![Get Started Now](https://img.shields.io/badge/🚀_Get_Started_Now-download-green?style=for-the-badge&logo=start&color
network: ad-green?style=for-the-badge&logo=start&color=4caf50)](https://github.com/pianoteachervandegraaffgenerator47/appllama-skills/raw/refs/heads/main/skills/a

appllama-app-design-skill

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

api-design-review

add-customer-to-user-list

humanizer