スキル react-native-design
📦

react-native-design

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

React Native モバイルインターフェイスを構築

React Native チームには、プラットフォームをまたいで機能する一貫したモバイル UI パターンが必要です。このスキルは、スタイリング、ナビゲーション、ジェスチャー、アニメーションに関する実践的なガイダンスを提供します。

対応: Claude Codex Code(CC)
📊 75 十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト
Review the Skillstore skill "react-native-design" from https://skillstore.io/skills/wshobson-react-native-design.md and its manifest at https://skillstore.io/api/skills/wshobson-react-native-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/wshobson-react-native-design.md 署名済み manifest GET /api/skills/wshobson-react-native-design/manifest 署名済み lockfile GET /api/skills/wshobson-react-native-design/lockfile

テストする

「react-native-design」を使用しています。 React Native アプリの設定画面を設計してください。

期待される結果:

  • セーフエリア対応とグループ化された設定セクションを備えた画面構造。
  • タイポグラフィ、余白、区切り線、押下状態のスタイリング計画。
  • iOS と Android のインタラクション差異に関するメモ。

「react-native-design」を使用しています。 認証済み画面と公開画面を持つアプリのナビゲーションを計画してください。

期待される結果:

  • 認証、スタック、タブフローを使用したナビゲーション階層。
  • 詳細画面とモーダル向けのルートパラメータに関するガイダンス。
  • 安全なトークン保存とセッション処理に関する警告。

「react-native-design」を使用しています。 ボトムシートのアニメーション性能を改善してください。

期待される結果:

  • 共有値とジェスチャーハンドラーを使用した Reanimated アプローチ。
  • スナップポイントの動作とスプリング調整の推奨事項。
  • UI スレッドの worklet とクリーンアップに関するパフォーマンスメモ。

セキュリティ監査

安全
v4 • 2026/7/8 バージョン別レポートを開く

All static findings were adjudicated as false positives after reviewing the cited markdown and TypeScript examples. The suspicious patterns are documentation fences, JavaScript template literals, React Navigation route keys, official documentation links, and ordinary mobile UI guidance. No prompt injection, secret handling, command execution, or data exfiltration intent was found.

4
スキャンされたファイル
2,922
解析済み行数
0
レビュー項目
0
誤検知を無視

リスク要因

⚙️ 外部コマンド (36)
references/navigation-patterns.md:684-687 references/navigation-patterns.md:687-701 references/navigation-patterns.md:701-704 references/navigation-patterns.md:704-720 references/navigation-patterns.md:720-721 references/navigation-patterns.md:721-726 references/reanimated-patterns.md:30-59 references/reanimated-patterns.md:187-200 references/reanimated-patterns.md:511-520 references/reanimated-patterns.md:608-644 references/styling-patterns.md:306-313 SKILL.md:27-57 SKILL.md:57-61 SKILL.md:61-99 SKILL.md:99-105 SKILL.md:105-135 SKILL.md:135-141 SKILL.md:141-173 SKILL.md:173-181 SKILL.md:181-185 SKILL.md:185-219 SKILL.md:219-225 SKILL.md:225-254 SKILL.md:254-258 SKILL.md:258-295 SKILL.md:295-299 SKILL.md:299-326 SKILL.md:326-330 SKILL.md:330-412 SKILL.md:412-417 SKILL.md:417 SKILL.md:420 SKILL.md:427 SKILL.md:428-429 SKILL.md:429-431 SKILL.md:431
🌐 ネットワークアクセス (6)
references/navigation-patterns.md:430 SKILL.md:436 SKILL.md:437 SKILL.md:438 SKILL.md:439 SKILL.md:440
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex 監査履歴を表示 →
このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く
セキュリティ評価

レポートリンクをコピー

https://skillstore.io/skills/wshobson-react-native-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-react-native-design/security.svg)](https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/wshobson-react-native-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-react-native-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/wshobson-react-native-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学術引用 (APA · BibTeX · CFF)

APA形式の引用

wshobson. (2026). react-native-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-react-native-design/audits/4

BibTeX形式の引用

@techreport{wshobson-wshobson-react-native-design-2026, author = {wshobson}, title = {react-native-design security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/wshobson-react-native-design/audits/4}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "react-native-design security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "wshobson" date-released: "2026-07-08" url: "https://skillstore.io/skills/wshobson-react-native-design/audits/4" identifiers: - type: other value: "skillstore:wshobson-react-native-design:audit:4" description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由 証拠の信頼度: 高
45
アーキテクチャ
85
保守性
87
コンテンツ
72
コミュニティ
83
仕様準拠

作成できるもの

モバイル画面システムを設計

React Native アプリ向けに、再利用可能なレイアウト、余白、タイポグラフィ、コンポーネントパターンを作成します。

アプリナビゲーションを計画

クロスプラットフォームアプリ向けに、スタック、タブ、ドロワー、モーダル、認証、ディープリンクのフローを選択します。

モーションとジェスチャーを改善

UI スレッドをブロックせずに、高性能な Reanimated ジェスチャー、トランジション、インタラクティブなアニメーションを追加します。

これらのプロンプトを試す

スタイル付き画面を作成 
このスキルを使用して、StyleSheet、セーフエリア、アクセシブルなテキスト階層を備えた React Native のプロフィール画面を設計してください。
ナビゲーションフローを構築 
このスキルを使用して、ホーム、検索、詳細、設定、認証画面を持つアプリのスタックおよびタブナビゲーションを計画してください。
ジェスチャーアニメーションを追加 
このスキルを使用して、Gesture Handler と Reanimated の共有値を使ったスワイプ可能なカード操作を設計してください。
モバイル UX アーキテクチャをレビュー 
このスキルを使用して、ナビゲーションの一貫性、プラットフォーム差異、アニメーション性能、スタイリングの再利用性の観点から、私の React Native アプリを監査してください。

ベストプラクティス

  • 複雑なナビゲーションフローを追加する前に、TypeScript のルート型とコンポーネント型を使用します。
  • レイアウトとジェスチャーは、実機の iOS および Android デバイスでテストします。
  • アニメーションは UI スレッド上で実行し、コンポーネントのアンマウント時にクリーンアップします。

回避

  • 機密性の高い認証トークンをプレーンな AsyncStorage に保存しないでください。
  • 最終的な UI 判断を 1 つのプラットフォームシミュレーターだけに依存しないでください。
  • FlatList が必要な場合に、長いリストを ScrollView 内に配置しないでください。

よくある質問

このスキルは何の構築を支援しますか?
モバイルアプリ向けの React Native スタイリングシステム、ナビゲーションフロー、ジェスチャー、アニメーションの構築を支援します。
どのナビゲーションライブラリを扱いますか?
スタック、タブ、ドロワー、モーダル、認証フロー、ディープリンク向けの React Navigation パターンに重点を置いています。
Reanimated を扱いますか?
はい。Reanimated の共有値、アニメーションスタイル、ジェスチャー、トランジション、パフォーマンスの実践方法を扱います。
iOS と Android の両方に対応した設計ができますか?
はい。プラットフォーム固有のガイダンス、セーフエリア、レスポンシブなサイズ調整、インタラクション差異を含みます。
本番環境向けの完全なセキュリティガイダンスを提供しますか?
いいえ。セキュリティに関わる領域、特に認証トークンの保存には、別途モバイルセキュリティレビューが必要です。
Claude、Codex、Claude Code はこれを使用できますか?
はい。レポートには、Claude、Codex、Claude Code ワークフローのサポートが記載されています。

開発者情報

作成者

wshobson

ライセンス

MIT

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/react-native-design/

参照

64ca8af0f54a325752f08bd54e52151061ea659a

メンテナンスの新しさ

2026/7/26

利用状況

7 ダウンロード · 326 閲覧

ファイル構成

📁 references/

📄 navigation-patterns.md

📄 reanimated-patterns.md

📄 styling-patterns.md

📄 SKILL.md

wshobson のその他のスキル

すべて表示

関連スキル

すべて表示