Poker Game Router

Poker Game Router

Use this skill as a lightweight dispatcher. Keep context small: decide which skill(s) to use, then load only the chosen skill(s) and relevant files.

Repo landmarks

• App Router entry: app/​layout.tsx, app/​page.tsx, app/​providers.tsx
• Theme system: app/​theme.ts
• Web3/​thirdweb client: app/​thirdwebclient.ts, app/​components/​WalletButton.tsx
• SIWE auth: app/​hooks/​useWalletAuth.ts, app/​contexts/​AuthContext.tsx, app/​hooks/​server_actions.ts
• WebSocket/​game state: app/​contexts/​WebSocketProvider.tsx, app/​contexts/​AppStoreProvider.tsx, app/​hooks/​server_actions.ts
• Chat/​media: app/​components/​NavBar/​Chat/, app/​hooks/​useTenor.ts, app/​api/​tenor/​route.ts
• Poker hand eval: app/​lib/​poker/​pokerHandEval.ts
• Build hygiene: package.json scripts, .eslintrc.json, .prettierrc, .husky/​pre-commit

Skill selection (decision tree)

Pick the minimal set; multiple can apply.

UI, layout, theme, Chakra components

Use chakra-design-system when:

• Editing app/​theme.ts or Chakra tokens/​variants
• Adding/​modifying UI components under app/​components/
• Fixing responsive layout, spacing, typography, color, dark/​light mode
• Improving a11y for Chakra components (focus, aria, keyboard)

Web3, wallets, thirdweb, embedded wallet, SIWE

Use web3-thirdweb-siwe when:

• Touching wallet connect flows, account state, auth cookies/​session
• Working with thirdweb/​react hooks (useActiveAccount, useActiveWallet, etc)
• Debugging auth loops, signature issues, disconnect behavior, or CSP issues
• Updating next.config.js CSP headers related to thirdweb embedded wallet
• Sending on-chain transactions (always via useStackedTransaction — never useSendAndConfirmTransaction directly)
• Adding onramp / top-up / "buy USDC" UI (BuyWidget, TopUpModal/​TopUpButton)
• ERC-1271 / smart account signature verification questions

Storybook / component visualization

Use storybook-testing when:

• Writing or updating .stories.tsx files
• Doing a visual review pass of new components
• Needing to see a component in multiple states without a running backend
• Checking how a component looks in dark vs light mode

React architecture, hooks, state, TypeScript

Use react-architecture when:

• Deciding Server Component vs Client Component
• Designing custom hooks, state management, or context structure
• TypeScript typing questions (props, events, refs, generics)
• Form handling patterns, error boundaries, data fetching strategy
• File/​folder organization, component composition patterns

Frontend design / visual identity

Use frontend-design when:

• Building a new page, modal, or standalone UI piece from scratch
• The user asks for UI that should feel “premium”, “polished”, or “distinctive”
• Creating prototypes, landing pages, or standalone artifacts (inside or outside the repo)
• Adding motion/​animation to components (see references/​motion-patterns.md)
• When the task is about the overall visual direction, not just wiring up Chakra tokens

Note: for in-repo work, frontend-design defers to the brand identity system and works alongside chakra-design-system. For standalone/​external work, it operates with full creative freedom.

“Quality bar” / production readiness

Use frontend-quality-bar when:

• Doing UI polish passes, UX consistency, performance, accessibility
• Adding new components/​features that should meet a consistent standard
• Preparing a PR/​merge, or doing broad refactors

Use project rules and MCP

• Read .cursor/​rules/​frontend-guidelines.mdc for the repo’s frontend expectations.
• Read .cursor/​rules/​thirdweb.mdc for thirdweb rules and documentation pointers.
• See .cursor/​mcp.json for MCP servers that can fetch thirdweb/​Chakra documentation on demand.