react-native-design

react-native-designスキルの概要

react-native-design は、React Native のUI実装パターンを生成・レビューすることに特化したスキルです。特に StyleSheet、レスポンシブなレイアウト、React Navigation、Reanimated 3 まわりに強みがあります。汎用的な「この画面をいい感じにして」というプロンプトよりも、本番運用に近い React Native の構成で出力してほしい開発者、AI支援コーディングの利用者、クロスプラットフォームのモバイルUIを作るプロダクトチームに向いています。

react-native-design は何のためのスキルか

このスキルの本質的な役割は、抽象的な意味での「デザイン」ではありません。UI要件を、モバイル特有の制約を踏まえた React Native のコードと実装パターンに落とし込むことです。たとえば、画面レイアウト、プラットフォーム差異、型安全なナビゲーション、ジェスチャーに配慮した操作、パフォーマンスを意識したアニメーション選定などを尊重した実装に向いています。

react-native-design を導入すべき人

次のような用途で日常的に支援が必要なら、react-native-design を使う価値があります。

• React Native で画面やコンポーネントのレイアウトを組み立てたい
• stack、tabs、ネストした navigation パターンのどれを選ぶべきか判断したい
• Reanimated 3 のアニメーションを、APIを手探りせずに導入したい
• スタイル、バリアント、テーマ設計を保守しやすく整理したい
• ざっくりしたプロダクト要件を、そのまま実装に入れるUIコードへ落とし込みたい

汎用プロンプトと比べて react-native-design が違う点

最大の違いは、対象範囲が明確に絞られていることです。react-native-design は幅広いフロントエンドデザイン支援ではなく、React Native の実装ディテールに寄せたスキルです。さらに、ユーザーをスキル内の参照ファイルにある具体的なパターンへ導きます。

• references/styling-patterns.md
• references/navigation-patterns.md
• references/reanimated-patterns.md

そのため、単なる見た目の提案ではなく、モバイルUIのコード構造が必要な場面でより実用的です。

react-native-design が得意なこと

react-native-design が最も力を発揮するのは、次の3領域です。

1. StyleSheet を使った画面・コンポーネントのスタイリング
2. 型付き route params を含む navigation 設計
3. Reanimated 3 を使ったアニメーションとインタラクションの実装パターン

目的がこのどれかに関わるなら、プロンプトの曖昧さを減らし、最初の実装をかなり早く進めやすくなります。

導入前に知っておきたい重要な制約

これはフル機能のデザインシステムパッケージでも、コンポーネントライブラリでも、Expo のセットアップウィザードでもありません。アプリ固有のUX判断、アクセシビリティレビュー、テストの代わりにもなりません。主目的が Figma 生成、Web CSS、ブランド表現の検討であれば、react-native-design は適切ではない可能性が高いです。

react-native-designスキルの使い方

スキル環境に react-native-design をインストールする

リポジトリからスキルを追加します。

npx skills add https://github.com/wshobson/agents --skill react-native-design

インストール後は、汎用的なUIアイデアではなく、React Native のUI実装ガイダンスをエージェントに出してほしいときに react-native-design を呼び出してください。

まず読むべきファイル

手早く評価したいなら、次の順で読むのがおすすめです。

1. SKILL.md
2. references/styling-patterns.md
3. references/navigation-patterns.md
4. references/reanimated-patterns.md

この読み順は、導入時によくある確認ポイントに対応しています。まずスタイリング、次にアプリの画面遷移、最後にモーションです。

react-native-design に必要な入力

react-native-design は、画面名だけのような曖昧な依頼より、実装前提が具体的に与えられたときに最も安定して機能します。次の情報を含めてください。

• React Native の構成情報: Expo か bare か、TypeScript か JavaScript か
• 対象プラットフォーム: iOS、Android、または両方
• すでに使っている navigation stack があればその内容
• state management や theming に関する制約
• その画面の目的とユーザー操作の流れ
• 必要なアニメーション意図、ジェスチャー挙動、パフォーマンス面の配慮

弱い入力例:

• “Build a profile screen.”

より良い入力例:

• “Using React Native with TypeScript and React Navigation native stack, build a profile screen for iOS and Android with a header, avatar, stats row, editable bio, and sticky action bar. Use StyleSheet, support dark mode, and include a subtle Reanimated entrance for the stats cards.”

後者のように条件がそろっていると、react-native-design はあなたの技術スタックに合ったコードを返しやすくなります。

ざっくりした要件を良い react-native-design プロンプトに変える

実務で使いやすいプロンプトの型は次のとおりです。

Use react-native-design.

Context:
- Stack: React Native + TypeScript
- Navigation: React Navigation native stack
- Styling: StyleSheet only
- Platforms: iOS and Android

Goal:
Build a [screen/component] for [user task].

Requirements:
- Include [layout sections]
- Handle [states, empty/loading/error]
- Use [navigation behavior]
- Add [animation/gesture needs]
- Keep code modular and production-oriented

Output:
- component code
- styles
- navigation types if needed
- short explanation of key design choices

この形式なら、スキル側が見当違いのアプローチを組み立てるのではなく、適切なパターン群から選んで返しやすくなります。

画面実装でのおすすめワークフロー

react-native-design を使うなら、次の流れが最もブレにくいです。

1. まず画面構造と状態マップを出してもらう
2. 次にベースとなる component と StyleSheet を作る
3. その後で navigation を統合する
4. レイアウトが固まってからアニメーションを足す
5. 出力が大きくなったら、小さな component に分割するよう依頼する

この順序が重要なのは、階層構造が安定してからのほうが、navigation と animation をきれいに追加しやすいからです。

スタイリング系の参照ファイルは意図して使う

references/styling-patterns.md は最も汎用性の高い参照ファイルです。ここには次のようなパターンがあります。

• typed styles
• style composition
• theme context approaches
• external style overrides

react-native-design に UI Design 作業を依頼するときは、素の StyleSheet を使いたいのか、theme token を使いたいのか、style variants を採用したいのかを明示してください。そこが曖昧だと、技術的には正しくても、あなたのコードベースの流儀と噛み合わない出力になりがちです。

アプリ構造の相談では navigation の参照が効く

references/navigation-patterns.md は、ネストした navigator、route params、TypeScript で安全な screen props が絡む依頼で特に有効です。react-native-design には、たとえば次のような出力を求めるとよいです。

• param list definitions
• screen prop typing
• navigator composition
• hook usage for navigation and route access

ここは汎用プロンプトとの差が出やすい部分です。navigation まわりのコードは、route type を省くと崩れやすいためです。

モーションが重要なときだけ Reanimated の参照を使う

references/reanimated-patterns.md は、次のような具体的なモーション要件に強いファイルです。

• entrance or exit transitions
• gesture-driven transforms
• spring or timing animation choices
• animation callbacks and state handoff

まだ画面レイアウトが定まっていない段階で、最初からアニメーション主体で進めるのは避けたほうが無難です。実際には、安定した component tree の上にモーションを重ねる形のほうが、react-native-design の出力品質は上がります。

このスキルに合う実践的なプロンプト例

スタイリング例:

Use react-native-design to create a settings screen with grouped sections, reusable row components, and dark mode support. Use React Native `StyleSheet`, keep spacing tokenized, and show how to override row styles safely.

navigation 例:

Use react-native-design to set up a root stack with auth flow, main tabs, and a modal details screen. Generate TypeScript param lists and example screen props for each layer.

アニメーション例:

Use react-native-design to add Reanimated 3 interactions to a draggable card deck. Explain which values should be shared values, which styles should be animated, and where to keep React state separate.

導入時によくあるつまずき

react-native-design で不満が出る原因の多くは、機能不足ではなく前提情報の不足です。よくある詰まりどころは次のとおりです。

• React Native の制約を示さずに「design」だけを依頼する
• ネイティブレイアウトの依頼に Web CSS 的な期待を混ぜてしまう
• どの navigator を使っているか示さずに navigation コードを求める
• react-native-reanimated が既に導入済みか伝えずに animation を依頼する

環境情報と、期待する出力の形を明示すれば、react-native-design の結果はかなり予測しやすくなります。

react-native-designスキル FAQ

react-native-design は初心者にも向いていますか？

はい。少なくとも React Native プロジェクトの基本構造を理解しているなら有用です。実装に使えるパターンを返してくれますが、ファイルの置き場所やアプリの起動方法まで完全に教えてくれる前提ではありません。初心者なら、まずはスタイリング系の依頼から始めて、ネストした navigation や高度な Reanimated 挙動は後回しにするのが得策です。

react-native-design は見た目の磨き込み専用ですか？

いいえ。react-native-design はビジュアル提案よりも実装寄りのスキルです。特に価値が出やすいのは、型付き navigation、再利用しやすい styled components、パフォーマンスを意識した animation 構成といったコード設計です。ブランド表現をピクセル単位で詰めたい場合は、別途デザインソースと組み合わせるのがよいでしょう。

react-native-design は普通のプロンプトとどう違いますか？

通常のプロンプトは、モバイルの navigation、プラットフォーム差異、Reanimated の作法を無視した、React 風の汎用コードを返しがちです。react-native-design は対象範囲が狭いぶん、リポジトリ内の参照資料に根ざした React Native 固有のパターンを返しやすいのが違いです。

どんなときは react-native-design を使わないほうがよいですか？

次のような作業が中心なら、react-native-design は見送ったほうがよいです。

• web UI や CSS architecture
• React Native 以外のモバイルフレームワーク
• backend や API design
• 実装先のない純粋な UX 戦略検討
• ビジュアルアセット制作

また、アプリ内のあらゆるパッケージについて完全な依存関係の導入手順まで一括で必要なら、相性はあまりよくありません。このスキルは、プロジェクト全体のブートストラップよりも、実装パターンの提示に重心があります。

react-native-design は navigation のセットアップにも対応していますか？

はい。これは react-native-design を使う理由のひとつです。navigation の参照には、@react-navigation/native、native stack、tabs、react-native-screens、react-native-safe-area-context に関する具体的な導入文脈と型付きパターンが含まれています。

react-native-design はアニメーションにも役立ちますか？

はい。特に Reanimated 3 の shared values、animated styles、spring/timing transitions、callback の流れといった概念整理に向いています。やりたいインタラクションは明確だけれど、それを正しい Reanimated の構造にどう落とすか迷う場面で役立ちます。

react-native-designスキルを改善する方法

最初に react-native-design へ実装上の制約を渡す

出力品質を最も手早く改善する方法は、制約条件を先に渡すことです。

• Expo か bare React Native か
• TypeScript か JavaScript か
• 使用する styling system
• navigator の選択
• 必要なら package versions
• 対象プラットフォーム
• アクセシビリティやパフォーマンス要件

これだけで、「もっともらしいが自分のアプリには合わない」という返答をかなり減らせます。

正常系だけでなく状態を指定する

初回のUIプロンプトでは、loading、empty、error、offline、disabled といった状態が抜けがちです。react-native-design は、そうした状態を明示したほうが実用性が上がります。これらはレイアウトだけでなく、navigation ロジックや animation の振る舞いにも影響するためです。

より良い依頼例:

• “Include loading, empty, and error states with reusable layout wrappers.”

設計と見た目の磨き込みを分ける

スタイリング、navigation、複雑な animation を一度に依頼すると、出力が肥大化しやすくなります。おすすめの順序は次のとおりです。

1. architecture
2. base screen code
3. navigation typing
4. motion details
5. cleanup and extraction

この順序なら、react-native-design の焦点がぶれにくく、レビューもしやすくなります。

何を最適化したいかを伝える

React Native チームごとに重視するトレードオフは異なります。優先順位を明示してください。

• readability
• reusability
• animation performance
• strict typing
• fast prototyping
• platform consistency

ここを伝えないと、react-native-design は技術的には正しくても、チーム基準には合わないパターンを選ぶことがあります。

依頼文でスキルの参照ファイルを明示する

react-native-design の使い勝手は、見てほしい参照セットを直接指定するとさらに上がります。

• “Follow the style composition approach from references/styling-patterns.md.”
• “Use the typed navigator approach from references/navigation-patterns.md.”
• “Apply shared values and animated styles in the spirit of references/reanimated-patterns.md.”

抽象的に「best practices」を求めるより、こうした指定のほうが根拠のある回答になりやすいです。

よくある失敗パターンを見逃さない

ありがちな弱い出力には、次のようなものがあります。

• スタイルは正しいが token 化や再利用を前提としていない
• navigation の例に完全な param typing がない
• 単純なレイアウト遷移で十分なのに Reanimated コードを足している
• コンポーネントが見た目の構造とアプリ状態を密結合させている

こうした兆候が見えたら、react-native-design に「1つの関心ごとごとに分けてリファクタリングして」と依頼すると改善しやすいです。

component の境界を指定してプロンプトを改善する

巨大な1画面を丸ごと依頼するのではなく、次のような境界を示してください。

• ProfileHeader
• StatsRow
• ActionBar
• SettingsSection

この指定があると、react-native-design は実プロジェクトに貼り込みやすく、テストもしやすい、モジュール化されたコードを返しやすくなります。

1回目の回答のあとに改善を重ねる

最も良い進め方は、巨大な一発プロンプトではなく、良い初回プロンプトに続けて、明確な修正依頼を出すことです。たとえば次のような追記が有効です。

• “Now extract shared styles into reusable tokens.”
• “Now add typed route params and screen prop helpers.”
• “Now replace basic transitions with Reanimated 3 springs.”
• “Now make the layout more robust for small screens.”

実際の統合作業に耐えるコードへ持っていくには、この段階的なやり取りがいちばん現実的です。

react-native-design は UI Design に使い、最終QAの代わりにはしない

UI Design のための react-native-design は、実装構造やコードパターンの提案に最も強みがあります。ただし、それを最終工程にしてはいけません。結果は必ず実機上で確認してください。

• touch target size
• safe area handling
• keyboard overlap
• animation smoothness
• platform-specific visual differences

React Native の問題は、この最終確認の段階で表面化することが多く、どんなスキルでもそこを完全に代替することはできません。