Feature/remove themeui

.claude/commands/review-file.md

@@ -0,0 +1,40 @@
+---
+description: Review a specific file for code quality
+model: sonnet
+argument-hint: <file-path>
+---
+
+# Code Review: $ARGUMENTS
+
+Review the specified file for code quality, patterns, and potential bugs.
+
+## Review Focus
+
+### TypeScript
+- Check for type errors
+- Verify imports are correct and used
+- Look for `any` types that should be typed
+
+### React
+- Hook dependency arrays
+- Component size and composition
+- Proper state management
+
+### Styling
+- TailwindCSS class usage
+- No inline styles
+- Use of cn() for conditional classes
+- No theme-ui or emotion remnants
+
+### Best Practices
+- No console.log statements
+- Proper error handling
+- Loading states for async operations
+
+## Instructions
+
+1. Read the file at: $ARGUMENTS
+2. Analyze against the review focus areas
+3. Report any issues found with line numbers
+4. Provide specific suggestions for fixes
+5. If the file looks good, confirm it passes review

.claude/commands/review-ui.md

@@ -0,0 +1,41 @@
+---
+description: Review UI components with visual validation via Chrome extension
+model: sonnet
+argument-hint: <component-path>
+---
+
+# UI Review: $ARGUMENTS
+
+Review the UI component for visual correctness and code quality.
+
+## Code Review
+
+1. Read the component file at: $ARGUMENTS
+2. Check for:
+   - Correct TailwindCSS classes
+   - Proper use of shadcn/ui components
+   - Responsive design (sm:, md:, lg: breakpoints)
+   - Accessibility (aria labels, semantic HTML)
+   - Animation classes match tailwind.config.ts
+
+## Visual Validation
+
+After code review, request a screenshot from the user:
+
+"Please provide a screenshot of this component in the browser. You can:
+1. Use the Claude Code Chrome extension to capture the current tab
+2. Or paste a screenshot directly
+
+I'll validate that the rendered UI matches the expected styling from the code."
+
+## When Screenshot is Provided
+
+Analyze the screenshot for:
+1. Layout matches flex/grid classes in code
+2. Colors match theme variables (primary, secondary, muted, etc.)
+3. Spacing looks correct (padding, margins, gaps)
+4. Text styling (font weights, sizes)
+5. Interactive states if visible (hover, focus, disabled)
+6. Any visual bugs or misalignments
+
+Report findings with specific code references and visual observations.

.claude/commands/review.md

@@ -0,0 +1,61 @@
+---
+description: Review code changes for quality, patterns, and potential bugs
+model: sonnet
+---
+
+# Code Review
+
+You are a code reviewer for a React/TypeScript project. Review the recent code changes with a focus on:
+
+## Review Checklist
+
+### 1. TypeScript & Imports
+- Missing or incorrect imports
+- Type errors or any usage
+- Unused imports or variables
+
+### 2. React Patterns
+- Proper hook dependencies in useEffect/useMemo/useCallback
+- Missing keys in lists
+- State updates that could cause infinite loops
+- Component composition and size (prefer < 150 lines)
+
+### 3. Styling (TailwindCSS)
+- Verify className usage follows Tailwind patterns
+- Check for hardcoded values that should use theme variables
+- Ensure cn() helper is used for conditional classes
+- No inline styles or emotion/theme-ui remnants
+
+### 4. State Management (Jotai)
+- Small, focused atoms
+- Derived atoms for computed values
+- No useEffect for atom synchronization
+
+### 5. Error Handling
+- Loading states for async operations
+- Error boundaries where needed
+- Proper try/catch for async code
+
+## Instructions
+
+1. Get the list of modified files:
+```bash
+git diff --name-only HEAD~1
+```
+
+2. Read each modified file and analyze against the checklist
+
+3. Report findings in this format:
+
+**File: `path/to/file.tsx`**
+- [ ] Issue: Description of the problem
+  - Line X: `code snippet`
+  - Suggestion: How to fix it
+
+4. If no issues found, confirm the code looks good
+
+5. Pay special attention to:
+- Missing dependencies in hooks
+- Incorrect Tailwind classes
+- Components that are too large
+- Console.log statements left in code

CLAUDE.md

@@ -764,25 +764,46 @@ VITE_INFURA_KEY=your_key
 
 ```bash
 npm install          # Install dependencies
-npm run dev         # Start dev server
-npm run build       # Build for production
-npm run lint        # Run linter
-npm run format      # Format code
+npm run start        # Start dev server (port 3000)
+npm run build        # Build for production
+npm run typecheck    # TypeScript validation
+npm run test         # Run tests (watch mode)
+npm run test:run     # Run tests (single run)
 ```
 
 ### Testing
 
-- **Current**: Manual testing on Base network
-- **Planned**: Jest for unit tests, E2E with wallet integration
-- **Note**: No current test coverage requirements
+- **Framework**: Vitest with jsdom environment
+- **Location**: `src/**/tests/**/*.test.{ts,tsx}`
+- **Run**: `npm run test` (watch) or `npm run test:run` (single)
+- **Current coverage**: Critical hooks (useQuery, useDebounce, useTimeRemaining)
+
+## Active Migration: theme-ui → Tailwind
+
+**IMPORTANT**: We are actively migrating from theme-ui to Tailwind/shadcn. See `docs/migration-plan.md` for full details.
+
+### Migration Rules
+
+1. **Update the migration doc** (`docs/migration-plan.md`) after any migration work
+2. **Record learnings** - decisions, gotchas, patterns that worked
+3. **Don't mix patterns** - new components use Tailwind only, no theme-ui
+4. **Test before/after** - run `npm run typecheck && npm run test:run` after changes
+5. **Bottom-up approach** - start with `components/old/*`, then shared, then views
+
+### Current Status
+
+- 284 files still import theme-ui
+- `@emotion/react` removed (animations now in Tailwind)
+- `swr` removed (replaced with React Query wrapper)
+- Tailwind v3.4 (v4 upgrade planned before full migration)
 
 ## Known Issues & Tech Debt
 
 ### High Priority
 
-1. **Testing Infrastructure**: No automated tests
-2. **Bundle Size**: Large SPA bundle
-3. **Legacy UI**: Yield DTFs use old theme-ui components
+1. **theme-ui Migration**: 284 files need conversion to Tailwind
+2. **Bundle Size**: Large SPA bundle (theme-ui removal will help)
+3. **Tailwind v4**: Upgrade needed before migration completes
 
 ### Complex Areas Needing Attention