Phantom Connect Development Skill

A Claude Code skill for building wallet-connected applications with Phantom Connect SDKs.

Overview

This skill provides Claude with deep knowledge of the Phantom Connect SDK ecosystem:

• React SDK: @phantom/react-sdk for React web apps

• React Native SDK: @phantom/react-native-sdk for mobile apps

• Browser SDK: @phantom/browser-sdk for vanilla JS/TS

• Solana: Full Solana blockchain support

• Auth Methods: Social login (Google, Apple), browser extension

When to Use This Skill

Claude should use this skill when users ask about:

• Phantom wallet integration

• Connecting wallets in React/React Native/vanilla JS apps

• Signing messages or transactions with Phantom

• Token-gated access patterns

• NFT minting with wallet connection

• Crypto payment flows

• Solana wallet support

SDK Selection

Platform SDK Package

React web apps React SDK @phantom/react-sdk

React Native / Expo React Native SDK @phantom/react-native-sdk

Vanilla JS / Vue / Angular Browser SDK @phantom/browser-sdk

Prerequisites

All integrations require:

• Phantom Portal Account - Register at phantom.com/portal

• App ID - Get from Portal → App → Set Up

• Allowlisted URLs - Add domains and redirect URLs in Portal

Core Concepts

Auth Providers

Provider Description Requires appId

"injected"

Phantom browser extension No

"google"

Google OAuth (embedded wallet) Yes

"apple"

Apple ID (embedded wallet) Yes

Supported Networks

Solana: Mainnet-beta, Devnet, Testnet

Quick Start Patterns

React SDK

import { PhantomProvider, useModal, usePhantom, darkTheme } from "@phantom/react-sdk"; import { AddressType } from "@phantom/browser-sdk";

function App() { return ( <PhantomProvider config={{ providers: ["google", "apple", "injected"], appId: "your-app-id", addressTypes: [AddressType.solana], authOptions: { redirectUrl: "https://yourapp.com/callback" }, }} theme={darkTheme} > <YourApp /> </PhantomProvider> ); }

React Native SDK

// CRITICAL: Must be first import import "react-native-get-random-values"; import { PhantomProvider, AddressType, darkTheme } from "@phantom/react-native-sdk";

// Requires app.json: { "expo": { "scheme": "myapp", "plugins": [...] } }

Browser SDK

import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

const sdk = new BrowserSDK({ providers: ["google", "apple", "injected"], appId: "your-app-id", addressTypes: [AddressType.solana], autoConnect: true, });

Specialized Topics

For detailed implementation patterns, Claude should read these files:

• react-sdk.md - Complete React SDK reference (hooks, components, theming)

• react-native-sdk.md - Mobile setup, Expo config, deep links

• browser-sdk.md - Vanilla JS patterns, events, wallet discovery

• transactions.md - Solana transaction patterns

• token-gating.md - Token-gated access implementation

• nft-minting.md - NFT mint page patterns

• payments.md - Crypto payment flows

Common Issues

Issue Solution

"appId required" Add appId from Phantom Portal when using google/apple

Redirect not working Allowlist redirectUrl in Phantom Portal

React Native crashes Import react-native-get-random-values as FIRST import

Extension not detected Use waitForPhantomExtension() with timeout

Resources

• Phantom Portal - App registration

• Phantom Docs - Full documentation

• SDK Examples - Working demos

• MCP Server - AI docs access