Skip to main content
</>Vibecode Bible

CLAUDE.md — OPNet Frontend Project

This file tells Claude everything it needs to know about this project.

#What This Is

A React frontend for an OPNet application. Users connect with OPWallet, interact with deployed contracts on Bitcoin L1, and sign transactions with their Bitcoin wallet.

#Plugin Setup

This project uses the buidl-opnet-plugin. To start Claude with the plugin loaded:

bash
# Add these aliases to your shell config (~/.bashrc or ~/.zshrc):
alias claudey="claude --plugin-dir /path/to/buidl-opnet-plugin/buidl"
alias claudeyproj="claude --dangerously-skip-permissions --plugin-dir /path/to/buidl-opnet-plugin/buidl"

Use claudeyproj for autonomous builds with the /buidl command.

When the plugin is loaded, Claude has access to:

  • opnet-frontend-dev agent — specialized OPNet frontend patterns
  • opnet-ui-tester agent — interface testing
  • Knowledge slices covering wallet integration, contract interaction patterns, OPNet transaction flows

#Project Details

App name: [Your App Name] Contract address: [deployed contract address] Network: [testnet / mainnet] Framework: React + TypeScript Deployment target: [Vercel / IPFS / .btc domain]

#What This App Does

[Describe the app in 2-3 sentences — what users can do, what the core flow is]

#Key Screens / Pages

[List the main views]

  • / — [description]
  • /[page] — [description]

#Design Direction

Visual style: Dark crypto aesthetic. Very dark background, OPNet orange (#F7931A) as primary accent.

Specific requirements:

  • [add your specific design requirements]
  • Mobile-first responsive design
  • Glassmorphism cards with subtle borders
  • Smooth transitions on all interactive elements
  • Loading states for all async operations
  • Production-quality — not a tutorial demo

#Wallet Integration

Users connect with OPWallet. The connection flow:

  1. User clicks "Connect Wallet"
  2. OPWallet browser extension handles signing
  3. Connected: show shortened address and BTC balance in header
  4. Disconnected: show connect button

Never put private keys in frontend code. Signers are always null — OPWallet handles signing.

#Contract Configuration

typescript
// src/config/contracts.ts
export const CONTRACTS = {
  myContract: '[contract address]',
};

export const NETWORK = '[testnet | mainnet]';

#Component Naming Conventions

  • Pages: src/pages/PageName.tsx
  • Components: src/components/ComponentName.tsx
  • Hooks: src/hooks/useHookName.ts
  • Config: src/config/

#Build Commands

bash
npm run dev       # development server
npm run build     # production build
npm run test      # run tests

#Deployment

bash
# Deploy to .btc domain (recommended)
opnet deploy your-domain ./dist

# Deploy to Vercel
vercel

# Build for IPFS
npm run build
# then upload ./dist to IPFS

#Using the /buidl Pipeline

For major features or rebuilds, use the full pipeline:

text
/buidl "describe the feature"

For UI changes and iteration, use direct prompts.

Ready to test your knowledge?

20 questions covering everything from vibecoding basics to shipping a complete dApp.

Take the Quiz