jpskill.com
🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Expo UI Swift UI

expo-ui-swift-ui

Expo（エキスポ）で開発した

⚡ ⏱ 障害ポストモーテム 1日 → 1時間

📺 まず動画で見る(YouTube)

▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗

※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。

📜 元の英語説明(参考)

expo-ui-swift-ui

🇯🇵 日本人クリエイター向け解説

一言でいうと

Expo（エキスポ）で開発した

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o expo-ui-swift-ui.zip https://jpskill.com/download/2832.zip && unzip -o expo-ui-swift-ui.zip && rm expo-ui-swift-ui.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/2832.zip -OutFile "$d\expo-ui-swift-ui.zip"; Expand-Archive "$d\expo-ui-swift-ui.zip" -DestinationPath $d -Force; ri "$d\expo-ui-swift-ui.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して expo-ui-swift-ui.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → expo-ui-swift-ui フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

💬 こう話しかけるだけ — サンプルプロンプト

  • › Expo UI Swift UI を使って、最小構成のサンプルコードを示して
  • › Expo UI Swift UI の主な使い方と注意点を教えて
  • › Expo UI Swift UI を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

name: expo-ui-swift-ui description: @expo/ui/swift-ui パッケージを使用すると、アプリで SwiftUI の View と modifier を使用できます。

このスキルに記載されている手順は、SDK 55 のみに適用されます。他の SDK バージョンについては、そのバージョンの Expo UI SwiftUI ドキュメントを参照して、最も正確な情報を確認してください。

使用する状況

  • @expo/ui/swift-ui を使用して、Expo で iOS ネイティブ UI を構築する必要がある場合。
  • タスクに SwiftUI の View または modifier の選択、Host でのツリーのラップ、または RNHostView での React Native コンポーネントの埋め込みが含まれる場合。
  • SwiftUI の統合と拡張に関するガイダンスとして、Expo SDK 55 の動作をターゲットとしている場合。

インストール

npx expo install @expo/ui

インストール後、ネイティブの再ビルドが必要です (npx expo run:ios)。

手順

  • Expo UI の API は SwiftUI の API を反映しています。SwiftUI の知識を使用して、どのコンポーネントまたは modifier を使用するかを決定してください。
  • コンポーネントは @expo/ui/swift-ui から、modifier は @expo/ui/swift-ui/modifiers からインポートされます。
  • コンポーネントを使用する際は、その API を確認するためにドキュメントを取得してください - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
  • modifier の API について不明な場合は、ドキュメントを参照してください - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
  • すべての SwiftUI ツリーは Host でラップする必要があります。
  • RNHostView は、SwiftUI ツリー内に RN コンポーネントを埋め込むためのものです。例：
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // ここでは、`Pressable` は RN コンポーネントなので、`RNHostView` でラップされています。
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

制限事項

  • このスキルは、タスクが上記の範囲と明確に一致する場合にのみ使用してください。
  • 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
  • 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して明確化を求めてください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

name: expo-ui-swift-ui description: @expo/ui/swift-ui package lets you use SwiftUI Views and modifiers in your app.

The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI SwiftUI docs for that version for the most accurate information.

When to Use

  • You need to build iOS-native UI in Expo using @expo/ui/swift-ui.
  • The task involves selecting SwiftUI views or modifiers, wrapping trees in Host, or embedding React Native components with RNHostView.
  • You are targeting Expo SDK 55 behavior for SwiftUI integration and extension guidance.

Installation

npx expo install @expo/ui

A native rebuild is required after installation (npx expo run:ios).

Instructions

import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.