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

Prerequisites

All integrations require:

1. •Phantom Portal Account - Register at phantom.com/portal
2. •App ID - Get from Portal → App → Set Up
3. •Allowlisted URLs - Add domains and redirect URLs in Portal

Core Concepts

Auth Providers

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

Resources

• •Phantom Portal - App registration
• •Phantom Docs - Full documentation
• •SDK Examples - Working demos
• •MCP Server - AI docs access