oh-my-ag 1.2.0

package/.agent/skills/frontend-agent/resources/tailwind-rules.md

@@ -0,0 +1,343 @@
+# Tailwind CSS Best Practices
+
+## Core Principles
+
+1. **NO inline styles** - Always use Tailwind classes
+2. **Responsive-first** - Design for mobile, scale up
+3. **Consistent spacing** - Use Tailwind's spacing scale
+4. **Dark mode support** - Use `dark:` variant
+
+## Spacing Scale
+
+Use Tailwind's consistent scale:
+
+```tsx
+// ✅ GOOD
+<div className="p-4 mb-6 gap-2">
+
+// ❌ BAD - arbitrary values without reason
+<div className="p-[17px] mb-[23px]">
+```
+
+Standard scale:
+- `1` = 0.25rem (4px)
+- `2` = 0.5rem (8px)
+- `4` = 1rem (16px)
+- `6` = 1.5rem (24px)
+- `8` = 2rem (32px)
+
+## Responsive Design
+
+Mobile-first approach:
+
+```tsx
+// ✅ GOOD - Mobile first, then scale up
+<div className="
+  grid grid-cols-1
+  sm:grid-cols-2
+  lg:grid-cols-3
+  gap-4
+">
+
+// ❌ BAD - Desktop first
+<div className="grid-cols-3 sm:grid-cols-1">
+```
+
+Breakpoints:
+- `sm`: 640px
+- `md`: 768px
+- `lg`: 1024px
+- `xl`: 1280px
+- `2xl`: 1536px
+
+## Color System
+
+Use semantic color tokens:
+
+```tsx
+// ✅ GOOD - Semantic tokens
+<div className="bg-background text-foreground border-border">
+<button className="bg-primary text-primary-foreground">
+
+// ❌ BAD - Hardcoded colors
+<div className="bg-white text-black border-gray-300">
+```
+
+Semantic tokens:
+- `background` / `foreground`
+- `primary` / `primary-foreground`
+- `secondary` / `secondary-foreground`
+- `muted` / `muted-foreground`
+- `accent` / `accent-foreground`
+- `destructive` / `destructive-foreground`
+- `border` / `input` / `ring`
+
+## Dark Mode
+
+Always support dark mode:
+
+```tsx
+// ✅ GOOD
+<div className="
+  bg-white dark:bg-gray-900
+  text-gray-900 dark:text-gray-100
+  border-gray-200 dark:border-gray-800
+">
+
+// ❌ BAD - No dark mode
+<div className="bg-white text-black">
+```
+
+## Layout
+
+### Flexbox
+```tsx
+// Horizontal layout
+<div className="flex items-center gap-4">
+
+// Vertical layout
+<div className="flex flex-col gap-2">
+
+// Centered content
+<div className="flex items-center justify-center min-h-screen">
+```
+
+### Grid
+```tsx
+// Auto-fit columns
+<div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4">
+
+// Responsive grid
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+```
+
+## Typography
+
+```tsx
+// Headings
+<h1 className="text-4xl font-bold tracking-tight">
+<h2 className="text-3xl font-semibold">
+<h3 className="text-2xl font-semibold">
+
+// Body text
+<p className="text-base leading-7">
+<p className="text-sm text-muted-foreground">
+
+// Links
+<a className="text-primary hover:underline">
+```
+
+## Interactive Elements
+
+### Buttons
+```tsx
+// Primary button
+<button className="
+  inline-flex items-center justify-center
+  rounded-md px-4 py-2
+  bg-primary text-primary-foreground
+  hover:bg-primary/90
+  disabled:opacity-50 disabled:pointer-events-none
+  transition-colors
+">
+
+// Ghost button
+<button className="
+  hover:bg-accent hover:text-accent-foreground
+  transition-colors
+">
+```
+
+### Inputs
+```tsx
+<input className="
+  flex h-10 w-full rounded-md border border-input
+  bg-background px-3 py-2
+  text-sm
+  placeholder:text-muted-foreground
+  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+  disabled:cursor-not-allowed disabled:opacity-50
+" />
+```
+
+## Animations
+
+Use Tailwind's transition utilities:
+
+```tsx
+// Color transitions
+<div className="transition-colors hover:bg-accent">
+
+// Multiple properties
+<div className="transition-all duration-200 hover:scale-105">
+
+// Custom animations
+<div className="animate-pulse">
+<div className="animate-spin">
+<div className="animate-bounce">
+```
+
+## Accessibility
+
+### Focus States
+```tsx
+// Always include focus styles
+<button className="
+  focus:outline-none
+  focus-visible:ring-2
+  focus-visible:ring-ring
+  focus-visible:ring-offset-2
+">
+```
+
+### Screen Reader Only
+```tsx
+<span className="sr-only">Hidden text for screen readers</span>
+```
+
+## Common Patterns
+
+### Card
+```tsx
+<div className="rounded-lg border bg-card p-6 shadow-sm">
+  <h3 className="text-2xl font-semibold mb-2">Title</h3>
+  <p className="text-muted-foreground">Description</p>
+</div>
+```
+
+### Modal Overlay
+```tsx
+<div className="fixed inset-0 z-50 bg-black/80">
+  <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+    {/* Modal content */}
+  </div>
+</div>
+```
+
+### Loading State
+```tsx
+<div className="flex items-center justify-center p-8">
+  <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+</div>
+```
+
+### Skeleton
+```tsx
+<div className="space-y-2">
+  <div className="h-4 w-full bg-muted animate-pulse rounded" />
+  <div className="h-4 w-3/4 bg-muted animate-pulse rounded" />
+</div>
+```
+
+## cn() Utility
+
+Use `cn()` for conditional classes:
+
+```tsx
+import { cn } from '@/lib/utils';
+
+// Merge classes with conditions
+<div className={cn(
+  'base-class',
+  condition && 'conditional-class',
+  {
+    'variant-a': variant === 'a',
+    'variant-b': variant === 'b',
+  },
+  className // Allow prop overrides
+)} />
+```
+
+## Arbitrary Values
+
+Only use when absolutely necessary:
+
+```tsx
+// ✅ GOOD - Use standard values
+<div className="w-64 h-64">
+
+// ⚠️ OK - Special case
+<div className="w-[789px]"> // Specific design requirement
+
+// ❌ BAD - Should use standard value
+<div className="w-[250px]"> // Just use w-64 (256px)
+```
+
+## Custom Utilities
+
+Add to `tailwind.config.js`:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      spacing: {
+        '18': '4.5rem', // Custom spacing
+      },
+      colors: {
+        brand: {
+          50: '#...',
+          // ...
+          900: '#...',
+        },
+      },
+    },
+  },
+};
+```
+
+## Performance
+
+### Purging
+Tailwind auto-purges unused classes in production.
+
+### JIT Mode
+Enabled by default in Tailwind 3+.
+
+### Avoid @apply
+Prefer utility classes in JSX over `@apply` in CSS:
+
+```tsx
+// ✅ GOOD
+<button className="px-4 py-2 bg-primary text-white rounded">
+
+// ❌ BAD
+// In CSS: .btn { @apply px-4 py-2 bg-primary text-white rounded; }
+<button className="btn">
+```
+
+## Linting
+
+Use Prettier plugin for class sorting:
+
+```bash
+npm install -D prettier prettier-plugin-tailwindcss
+```
+
+`.prettierrc`:
+```json
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
+```
+
+Classes will auto-sort:
+```tsx
+// Before
+<div className="text-white p-4 bg-blue-500 rounded">
+
+// After (auto-sorted)
+<div className="rounded bg-blue-500 p-4 text-white">
+```
+
+## Checklist
+
+- [ ] No inline styles used
+- [ ] Responsive design (mobile-first)
+- [ ] Dark mode support (`dark:` variants)
+- [ ] Semantic color tokens used
+- [ ] Consistent spacing scale
+- [ ] Focus states for interactive elements
+- [ ] Hover states with transitions
+- [ ] Loading/skeleton states
+- [ ] Classes sorted (with Prettier plugin)

package/.agent/skills/frontend-agent/resources/tech-stack.md

@@ -0,0 +1,36 @@
+# Frontend Agent - Tech Stack Reference
+
+## Core Stack
+- **Framework**: Next.js 14+ (App Router), React 18+
+- **Language**: TypeScript (strict mode)
+- **Styling**: Tailwind CSS 3+ (NO inline styles)
+- **Components**: shadcn/ui, Radix UI
+- **State**: React Context, Zustand, or Redux Toolkit
+- **Forms**: React Hook Form + Zod
+- **API Client**: TanStack Query
+- **Testing**: Vitest, React Testing Library, Playwright
+
+## Code Standards
+- Explicit TypeScript interfaces for props
+- Tailwind classes only (no inline styles)
+- Semantic HTML with ARIA labels
+- Keyboard navigation support
+
+## Project Structure
+
+```
+src/
+  app/           # Next.js App Router pages
+  components/
+    ui/          # Reusable primitives (button, card)
+    [feature]/   # Feature components
+  lib/
+    api/         # API clients (TanStack Query hooks)
+    hooks/       # Custom hooks
+  types/         # TypeScript types
+```
+
+## Serena MCP Shortcuts
+- `find_symbol("ComponentName")`: Locate existing component
+- `get_symbols_overview("src/components")`: List all components
+- `find_referencing_symbols("Button")`: Find usages before changes

package/.agent/skills/mobile-agent/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: mobile-agent
+description: Mobile specialist for Flutter, React Native, and cross-platform mobile development
+---
+
+# Mobile Agent - Cross-Platform Mobile Specialist
+
+## When to use
+- Building native mobile applications (iOS + Android)
+- Mobile-specific UI patterns
+- Platform features (camera, GPS, push notifications)
+- Offline-first architecture
+
+## When NOT to use
+- Web frontend -> use Frontend Agent
+- Backend APIs -> use Backend Agent
+
+## Core Rules
+1. Clean Architecture: domain -> data -> presentation
+2. Riverpod/Bloc for state management (no raw setState for complex logic)
+3. Material Design 3 (Android) + iOS HIG (iOS)
+4. All controllers disposed in `dispose()` method
+5. Dio with interceptors for API calls; handle offline gracefully
+6. 60fps target; test on both platforms
+
+## How to Execute
+Follow `resources/execution-protocol.md` step by step.
+See `resources/examples.md` for input/output examples.
+Before submitting, run `resources/checklist.md`.
+
+## Serena Memory (CLI Mode)
+See `../_shared/serena-memory-protocol.md`.
+
+## References
+- Execution steps: `resources/execution-protocol.md`
+- Code examples: `resources/examples.md`
+- Code snippets: `resources/snippets.md`
+- Checklist: `resources/checklist.md`
+- Error recovery: `resources/error-playbook.md`
+- Tech stack: `resources/tech-stack.md`
+- Screen template: `resources/screen-template.dart`
+- Context loading: `../_shared/context-loading.md`
+- Reasoning templates: `../_shared/reasoning-templates.md`
+- Clarification: `../_shared/clarification-protocol.md`
+- Context budget: `../_shared/context-budget.md`
+- Lessons learned: `../_shared/lessons-learned.md`

package/.agent/skills/mobile-agent/resources/checklist.md

@@ -0,0 +1,35 @@
+# Mobile Agent - Self-Verification Checklist
+
+Run through every item before submitting your work.
+
+## Architecture
+- [ ] Clean Architecture layers: domain -> data -> presentation
+- [ ] Entities are pure Dart (no framework dependencies)
+- [ ] Repository pattern with interface + implementation
+- [ ] Riverpod/Bloc for state management (no setState in complex widgets)
+
+## Platform
+- [ ] Material Design 3 for Android
+- [ ] iOS Human Interface Guidelines followed
+- [ ] Platform-specific code guarded with `Platform.isIOS`/`Platform.isAndroid`
+- [ ] Tested on both iOS and Android (emulator or device)
+- [ ] Dark mode supported
+
+## Performance
+- [ ] 60fps scrolling (no jank)
+- [ ] Controllers disposed in `dispose()` method
+- [ ] No memory leaks (listeners, subscriptions cleaned up)
+- [ ] Images cached and sized appropriately
+- [ ] Cold start < 2s
+
+## API Integration
+- [ ] Dio with interceptors (auth, error handling)
+- [ ] Loading states shown during API calls
+- [ ] Error states with retry action
+- [ ] Offline handling (graceful degradation or offline-first)
+
+## Testing
+- [ ] Unit tests for domain logic and providers
+- [ ] Widget tests for key screens
+- [ ] Edge cases: empty lists, error states, offline mode
+- [ ] Tests pass on both platforms

package/.agent/skills/mobile-agent/resources/error-playbook.md

@@ -0,0 +1,106 @@
+# Mobile Agent - Error Recovery Playbook
+
+When you encounter a failure, find the matching scenario and follow the recovery steps.
+Do NOT stop or ask for help until you have exhausted the playbook.
+
+---
+
+## Dart Analysis Error
+
+**Symptoms**: `flutter analyze` errors, type mismatch, null safety issues
+
+1. Read the error — file, line, expected type vs actual
+2. Null safety issue: add `?` for nullable, `!` only if you're certain it's non-null
+3. Type mismatch: check the model class — does it match the API response?
+4. Missing override: add `@override` annotation
+5. **절대 하지 말 것**: `// ignore:` comments로 분석 경고 무시
+
+---
+
+## Build Failure
+
+**Symptoms**: `flutter build` fails, Gradle/Xcode errors
+
+1. **Gradle (Android)**:
+   - `Could not resolve`: dependency version conflict → check `pubspec.yaml`
+   - `minSdkVersion`: update `android/app/build.gradle` minimum SDK
+2. **Xcode (iOS)**:
+   - `Pod install` failure: note in result — may need `pod repo update`
+   - Minimum deployment target: check `ios/Podfile`
+3. Clean and retry: `flutter clean && flutter pub get`
+4. If persists: note in result with full error — 환경 문제일 수 있음
+
+---
+
+## Test Failure
+
+**Symptoms**: `flutter test` FAILED, widget test assertion errors
+
+1. Read the error — which test, which widget, expected vs actual
+2. Widget test: check if `pumpAndSettle()` is needed (async operations)
+3. Provider not found: wrap test widget with `ProviderScope` (Riverpod)
+4. Mock missing: ensure all dependencies are mocked
+5. Re-run specific test: `flutter test test/path/to_test.dart`
+6. **3회 실패 시**: 다른 접근 방식 시도
+
+---
+
+## State Management Issue
+
+**Symptoms**: UI not updating, stale state, provider errors
+
+1. **Riverpod**: Check provider type — `StateNotifierProvider` vs `FutureProvider` vs `AsyncNotifierProvider`
+2. Is the widget watching correctly? (`ref.watch` not `ref.read` for UI)
+3. Is the state being mutated instead of replaced? (create new state object)
+4. Add debug print in provider to trace state changes
+5. Check: is `dispose` being called prematurely?
+
+---
+
+## Platform-Specific Crash
+
+**Symptoms**: Works on one platform, crashes on another
+
+1. Check for `Platform.isIOS` / `Platform.isAndroid` guards
+2. Check permissions: camera, location, storage — different per platform
+3. Check native plugin compatibility — some plugins don't support both platforms
+4. If plugin issue: note in result with platform and version info
+5. Test on emulator for the failing platform
+
+---
+
+## Memory Leak
+
+**Symptoms**: App slows down over time, `flutter run` shows increasing memory
+
+1. Check: are all controllers disposed? (`TextEditingController`, `AnimationController`)
+2. Check: are streams closed? (`StreamSubscription.cancel()`)
+3. Check: are listeners removed? (`removeListener` in `dispose`)
+4. Check: are `Timer` / `Timer.periodic` cancelled?
+5. Use `DevTools` memory tab to identify leak source
+
+---
+
+## API Integration Error
+
+**Symptoms**: Dio errors, `DioException`, wrong response parsing
+
+1. **Connection refused**: backend running? correct URL/port?
+2. **401**: auth interceptor sending token? token expired?
+3. **Parse error**: `response.data` shape doesn't match model → log raw response
+4. **Timeout**: increase Dio timeout or check network conditions
+5. If backend issue: document expected contract in result
+
+---
+
+## Rate Limit / Quota / Memory Fallback
+
+동일: backend-agent 플레이북의 "Rate Limit" 및 "Serena Memory" 섹션 참조.
+
+---
+
+## 일반 원칙
+
+- **3회 실패**: 같은 접근 3번 실패하면 반드시 다른 방법 시도
+- **막힘**: 5턴 이상 진전 없으면 현재 상태 저장, `Status: blocked`
+- **범위 초과**: backend/frontend 문제는 result에 기록만

package/.agent/skills/mobile-agent/resources/examples.md

@@ -0,0 +1,79 @@
+# Mobile Agent - Examples
+
+## Example 1: List Screen with CRUD
+
+**Input**: "Create a todo list screen with add, toggle, and swipe-to-delete"
+
+**Output**:
+```
+## Task: Todo List Screen
+
+### Implementation
+- Screens: TodoListScreen, AddTodoSheet (bottom sheet)
+- State: Riverpod with AsyncNotifier for todo list
+- API: Dio with auth interceptor -> /api/todos
+
+### Platform Support
+- [x] iOS (14.0+) - Cupertino swipe actions
+- [x] Android (API 24+) - Material Dismissible
+- [x] Dark mode
+
+### Files Created
+- lib/features/todo/domain/entities/todo.dart
+- lib/features/todo/domain/repositories/todo_repository.dart
+- lib/features/todo/data/models/todo_model.dart
+- lib/features/todo/data/repositories/todo_repository_impl.dart
+- lib/features/todo/presentation/providers/todo_provider.dart
+- lib/features/todo/presentation/screens/todo_list_screen.dart
+- lib/features/todo/presentation/widgets/todo_item.dart
+- test/features/todo/todo_provider_test.dart
+- test/features/todo/todo_list_screen_test.dart
+```
+
+## Example 2: Authentication Flow
+
+**Input**: "Create login and register screens with JWT auth"
+
+**Output**:
+```
+## Task: Authentication Screens
+
+### Implementation
+- Screens: LoginScreen, RegisterScreen
+- State: Riverpod AuthNotifier (token storage via flutter_secure_storage)
+- Navigation: GoRouter redirect guard for unauthenticated users
+- Validation: Form validation for email + password
+
+### Files Created
+- lib/core/auth/auth_provider.dart
+- lib/core/auth/auth_interceptor.dart (Dio interceptor)
+- lib/features/auth/presentation/screens/login_screen.dart
+- lib/features/auth/presentation/screens/register_screen.dart
+- lib/features/auth/presentation/widgets/auth_form.dart
+- test/core/auth/auth_provider_test.dart
+```
+
+## Example 3: Offline-First Feature
+
+**Input**: "Make the notes feature work offline with sync"
+
+**Output**:
+```
+## Task: Offline Notes with Sync
+
+### Implementation
+- Local DB: Drift (SQLite) for offline storage
+- Sync: Queue-based sync on connectivity change
+- UI: Sync status indicator (synced/pending/error)
+
+### Architecture
+- NoteLocalDataSource (Drift) + NoteRemoteDataSource (Dio)
+- NoteRepository merges local + remote with conflict resolution
+- ConnectivityProvider triggers sync on reconnect
+
+### Files Created
+- lib/features/notes/data/local/note_dao.dart
+- lib/features/notes/data/local/note_database.dart
+- lib/features/notes/data/repositories/note_sync_repository.dart
+- lib/core/sync/sync_queue.dart
+```

package/.agent/skills/mobile-agent/resources/execution-protocol.md

@@ -0,0 +1,49 @@
+# Mobile Agent - Execution Protocol
+
+## Step 0: Prepare
+1. **Assess difficulty** — see `../_shared/difficulty-guide.md`
+   - **Simple**: Skip to Step 3 | **Medium**: All 4 steps | **Complex**: All steps + checkpoints
+2. **Check lessons** — read your domain section in `../_shared/lessons-learned.md`
+3. **Clarify requirements** — follow `../_shared/clarification-protocol.md`
+   - Check **Uncertainty Triggers**: 비즈니스 로직, 보안/인증, 기존 코드 충돌?
+   - Determine level: LOW → proceed | MEDIUM → present options | HIGH → ask immediately
+4. **Budget context** — follow `../_shared/context-budget.md` (read symbols, not whole files)
+
+**⚠️ Intelligent Escalation**: When uncertain, escalate early. Don't blindly proceed.
+
+Follow these steps in order (adjust depth by difficulty).
+
+## Step 1: Analyze
+- Read the task requirements carefully
+- Identify which screens, widgets, and providers are needed
+- Check existing code with Serena: `get_symbols_overview("lib/features")`, `find_symbol("ScreenName")`
+- Determine platform-specific requirements (iOS vs Android)
+- List assumptions; ask if unclear
+
+## Step 2: Plan
+- Decide on feature structure using Clean Architecture
+- Define entities (domain) and repository interfaces
+- Plan state management (Riverpod providers)
+- Identify navigation routes (GoRouter)
+- Plan offline-first strategy if required
+- Note platform differences (Material Design 3 vs iOS HIG)
+
+## Step 3: Implement
+- Create/modify files in this order:
+  1. Domain: entities and repository interfaces
+  2. Data: models, API clients (Dio), repository implementations
+  3. Presentation: providers (Riverpod), screens, widgets
+  4. Navigation: GoRouter routes
+  5. Tests: unit + widget tests
+- Use `resources/screen-template.dart` as reference
+- Follow Clean Architecture layers strictly
+
+## Step 4: Verify
+- Run `resources/checklist.md` items
+- Run `../_shared/common-checklist.md` items
+- Test on both iOS and Android (or emulators)
+- Verify 60fps performance (no jank)
+- Check dark mode support
+
+## On Error
+See `resources/error-playbook.md` for recovery steps.