# CLAUDE.md -- Antonym

## Core Philosophy

- **Open source only** -- MIT/Apache-2.0 dependencies
- **Privacy-first** -- no tracking, no telemetry
- **Bitcoin only** -- sats/Lightning/Cashu for payments, never fiat, never altcoins
- **Quality over speed** -- working code, tested, documented

## Quick Reference

```bash
pnpm dev            # Run app dev server + API server
pnpm dev:app        # Vite dev server only
pnpm dev:server     # Express API only
pnpm build          # Build frontend (vite)
pnpm typecheck      # Type-check all packages (vue-tsc + tsc)
pnpm lint           # Lint all packages (eslint)
pnpm test           # Run tests (vitest)
pnpm clean          # Remove dist/ directory
```

Dev server: `http://localhost:3333` | API server: `http://localhost:3141`

## Vue 3 Conventions

**Always use `<script setup lang="ts">`** -- never Options API.

### Script section ordering

Imports -> Props (`defineProps`) -> Emits (`defineEmits`) -> Reactive state -> Computed -> Watchers -> Methods -> Lifecycle hooks -> `defineExpose`

### Naming

| Thing | Convention | Example |
|-------|-----------|---------|
| Components | PascalCase | `ProductCard.vue` |
| Composables | camelCase, `use` prefix | `useTheme.ts` |
| Props (JS) | camelCase | `projectName` |
| Props (template) | kebab-case | `project-name` |
| Boolean props | `is`/`has`/`can`/`should` prefix | `isVisible`, `canEdit` |
| Emits (template) | kebab-case with colon namespacing | `project:updated` |
| Stores | camelCase, `use` prefix, `Store` suffix | `useSettingsStore` |

### Reactive state rules

- `ref()` for primitives, `reactive()` for objects
- `computed()` for derived values -- no side effects in computed
- `shallowRef()` for large collections/objects not requiring deep reactivity
- Always use unique IDs for `:key` -- never array index

### Props

Always use object-style with type annotations, never array-style:

```ts
// Correct
defineProps<{ title: string; count?: number }>()

// Wrong
defineProps(['title', 'count'])
```

### Performance

- Lazy load with `defineAsyncComponent` for non-critical components
- Use `onErrorCaptured` for error boundaries
- Always handle loading/error/data states in async operations

## Design System

This project uses the **Glassmorphism** design system.
Full design system specification is in the `design-glassmorphism` skill (global).
If the skill is not loaded, copy it from `~/.claude/skills/design-glassmorphism/`.

### Quick Reference -- Colors

## Color Palette

### Core Tokens
```css
--bg-primary: #0A0A0A;
--bg-secondary: #1A1A1A;
--bg-tertiary: #141414;
--accent: #F7931A;
--accent-hover: #e8841a;
--text-primary: rgba(255, 255, 255, 0.9);
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.6);
--text-placeholder: rgba(255, 255, 255, 0.25);
--text-interactive: rgba(255, 255, 255, 0.7);
--success: #4ade80;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
```

### Glass Tokens
```css
--glass-bg: rgba(0, 0, 0, 0.5);
--glass-bg-strong: rgba(0, 0, 0, 0.75);
--glass-bg-darker: rgba(0, 0, 0, 0.6);
--glass-border: rgba(255, 255, 255, 0.18);
--glass-highlight: rgba(255, 255, 255, 0.22);
--glass-blur: 18px;
--glass-blur-strong: 24px;
```

### Light Mode Variant
```css
[data-theme="light"] {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F0F0F0;
  --text-primary: #0A0A0A;
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-strong: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(0, 0, 0, 0.12);
}
```

## Git Conventions

- Conventional commits: `feat:`, `fix:`, `refactor:`, `docs:`, `test:`, `chore:`
- Branch naming: `feature/`, `bugfix/`, `release/`
- Never commit secrets, .env files, or API keys