Build
Skill for building prediction market frontends — React components, wallet integration, and UI patterns using the Context React SDK.
Claude Code: /context:build · Codex: $context-build · API/Cursor/ChatGPT: Load full.md as system prompt
What it covers
| Domain | React hooks | Description |
|---|
| Provider setup | ContextProvider | Initialize SDK with wagmi wallet connection |
| Market display | useMarkets, useMarket, useOrderbook, useQuotes | Live market data components |
| Trading UI | useCreateOrder, useMarketOrder, useCancelOrder | Order forms and management |
| Portfolio views | usePositions, useBalance, useClaimable, usePortfolioStats | Position and balance display |
| Wallet integration | useAccountStatus, useSetupAccount, useDeposit | Account onboarding flows |
| Query management | contextKeys, TanStack Query patterns | Cache invalidation and optimistic updates |
Prerequisites
- Context MCP server (optional)
- Familiarity with React, wagmi, and TanStack Query
Installation
# 1. Clone the skills repository
git clone https://github.com/contextwtf/context-skills.git
# 2. Install the build skill
cd context-skills && ./install.sh build
# 3. Add the Context MCP server (optional, for tool access)
claude mcp add context-markets -- npx @contextwtf/mcp
Example prompts
- “Build a market card component showing live bid/ask quotes”
- “Create an order form with price and size inputs for a specific market”
- “Build a portfolio dashboard showing all active positions”
- “Add wallet connection with automatic account setup flow”
- “Create a real-time orderbook visualization component”
- “Build a market search page with status and category filters”
Composite workflows
Trading app
Complete trading interface: market list, market detail, order form, portfolio view. Uses market query hooks, order mutations, and portfolio hooks.
Market dashboard
Search and filter markets, display live prices, show volume and activity charts. Uses market hooks with polling intervals.
Embeddable single-market component with buy/sell buttons. Uses useMarket, useQuotes, and order mutation hooks.
What’s included
| File | Description |
|---|
SKILL.md | Entry point — React patterns, hook overview, provider setup |
prompts/openai.developer.md | OpenAI-formatted system prompt |
prompts/claude.system.md | Claude-formatted system prompt |
prompts/full.md | Universal format |
references/react-hooks.md | Full hook API reference |
references/provider-setup.md | ContextProvider and wagmi configuration |
references/query-patterns.md | TanStack Query best practices |
references/wagmi-integration.md | Wallet connection patterns |
