react-native-design

概要

react-native-designとは？

react-native-designは、React Nativeで視覚的に洗練され、高性能なモバイルアプリを構築したい開発者向けの実践的なスキルセットです。StyleSheet、React Navigation、Reanimated 3などのツールを活用し、スタイリング、ナビゲーション、アニメーションの基本パターンを網羅しています。フロントエンドやUIデザイナー、React Nativeエンジニア、iOSとAndroidの両プラットフォームでネイティブ品質のユーザー体験を提供したい方に最適です。

このスキルは誰に向いている？

• UI/UXの品質向上を目指すReact Native開発者
• クロスプラットフォームのモバイルアプリを開発するチーム
• 複雑なナビゲーションフローやカスタムアニメーションを実装するエンジニア
• レスポンシブレイアウトやプラットフォーム固有のデザインパターンが必要な方

解決できる課題

• StyleSheetやstyled-componentsによる一貫性のある保守性の高いスタイリング
• React Navigation 6+を使った型安全で拡張性のあるナビゲーション
• Reanimated 3による滑らかで高性能なアニメーション
• レスポンシブレイアウトとジェスチャー操作の実装
• iOSとAndroidそれぞれに最適化されたUI調整

使い方

インストール手順

1. エージェントまたはプロジェクトにスキルを追加します：

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

2. まずはSKILL.mdを確認し、概要とベストプラクティスを把握しましょう。
3. 詳細なガイドはreferences/フォルダ内にあります：
   • references/styling-patterns.md：高度なスタイリング技術
   • references/navigation-patterns.md：ナビゲーションの設定とパターン
   • references/reanimated-patterns.md：アニメーションのレシピ

主要なファイルとフォルダ

• SKILL.md：スキルの概要と使用シナリオ
• references/：ナビゲーション、アニメーション、スタイリングのガイド集
• references/navigation-patterns.md：型安全なナビゲーションのステップバイステップ
• references/reanimated-patterns.md：Reanimated 3を使った実践的なアニメーションパターン
• references/styling-patterns.md：StyleSheet、テーマ設定、コンポーネントスタイリングのパターン

プロジェクトへの適用

• 提供されているパターンを参考にしつつ、自身のコードベースやデザインシステム、プラットフォーム要件に合わせて調整してください
• ナビゲーションやアニメーションのパターンは段階的に統合するのが効果的です
• 型安全なナビゲーションやテーマ機能を活用し、保守性と拡張性の高いアプリを目指しましょう

よくある質問

react-native-designはいつ使うべきですか？

新規のReact Nativeアプリ開発時、UIの保守性向上のためのリファクタリング時、または高度なナビゲーションやアニメーション機能を追加したいときに使います。

react-native-designは何をカバーしていますか？

StyleSheetやstyled-componentsによるスタイリング、React Navigation 6+によるナビゲーション、Reanimated 3によるアニメーションを扱います。さらにレスポンシブレイアウト、テーマ設定、ジェスチャー処理のパターンも含みます。

初心者でも使えますか？

はい。ガイドは基礎から始まり、段階的に高度な内容へ進むため、初心者から経験者まで幅広く役立ちます。

実践的な例はどこで見られますか？

references/フォルダ内にコードサンプルや実装パターンがあります。スタイリングはreferences/styling-patterns.md、ナビゲーションはreferences/navigation-patterns.md、アニメーションはreferences/reanimated-patterns.mdからご覧ください。

サポートや追加の例を見るには？

スキルディレクトリのFilesタブを開くと、利用可能なガイドやヘルパースクリプトをすべて閲覧できます。パターンは自身のプロジェクトに合わせてカスタマイズして活用してください。