Phantom Connect Skill for Claude Code

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

Overview

This skill provides Claude Code 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 Expo/React Native mobile
• Browser SDK: @phantom/browser-sdk for vanilla JS/TS
• Solana: Full Solana blockchain support
• Auth Methods: Social login (Google, Apple), browser extension, mobile deeplinks

Installation

Quick Install (Personal)

git clone https://github.com/phantom/connect-skill.git
cp -r connect-skill/skill ~/.claude/skills/phantom-connect

Quick Install (Project)

cp -r connect-skill/skill .claude/skills/phantom-connect

Using the Install Script

# Install to personal directory (default)
./install.sh

# Install to project directory
./install.sh --project

# Install to custom location
./install.sh --path /custom/path/skills/phantom-connect

Skill Structure

skill/
├── SKILL.md              # Main skill definition (required)
├── react-sdk.md          # React SDK reference
├── react-native-sdk.md   # React Native SDK reference
├── browser-sdk.md        # Browser SDK reference
├── transactions.md       # Solana transaction patterns
├── token-gating.md       # Token-gated access patterns
├── nft-minting.md        # NFT mint page patterns
└── payments.md           # Crypto payment flows

Usage

Once installed, Claude Code will automatically use this skill when you ask about:

• Phantom wallet integration
• Connecting wallets in React/React Native/vanilla JS
• Signing messages or transactions
• Token-gated access
• NFT minting experiences
• Crypto payment flows
• Solana wallet support

Example Prompts

"Create a Next.js app with Phantom wallet connection"
"Build a token-gated page that requires 100 BONK to access"
"Make an NFT mint page with quantity selector and status handling"
"Add crypto checkout to my e-commerce site"
"Help me send a Solana transaction with the React SDK"
"Convert this to use the Browser SDK instead of React"

SDK Choices

| Layer | Package | Use Case | |-------|---------|----------| | React Web | @phantom/react-sdk | Next.js, Vite, CRA | | React Native | @phantom/react-native-sdk | Expo, bare RN | | Vanilla JS | @phantom/browser-sdk | Vue, Angular, vanilla | | Solana | @solana/web3.js | Transactions, balances |

Prerequisites

All Phantom Connect integrations require:

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

Progressive Disclosure

The skill uses Claude Code's progressive disclosure pattern. The main SKILL.md provides core guidance, and Claude reads specialized markdown files only when needed for specific tasks.

Related Resources

• Phantom Developer Docs
• Phantom Portal
• SDK Examples
• MCP Server - Give AI full docs access

Contributing

Contributions welcome! Please ensure updates reflect current SDK best practices.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

MIT License - see LICENSE for details.