Skip to main content

In this article

AR/VR開発者向けClaude Skillsトップ8

著者
Headshot of Stephen Thoemmes

Stephen Thoemmes

0 分で読めます

XR開発者コミュニティ（r/virtualreality、r/Unity3DのVRチャンネル、WebXR Discord、AppleのvisionOS開発者フォーラムなど）を見ていると、現実的な変化が起きていることに気づくでしょう。開発者たちは、AIツールを開発ワークフローに取り入れるべきかどうかを議論する段階を終え、どのように活用しているかを共有しています。

Unityは2025年8月、Unity 6.2でUnity AIの統合を発表し、コーディング、アセット生成、最適化を支援するエージェント型AIをエンジンに直接組み込みました。ツールは自然言語を理解するため、C#スクリプトやマテリアル、アニメーションまで指示するだけで、すぐに結果を得られます。WebXRでは、2025年2月にAndrej Karpathyが広めた「バイブコーディング」という考え方が浸透しつつあります。WebXRとThree.jsを基盤とするフレームワークXR Blocksは、「アイデアから実現までのコードを最小限に」というミッションのもと、AI支援開発による迅速なプロトタイピングを実現するために設計されました。Appleは2025年3月、Vision ProにApple Intelligenceを導入し、AIを活用した文章作成ツール、Image Playground、生成AIによる強化された空間シーン生成機能を追加しました。

Unity XR、WebXR、visionOS開発に共通するのは、AIが開発者のデザイン判断や空間的思考を置き換えるものではないということです。AIは、これまで必要ではあっても時間がかかっていた作業（定型的なUIコード、シェーダーの設定、パフォーマンス最適化、ドキュメント作成）を担います。その分、開発者は創造性と専門性が求められる作業（インタラクションデザイン、存在感、没入感、空間UX）に集中できます。

Build Apps Anytime, Anywhere - New Cursor Web & Mobile Agents

SnykのBrian Clarkが、モバイル開発ワークフローを含む新しいAIコーディングツールについて解説します。モバイルARや空間コンピューティングの開発には、従来のモバイル開発と共通するパターンが多く、これらのワークフローはARKitやARCoreのプロジェクトにもそのまま応用できます。

Claude Skillsは、XR開発者がAI支援ワークフローを始めるうえで、最も実用的な方法のひとつです。まだ使ったことがなければ、Claudeのエコシステムの中で独自の位置を占めているため、知っておく価値があります。

Claude Skillsとは（そして、そうではないもの）

Claudeのエコシステムには複数の拡張機能があり、混同しやすいものです。違いを簡単に整理してみましょう。

  • CLAUDE.mdファイルは、プロジェクトの永続的なメモリです。すべてのセッションで読み込まれ、「このプロジェクトではUnity 2022.3 LTSを使用する」「すべてのスクリプトでVR.Core名前空間を使う」といった情報をClaudeに伝えます。常に有効なコンテキストであり、必要なときに呼び出す機能ではありません。

  • カスタムスラッシュコマンド（.claude/commands/*.md）は、/command-nameで呼び出すシンプルなプロンプトテンプレートでした。現在は実質的にSkillsに統合されています。フロントマターにargument-hintを定義したSkillsはスラッシュコマンドとして呼び出せます。それ以外のSkillsは、タスクに応じてコンテキストに基づいて有効になります。

  • MCPサーバーは、Model Context Protocolを介してツールやデータソースを公開する実行中のプロセスです。ClaudeがAPIを呼び出したり、データベースを照会したり、外部サービスと連携したりできるようにします。サーバープロセスとコードが必要です。

  • Claude Connectorsは、OAuthを使うリモートMCPサーバーを介して、ClaudeをSlack、Figma、Asanaなどの外部サービスに接続します。

  • Claude Appsとは、Claudeが動作するプラットフォーム（Claude.ai、Claude Code、モバイル、デスクトップ）を指し、Claudeの拡張機能ではありません。

  • Pluginsは、Skills、エージェント、フック、MCPサーバーをひとまとめにして配布するためのパッケージです。

Claude Skillsは、SKILL.mdファイル（YAMLフロントマターとMarkdownの指示を含む）と、スクリプト、テンプレート、リファレンス文書などの任意の補助ファイルを格納したディレクトリです。主な特徴は次のとおりです。

  1. 単一ファイルではなく、ディレクトリです。Skillには、指示とともにシェルスクリプト、Pythonのヘルパー、リファレンス文書、アセットファイルをまとめられます。

  2. 段階的な情報開示。起動時にClaudeが読み込むのは、各SkillのYAMLフロントマターにあるnameとdescriptionのみ（Skillあたり約100トークン）です。これは、MCPツールの説明がコンテキストに追加される仕組みに似ています。Claudeはこれらの説明とタスクを照合し、どのSkillを有効にするか判断します。一致するSkillが見つかると、SKILL.mdの指示全体を読み込みます。補助ファイル（リファレンス、スクリプト、アセット）は、実行中に明示的に必要になった場合にのみ読み込まれます。この3段階の仕組みにより、何十個ものSkillsをインストールしてもコンテキストウィンドウを軽く保てます。また、Skillのdescriptionフィールドが重要であることも意味します。説明が曖昧だと有効化が不安定になる一方、「ユーザーがThree.jsのシーン生成を求めたときにこのSkillを使う」のように明確なトリガーフレーズを含めれば、安定して有効になります。

  3. コードを実行できます。Skillsには、実行中にClaudeが動かすscripts/内のスクリプトを含められます。また、!command``構文を使って、動的な出力をプロンプトのコンテキストに挿入できます。

  4. オープンスタンダードに準拠しています。Agent Skills仕様はClaude Code、OpenAI Codex、Cursor、Gemini CLIなどに採用されており、Skillsをさまざまな環境で利用できます。

  5. スラッシュコマンドとして登録できます。YAMLフロントマターにargument-hintフィールドを含むSkillは、/skill-nameとして直接呼び出せます。たとえば、.claude/skills/threejs/にインストールしたSkillは、引数ヒントを設定すると/threejsとして使用できます。引数ヒントのないSkillは、説明に一致するタスクをClaudeが自動的に認識し、状況に応じて有効になります。

公式仕様とAnthropicのSkillsドキュメントでは、フォーマットの全容を確認できます。Agent Skillsの設計意図を知るには、Anthropicのエンジニアリングブログ記事もおすすめです。

Claude Skillをインストールする

Skillのインストールは約30秒で完了します。

プロジェクトレベル（バージョン管理を通じてチームと共有）:

your-project/
└── .claude/
    └── skills/
        └── skill-name/
            ├── SKILL.md
            └── scripts/
                └── helper.sh

ユーザーレベル（個人用で、すべてのプロジェクトで利用可能）:

~/.claude/
└── skills/
    └── skill-name/
        ├── SKILL.md
        └── references/
            └── REFERENCE.md

Plugins経由（Skillのコレクション向け）:

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

プロジェクトレベルのSkillsは、ソース管理を通じてチームメンバーと共有されます。ユーザーレベルのSkillsは自分だけが使えます。名前が重複する場合は、エンタープライズSkills、個人用Skills、プロジェクトSkillsの順に優先されます。

重要な注意点があります。Agent Skillsのエコシステムは新しく、急速に成長しているため、サプライチェーンセキュリティが重要です。SnykのToxicSkills調査では、検証したSkillsの36%にプロンプトインジェクションが見つかり、エコシステム全体で1,467件の悪意あるペイロードが確認されました。インストールする前に、必ずSkillのSKILL.mdと同梱スクリプトを確認してください。Skillsは、自分の環境で実行するサードパーティ製コードと同じように扱いましょう。

Claude Skillを開発していますか？AR/VR開発、空間コンピューティング、没入型体験向けのオープンソースClaude SkillやMCPサーバーを作成・保守している方は、Snyk Secure Developer Programを通じて、オープンソースプロジェクト向けのエンタープライズレベルのセキュリティスキャンを無料で利用できます。Snykは585,000件以上のオープンソースプロジェクトを保護し、対象となるメンテナーにエンタープライズ機能のフルアクセス、Discordコミュニティのサポート、インテグレーション支援を提供しています。既存のプロジェクトがある方はこちらからお申し込みください。新しいプロジェクトを始める方はこちらからどうぞ。

このリストについて

AR/VR開発はニッチな領域であり、Claude Skillsのエコシステムにもその状況が反映されています。Unity XRのハンドトラッキング、Unreal VRのブループリントシステム、ARCoreの空間アンカーに特化したSkillsはありません。既存のSkillsは、モバイル開発（React Native、SwiftUI、Expo）、Web開発（Three.js、WebXR）、ゲーム開発（Unity、プロシージャル生成）、ビジュアルデザイン（canvas、UIコンポーネント）など、より幅広いカテゴリと大きく重なっています。

このリストには、VRだけに特化したものではなくても、AR/VRのワークフローに直接役立つSkillsを掲載しています。React NativeのSkillはQuestのコンパニオンアプリ開発に、Three.jsのSkillはWebXRシーンの作成に、SwiftUIのSkillはvisionOSのインターフェース開発に役立ちます。空間体験を開発しているなら、今日から時間を節約できるSkillsです。

それでは、リストを見ていきましょう。

#

Skill

スター数

対象分野

ソース

1

Three.js Skills

1,313

WebXR、3Dシーン、空間Web

CloudAI-X/threejs-skills

2

Vercel React Native

19,582

React Nativeのベストプラクティス、パフォーマンス

vercel-labs/agent-skills

3

Remotion Video Generation

1,493

Reactによるプログラム動画生成

remotion-dev/skills

4

SwiftUI Expert

1,331

最新のSwiftUI、iOS 26以降、visionOS

AvdLee/SwiftUI-Agent-Skill

5

Expo App Design & Deployment

926

Expoアプリ、React Nativeのデプロイ

expo/skills

6

iOS Simulator Control

473

iOS Simulatorの自動化、テスト

conorluddy/ios-simulator-skill

7

Anthropic Canvas & Frontend Design

66,460

ビジュアルアート、UIデザイン、フロントエンドのパターン

anthropics/skills

8

Callstack React Native Best Practices

814

React Nativeのパフォーマンス最適化

callstackincubator/agent-skills

1. Three.js Skills

ソース: CloudAI-X/threejs-skills。スター数: 1,313。ライセンス: 未指定。最終更新: 2026年1月。SKILL.mdの確認: 済み。

WebXR体験を構築しているなら、このSkillが最も時間の節約に役立つでしょう。Three.jsはWeb上の3Dグラフィックスで最も広く使われているライブラリで、2025～2026年時点でAI支援開発に最適な位置にあります。セットアップがシンプル（サーバーやデータベース不要でJavaScriptだけで使える）、視覚的なフィードバックがすぐ得られる（変更がブラウザーに即座に反映される）、GPUの複雑さを抽象化する扱いやすいAPIを備えている、といった特徴があります。

対象範囲

このSkillは、シーンのセットアップ、ジオメトリとマテリアル、ライティングとシャドウ、カメラ操作、アニメーションループ、WebXRとのインテグレーションなど、Three.jsで3D要素やインタラクティブな体験を作成するためのガイダンスを提供します。2025年に広まった「バイブコーディング」の考え方に対応しており、開発者が作りたいものを説明すると、Claudeがコードを生成します。

AR/VR開発で重要な理由

WebXRは、ブラウザー上でVRやAR体験を実現するための標準です。2025年に発表されたXR Blocksフレームワークは、WebXRとAIを活用した開発に特化して構築されており、AIとXRのプロトタイピング向けに、組み合わせて使えるコンポーネントを備えたモジュール型アーキテクチャを提供します。2025年10月に発売されたSamsungのGalaxy XRデバイスはAndroid XRを搭載し、WebXRブラウザーを内蔵しています。Apple Vision ProはSafari経由でWebXRに対応しています。クロスプラットフォームの空間Web体験を構築するなら、基盤となるのはThree.jsであり、このSkillが開発ワークフローを加速します。

インストール

git clone https://github.com/CloudAI-X/threejs-skills.git
cp -r threejs-skills/.claude/skills/threejs ~/.claude/skills/

使い方

3Dシーンの作業について説明すると、Skillが自動的に有効になります。

Create a Three.js scene with a rotating cube and directional lighting
Add WebXR support to this Three.js scene for Meta Quest
Generate a particle system for a spatial web experience

対象: WebXR開発者、空間Webデザイナー、Quest、Vision Pro、Android XR向けにブラウザーベースのVR体験を構築する開発者。

関連リソース:

2. Vercel React Nativeのベストプラクティス

ソース: vercel-labs/agent-skills。スター数: 19,582。ライセンス: 未指定。最終更新: 2026年2月。SKILL.mdの確認: 済み。

React Nativeはモバイル開発で広く使われているフレームワークのひとつであり、モバイル開発はAR/VRエコシステムの重要な要素です。Meta Questのコンパニオンアプリ、ARKitのユーティリティ、ARCoreの体験、visionOSのサポートアプリは、React Nativeで開発されることがよくあります。VercelチームのSkillsリポジトリには、ベストプラクティスとパフォーマンスのガイドラインを扱うReact Native専用のSkillが含まれています。

対象範囲

このスキルは、コンポーネントの合成、状態管理のパターン、ナビゲーションの設定、パフォーマンスの最適化、ネイティブモジュールの統合、TypeScriptの使用など、React Nativeのベストプラクティスを提供します。Vercel独自の開発アプローチに基づいており、本番環境への対応とスケーラビリティを重視しています。

AR/VRにおける重要性

多くのVRアプリには、連携するモバイルアプリが必要です。Meta Questアプリには、アカウント管理、ソーシャル機能、設定用のiOS/Androidユーティリティが用意されていることがよくあります。WebベースのARを対象とする場合、ARKitやARCoreの体験はReact Nativeで直接構築できます。モバイルでのオンボーディングフローを備えたQuestアプリや、WebViewで動作するARCore体験を開発するなら、このスキルが最新のベストプラクティスに沿った開発を支援します。

インストール

/plugin marketplace add vercel-labs/agent-skills
/plugin menu

または手動でインストールする場合:

git clone https://github.com/vercel-labs/agent-skills.git
ln -s vercel-labs/agent-skills/skills/react-native-skills ~/.claude/skills/

使い方

React Nativeプロジェクトで作業すると、このスキルが有効になります:

Set up a React Native navigation structure for this Quest companion app
Optimize this React Native ARCore component for 60fps
Add TypeScript support to this React Native ARKit project

対象者: React NativeでQuest連携アプリ、ARKit/ARCore対応のモバイル体験、visionOS対応ユーティリティを開発する方。

関連するSnykのリソース:

3. Remotionによる動画生成

ソース: remotion-dev/skills。スター数: 1,493。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み。

Remotionを使うと、Reactでプログラムから動画を作成できます。Reactコンポーネントを記述すると、Remotionが動画としてレンダリングします。デモ動画、マーケティング素材、チュートリアルコンテンツ、空間内のウォークスルーなどを生成する必要があるVR/ARのワークフローで、特に役立ちます。

対象範囲

このスキルは、Reactコンポーネントを使った動画コンポジションの作成に向けて、タイムライン管理、アニメーションシーケンス、アセットの処理、動画のエクスポートなど、RemotionのAPIを使う方法をClaudeに案内します。時間を第一級の概念として扱うRemotionの宣言的なアプローチ（useCurrentFrame()とuseVideoConfig()）にも対応しています。

AR/VRにおける重要性

VR/AR開発者は、プロモーション動画やチュートリアルコンテンツ、デモリールを頻繁に作成する必要があります。従来は、画面録画ソフトウェアや動画編集ツールを使い、タイムラインを手作業で編集しなければなりませんでした。Remotionを使えば、こうした動画をプログラムから生成できます。Google Labsが、アプリのデザインからウォークスルー動画を生成するためにStitchスキルを開発したことからも、Remotionが空間コンピューティングのワークフローにどう活用できるかが分かります。

インストール

git clone https://github.com/remotion-dev/skills.git
cp -r skills/skills/remotion ~/.claude/skills/

使い方

Create a Remotion composition that shows a 3D product rotating
Generate a 30-second walkthrough video of this Unity XR scene
Build a marketing video with animated text overlays for this VR app

対象者: マーケティング動画、チュートリアルコンテンツ、空間体験のウォークスルーをプログラムから生成したいVR/AR開発者。

4. SwiftUI Expert

ソース: AvdLee/SwiftUI-Agent-Skill。スター数: 1,331。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み。

SwiftUIは、visionOSアプリケーションの開発にAppleが推奨するフレームワークです。Vision Proの開発ガイドラインでは、奥行き、ジェスチャ、エフェクト、イマーシブなシーンタイプに対応する新しい3D機能を備えたSwiftUIが、空間アプリの開発に最適な方法として強調されています。このスキルでは、iOS 26以降と、新たに登場した「Liquid Glass」デザイン言語を中心に、最新のSwiftUIのベストプラクティスを扱います。

対象範囲

このスキルは、ビューの合成、@State、@Binding、@ObservedObjectを使った状態管理、ナビゲーションのパターン、アニメーションAPI、iOS 26以降のLiquid Glassの採用など、最新のSwiftUIパターンを提供します。Appleや経験豊富なiOS開発者が公開している最新のベストプラクティスに準拠しています。

AR/VRにおける重要性

visionOSアプリケーションはSwiftUIで構築されます。Appleは、SwiftUI、RealityKit、ARKitを組み合わせた強化版のボリューメトリックAPIを備えるSwiftUIを、Vision Pro開発に最適なフレームワークとして明言しています。visionOSアプリを開発するなら、このスキルでUI開発を効率化し、空間インターフェースの最新パターンに沿って実装できます。

インストール

git clone https://github.com/AvdLee/SwiftUI-Agent-Skill.git
cp -r SwiftUI-Agent-Skill/swiftui-expert-skill ~/.claude/skills/

使い方

Create a SwiftUI view for a visionOS settings panel
Add spatial scene support to this SwiftUI view
Implement Liquid Glass design patterns for this Vision Pro app

対象者: visionOS開発者、Vision Pro体験を開発するiOS開発者、SwiftUIで空間UIを作成する開発者。

関連リソース:

5. Expoアプリの設計とデプロイ

ソース: expo/skills。スター数: 926。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み（3つのスキルディレクトリ: expo-app-design、expo-deployment、upgrading-expo）。

ExpoはReact Nativeアプリケーションを最速で構築できる方法であり、多くのモバイルAR体験がExpoで開発されています。Expoの公式チームがメンテナンスするプラグインには、アプリの設計、デプロイ、SDKのアップグレードを扱う3つのスキルが含まれています。

対象範囲

このプラグインには次のスキルが含まれています:

  • expo-app-design: コンポーネントのアーキテクチャとアプリ構成のベストプラクティスに沿って、Expoアプリケーションを設計・構築

  • expo-deployment: EAS（Expo Application Services）を通じて、Expoアプリを本番環境にデプロイ

  • upgrading-expo: Expo SDKのバージョンを安全にアップグレード

AR/VRにおける重要性

ARKitやARCoreの体験の多くは、開発ワークフローを効率化できるExpoで構築されています。Expoには、ARアプリに欠かせないカメラアクセス、センサー、デバイス機能のサポートが組み込まれています。React NativeでモバイルARアプリを開発するなら、Expoも技術スタックに含まれる可能性が高いでしょう。

インストール

/plugin marketplace add expo/skills
/plugin menu

または手動でインストールする場合:

git clone https://github.com/expo/skills.git
cp -r expo/skills/plugins/expo-app-design/skills/* ~/.claude/skills/
cp -r expo/skills/plugins/expo-deployment/skills/* ~/.claude/skills/
cp -r expo/skills/plugins/upgrading-expo/skills/* ~/.claude/skills/

使い方

Design an Expo app structure for this ARCore experience
Deploy this Expo AR app to TestFlight
Upgrade this Expo project to SDK 52

対象者: ARKit/ARCoreを使ってモバイルAR体験を開発する方、AR対応モバイルデバイス向けのアプリを開発するReact Native開発者。

関連するSnykのリソース:

6. iOS Simulatorの操作

ソース: conorluddy/ios-simulator-skill。スター数: 473。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み。

このスキルを使うと、ClaudeがiOS Simulatorを直接操作できるようになります。アプリをビルドしてシミュレータで実行し、UIを操作して結果をキャプチャできます。Claudeの限られたMCPツールの利用枠も消費しません。Vision Proシミュレータはリソースを大量に使うため、visionOS開発では特に便利です。よくあるタスクを自動化することで、大幅に時間を節約できます。

対象範囲

このスキルはPythonスクリプトを使い、xcrun simctl経由でiOS Simulatorを操作します。デバイスの管理（起動、シャットダウン、消去）、アプリのインストールと起動、アクセシビリティAPIによるUI操作、スクリーンショットの撮影、ログの取得などに対応しています。

AR/VRにおける重要性

visionOSシミュレータは、開発中にVision Proアプリをテストする主な手段です。シミュレータのコマンドを手動で実行すると、作業の流れが中断されます。このスキルを使えば、Claudeがシミュレータの操作を自動で行えます。visionOSのインターフェースを反復的に開発したり、ARKitの動作をテストしたりする際に、手作業なしでビルド、起動、テスト、結果のキャプチャまで実行できます。

インストール

git clone https://github.com/conorluddy/ios-simulator-skill.git
cp -r ios-simulator-skill ~/.claude/skills/

使い方

Build and run this visionOS app in the simulator
Take a screenshot of the Vision Pro simulator
Launch this ARKit app and capture the console logs

対象者: visionOS開発者、ARKit開発者、空間コンピューティングアプリを開発するiOS開発者。

7. Anthropicのキャンバスとフロントエンドデザイン

ソース: anthropics/skills。スター数: 66,460。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み（複数のスキル: canvas-design、frontend-design、algorithmic-art、web-artifacts-builder）。

Anthropicの公式スキルリポジトリには、VR/ARのビジュアル開発に直接活用できるスキルがいくつか含まれています。これらはClaudeチームが作成し、リファレンス実装としてメンテナンスしています。

対象範囲

AR/VR開発者に役立つスキルは次のとおりです:

  • canvas-design: PNG形式とPDF形式のビジュアルアートをデザイン。UIのモックアップやアセットの作成に便利

  • frontend-design: フロントエンドのデザインとUI/UX開発ツール。空間UIの開発にも活用可能

  • algorithmic-art: シード付きの乱数を用いてp5.jsでジェネレーティブアートを作成。プロシージャルなビジュアルコンテンツに便利

  • web-artifacts-builder: ReactとTailwindを使って複雑なHTMLアーティファクトを構築。WebXRのUIにも活用可能

AR/VRにおける重要性

空間コンピューティングには、質の高いUIデザインが欠かせません。VRアプリには2DのUIパネル、HUD、メニュー、設定画面が必要です。WebXRの体験では、HTMLベースの空間インターフェースが求められます。これらのスキルを使えば、Claudeを離れることなくモックアップの生成やインターフェースのプロトタイプ作成、ビジュアルアセットの作成ができ、ビジュアルデザインのプロセスを効率化できます。

インストール

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/canvas-design ~/.claude/skills/
cp -r skills/skills/frontend-design ~/.claude/skills/
cp -r skills/skills/algorithmic-art ~/.claude/skills/
cp -r skills/skills/web-artifacts-builder ~/.claude/skills/

使い方

Design a VR menu interface mockup
Create a generative art shader for this Unity material
Build a WebXR UI panel with React and Tailwind
Generate UI icons for this visionOS app

対象者: 空間UIに取り組むVR/AR開発者、HTMLベースのインターフェースを構築するWebXR開発者、UIレイアウトのプロトタイプを作成するUnity/Unreal開発者。

関連リソース:

8. CallstackによるReact Nativeのベストプラクティス

ソース: callstackincubator/agent-skills。スター数: 814。ライセンス: 指定なし。最終更新: 2026年2月。SKILL.mdの検証: 済み。

CallstackはReact Nativeエコシステムで最も高く評価されるコンサルティング企業の一つで、このスキルはパフォーマンスの最適化に特化しています。ARアプリでは、高いパフォーマンスは必須です。ARCoreやARKitの体験では60fpsを維持する必要があります。Quest連携アプリにも高い応答性が求められます。このスキルでは、大規模な本番環境向けReact Nativeアプリをリリースしてきたチームによる、実証済みのパターンを活用できます。

対象範囲

このスキルでは、FlatListやVirtualizedListのリスト描画の最適化、画像の読み込みとキャッシュ、メモリ管理のパターン、ネイティブモジュールのパフォーマンス、JavaScriptスレッドへの負荷分散、プロファイリングツール（Flipper、Hermes debugger）など、React Nativeのパフォーマンス最適化を扱います。

AR/VRにおける重要性

ARアプリには厳しいパフォーマンス要件があります。フレーム落ちは没入感を損ないます。メモリ使用量が大きいと、モバイルデバイスでクラッシュが発生します。このスキルでは、アセットの遅延読み込みからネイティブモジュールへの計算処理のオフロードまで、React Native製ARアプリのパフォーマンスを維持するための具体的なパターンをClaudeに教えます。

インストール

git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/react-native-best-practices ~/.claude/skills/

使い方

Optimize this ARCore component for 60fps
Reduce memory usage in this React Native AR app
Profile this Quest companion app and fix performance issues

対象者: AR体験を開発するReact Native開発者、Quest連携アプリを最適化する開発者、ARKit/ARCoreを使ってモバイルARに取り組む開発者。

関連するSnykのリソース:

Skillsを使う際のセキュリティに関する注意点

XR開発をAIスキルで効率化する一方で、そのスキルエコシステム自体にセキュリティリスクがあるのは皮肉なことです。SnykのToxicSkillsの調査では、テストしたスキルの13%に重大なセキュリティ上の欠陥があり、一部は認証情報の外部流出を積極的に試みていたことが判明しました。SKILL.mdからシェルアクセスへの調査では、スキルファイル内のわずか3行のMarkdownによって、攻撃者にマシンへのシェルアクセスを許してしまう可能性が示されました。

スキルをインストールする前に、次の点を確認してください:

  1. SKILL.mdを読むほか、同梱されているスクリプトも確認しましょう。スキルはコンパイル済みバイナリではなく、Markdownとシェルスクリプトです。すべての行を読むことができます。

  2. ソースを確認する。 Anthropic、Vercel、Expo、Remotionなど、実績のある組織が提供するスキルは、匿名のGitHubアカウントが提供するものよりリスクが低い傾向にあります。

  3. 権限を確認する。 allowed-toolsフロントマターのフィールドを見ると、スキルが使用できるツールが分かります。Bashへのアクセスが必要なスキルは、ReadとGrepだけを使うスキルよりも慎重に確認しましょう。

  4. Snykでスキャンする。すでにSnyk CodeまたはSnyk MCP integrationを利用している場合は、通常のコードと同じようにスキルのスクリプトをスキャンできます。

このリストに掲載したスキルは、作成者が明確で信頼できるソースから提供されています。ただし、一般原則は変わりません。信頼したうえで、必ず検証しましょう。

エコシステムの成熟とともにXRのワークフローを加速

AR/VR開発コミュニティは、興味深い局面を迎えています。ツールエコシステム（Unity AI、XR Blocks、visionOSのAI機能）はAI支援ワークフローへと向かっていますが、Claude Skillsのエコシステムは、XRに特化したスキルの整備がまだ追いついていません。現在利用できるのは、AR/VR開発に関わる幅広い分野、つまりモバイル開発、Web 3D、UIデザイン、パフォーマンス最適化をカバーするスキルです。

WebXR体験を構築するなら、Three.jsのスキルは欠かせません。Vision Pro向けに開発するなら、SwiftUIとiOS Simulatorのスキルで何時間も節約できます。Questのコンパニオンアプリをリリースするなら、VercelとCallstackのReact Nativeスキルがワークフローを加速します。これらはVR専用のツールではありませんが、VRアプリ開発に活用できるツールです。ニッチな分野では、それが重要なのです。

ここで紹介するスキルは、エコシステムの現状を反映しています。実用的で、本番環境ですぐに使え、XR開発者が実際に利用するワークフローに特化しています。Agent Skillsのエコシステムが成熟するにつれ、Unity XR、UnrealのVRブループリント、ARKitの空間アンカー、ハンドトラッキングシステムに特化したスキルも登場するでしょう。それまでの間、Claude CodeでのVR・AR開発において、これら8つのスキルが最も役立つ開発効率化ツールです。

Claude SkillsではなくMCPサーバーをお探しなら、空間コンピューティングやゲーム開発ツールを取り上げる今後のMCP特集記事をSnykブログでぜひチェックしてください。

EBOOK

MCPサーバーエコシステムを安全に保護する

新たな攻撃経路を探り、実際に起きたインシデントを分析し、開発フローを踏まえた実践的な戦略でどのように対処するかを解説します。

電子書籍をダウンロード