oh-my-ag 1.2.0

package/.agent/skills/frontend-agent/resources/component-template.tsx

@@ -0,0 +1,92 @@
+/**
+ * Component Template for Frontend Agent
+ *
+ * This is a reference template for creating new components.
+ * Follow this structure for consistency.
+ */
+
+import { cn } from '@/lib/utils';
+
+// 1. Type Definitions
+interface ComponentNameProps {
+  className?: string;
+  children: React.ReactNode;
+  // Add specific props here
+  variant?: 'default' | 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+// 2. Main Component
+export function ComponentName({
+  className,
+  children,
+  variant = 'default',
+  size = 'md',
+  onClick,
+  disabled = false,
+}: ComponentNameProps) {
+  // 3. Hooks (if needed)
+  // const [state, setState] = useState();
+
+  // 4. Effects (if needed)
+  // useEffect(() => {}, []);
+
+  // 5. Event Handlers
+  const handleClick = () => {
+    if (disabled) return;
+    onClick?.();
+  };
+
+  // 6. Computed Values
+  const classes = cn(
+    // Base styles
+    'inline-flex items-center justify-center rounded-md font-medium transition-colors',
+    // Variants
+    {
+      'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'primary',
+      'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
+      'bg-background text-foreground hover:bg-accent': variant === 'default',
+    },
+    // Sizes
+    {
+      'h-8 px-3 text-sm': size === 'sm',
+      'h-10 px-4 text-base': size === 'md',
+      'h-12 px-6 text-lg': size === 'lg',
+    },
+    // States
+    {
+      'opacity-50 cursor-not-allowed': disabled,
+    },
+    className
+  );
+
+  // 7. Render
+  return (
+    <button
+      type="button"
+      className={classes}
+      onClick={handleClick}
+      disabled={disabled}
+      aria-disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
+
+// 8. Sub-components (if needed)
+ComponentName.Slot = function ComponentNameSlot({
+  className,
+  children,
+}: ComponentNameProps) {
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      {children}
+    </div>
+  );
+};
+
+// 9. Display Name (for debugging)
+ComponentName.displayName = 'ComponentName';

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

@@ -0,0 +1,108 @@
+# Frontend 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.
+
+---
+
+## TypeScript Compilation Error
+
+**Symptoms**: `TS2322`, `TS2345`, `Type X is not assignable to type Y`
+
+1. Read the error — which file, which line, which types conflict
+2. Check: is the interface/type definition correct?
+3. Check: is the API response type matching the expected shape?
+4. If API mismatch: update the type to match actual response (don't cast with `as any`)
+5. If generic issue: use explicit type parameter `<Type>` instead of inference
+6. **절대 하지 말 것**: `@ts-ignore`, `as any` — 타입 문제를 해결하지 않고 숨기는 것
+
+---
+
+## Build Error
+
+**Symptoms**: `next build` fails, `Module not found`, `SyntaxError`
+
+1. Read the full error — which module, which file
+2. If missing dependency: note in result as "requires `npm install X`" — do NOT install yourself
+3. If import path wrong: use `search_for_pattern("export.*ComponentName")` to find actual path
+4. If dynamic import issue: ensure component is client-side (`'use client'`)
+5. Re-run build after fix to confirm
+
+---
+
+## Test Failure
+
+**Symptoms**: `vitest` FAILED, `expect(X).toBe(Y)` assertion errors
+
+1. Read the error — expected vs received, which test file
+2. `find_symbol("ComponentName")` to check current implementation
+3. Determine: test outdated or implementation wrong?
+   - Test expects old behavior → update test
+   - Component bug → fix component
+4. Re-run the specific test: `npx vitest run path/to/test.ts`
+5. **3회 실패 시**: 다른 접근 방식 시도. progress에 기록
+
+---
+
+## Hydration Mismatch (Next.js)
+
+**Symptoms**: `Hydration failed`, `Text content does not match server-rendered HTML`
+
+1. Find the component that renders differently on server vs client
+2. Common causes:
+   - `Date.now()` or `Math.random()` in render
+   - Browser-only APIs (`window`, `localStorage`) without `useEffect`
+   - Conditional rendering based on client-only state
+3. Fix: wrap client-only code in `useEffect` + state, or use `'use client'`
+4. If third-party component: wrap with `dynamic(() => import(...), { ssr: false })`
+
+---
+
+## API Integration Error
+
+**Symptoms**: `Network Error`, `CORS`, `401 Unauthorized`, wrong data shape
+
+1. **CORS**: Check backend CORS config — is frontend origin allowed?
+2. **401**: Check token — is it in the header? is it expired?
+3. **Wrong data**: Log `response.data` and compare with expected type
+4. **Network Error**: Is the backend running? Correct port?
+5. If backend isn't your responsibility: document the expected API contract in result
+
+---
+
+## Styling / Layout Broken
+
+**Symptoms**: Component renders but looks wrong, responsive breakpoint fails
+
+1. Check Tailwind classes — typo? wrong breakpoint prefix?
+2. Check parent container — is it blocking layout? (`overflow-hidden`, fixed width)
+3. Test at specific breakpoints: 320px, 768px, 1024px, 1440px
+4. Use browser DevTools to inspect computed styles
+5. If dark mode issue: check `dark:` variants applied
+
+---
+
+## Rate Limit / Quota Error (Gemini API)
+
+**Symptoms**: `429`, `RESOURCE_EXHAUSTED`, `rate limit exceeded`
+
+1. **즉시 멈춤** — 추가 API 호출 하지 말 것
+2. 현재까지 작업을 `progress-{agent-id}.md`에 저장
+3. `result-{agent-id}.md`에 Status: `quota_exceeded` 기록
+4. 남은 작업 목록을 명시
+
+---
+
+## Serena Memory 접근 불가
+
+1. 1회 재시도
+2. 2회 연속 실패: 로컬 파일 `/tmp/progress-{agent-id}.md` 사용
+3. result에 `memory_fallback: true` 플래그 추가
+
+---
+
+## 일반 원칙
+
+- **3회 실패**: 같은 접근 3번 실패하면 반드시 다른 방법 시도
+- **막힘**: 5턴 이상 진전 없으면 현재 상태 저장하고 `Status: blocked` 기록
+- **범위 초과**: backend 문제 발견 시 result에 기록만, 직접 수정하지 말 것

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

@@ -0,0 +1,77 @@
+# Frontend Agent - Examples
+
+## Example 1: Feature Component
+
+**Input**: "Create a todo list page with add, toggle, and delete"
+
+**Output**:
+```
+## Task: Todo List Page
+
+### Implementation
+- Components: TodoList, TodoItem, AddTodoForm
+- Routes: /todos (page)
+- State: TanStack Query for server state, local state for form
+
+### Files Created/Modified
+- src/types/todo.ts (NEW) - Todo interface
+- src/lib/api/todos.ts (NEW) - API client with TanStack Query hooks
+- src/components/todo/TodoItem.tsx (NEW) - Single todo display
+- src/components/todo/AddTodoForm.tsx (NEW) - Form with validation
+- src/components/todo/TodoList.tsx (NEW) - List container
+- src/app/todos/page.tsx (NEW) - Page component
+- tests/components/TodoList.test.tsx (NEW)
+
+### Testing
+- Unit tests: 5 passing
+- Keyboard navigation: verified
+- Responsive: tested at 4 breakpoints
+```
+
+## Example 2: Form with Validation
+
+**Input**: "Create a user profile edit form"
+
+**Output**:
+```
+## Task: Profile Edit Form
+
+### Implementation
+- Components: ProfileForm (React Hook Form + Zod)
+- Validation: name (required, 2-50 chars), email (valid format), bio (optional, max 500)
+- API: PATCH /api/users/me via TanStack Query mutation
+- UX: optimistic update, error toast, success redirect
+
+### Files Created
+- src/types/user.ts
+- src/lib/api/users.ts
+- src/components/profile/ProfileForm.tsx
+- src/app/profile/edit/page.tsx
+- tests/components/ProfileForm.test.tsx
+```
+
+## Example 3: Responsive Dashboard
+
+**Input**: "Build a dashboard with stats cards and a chart"
+
+**Output**:
+```
+## Task: Dashboard Page
+
+### Implementation
+- Components: StatCard, StatsGrid, ActivityChart
+- Layout: CSS Grid - 1 col (mobile), 2 col (tablet), 4 col (desktop)
+- Chart: recharts with responsive container
+- Data: TanStack Query with 30s refetch interval
+
+### Accessibility
+- [x] All cards have aria-label with stat value
+- [x] Chart has aria-describedby with text summary
+- [x] Color contrast 4.5:1 on all text
+
+### Files Created
+- src/components/dashboard/StatCard.tsx
+- src/components/dashboard/StatsGrid.tsx
+- src/components/dashboard/ActivityChart.tsx
+- src/app/dashboard/page.tsx
+```

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

@@ -0,0 +1,49 @@
+# Frontend 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 components, pages, and hooks are needed
+- Check existing code with Serena: `get_symbols_overview("src/components")`, `find_symbol("ComponentName")`
+- Review existing patterns: `find_referencing_symbols("Button")` to understand usage conventions
+- List assumptions; ask if unclear
+
+## Step 2: Plan
+- Decide on component structure (which are new, which extend existing)
+- Define props interfaces with TypeScript
+- Plan state management approach (local state, Context, Zustand)
+- Identify API integration points (TanStack Query hooks)
+- Plan responsive breakpoints and accessibility requirements
+
+## Step 3: Implement
+- Create/modify files in this order:
+  1. TypeScript types/interfaces
+  2. API client hooks (TanStack Query)
+  3. Reusable UI components (shadcn/ui based)
+  4. Feature components (compose UI + logic)
+  5. Page components (route-level)
+  6. Tests (unit + integration)
+- Use `resources/component-template.tsx` as reference
+- Follow `resources/tailwind-rules.md` for styling
+
+## Step 4: Verify
+- Run `resources/checklist.md` items
+- Run `../_shared/common-checklist.md` items
+- Check TypeScript strict mode: no errors
+- Verify responsive design at 320px, 768px, 1024px, 1440px
+- Test keyboard navigation and screen reader compatibility
+
+## On Error
+See `resources/error-playbook.md` for recovery steps.

package/.agent/skills/frontend-agent/resources/snippets.md

@@ -0,0 +1,205 @@
+# Frontend Agent - Code Snippets
+
+Copy-paste ready patterns. Use these as starting points, adapt to the specific task.
+
+---
+
+## React Component with Props
+
+```tsx
+interface CardProps {
+  title: string;
+  description?: string;
+  onClick?: () => void;
+}
+
+export function Card({ title, description, onClick }: CardProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="rounded-lg border bg-card p-4 text-left shadow-sm transition-colors hover:bg-accent"
+    >
+      <h3 className="text-lg font-semibold">{title}</h3>
+      {description && (
+        <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+      )}
+    </button>
+  );
+}
+```
+
+---
+
+## TanStack Query Hook
+
+```tsx
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+export function useTodos() {
+  return useQuery<Todo[]>({
+    queryKey: ["todos"],
+    queryFn: async () => {
+      const res = await fetch("/api/todos", {
+        headers: { Authorization: `Bearer ${getToken()}` },
+      });
+      if (!res.ok) throw new Error("Failed to fetch");
+      return res.json();
+    },
+  });
+}
+
+export function useCreateTodo() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (data: { title: string }) => {
+      const res = await fetch("/api/todos", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getToken()}`,
+        },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) throw new Error("Failed to create");
+      return res.json();
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["todos"] }),
+  });
+}
+```
+
+---
+
+## Form with React Hook Form + Zod
+
+```tsx
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+const schema = z.object({
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "At least 8 characters"),
+});
+
+type FormData = z.infer<typeof schema>;
+
+export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>({ resolver: zodResolver(schema) });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div>
+        <label htmlFor="email" className="text-sm font-medium">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          {...register("email")}
+          className="mt-1 w-full rounded-md border px-3 py-2"
+          aria-invalid={!!errors.email}
+        />
+        {errors.email && (
+          <p className="mt-1 text-sm text-destructive">{errors.email.message}</p>
+        )}
+      </div>
+      <div>
+        <label htmlFor="password" className="text-sm font-medium">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          {...register("password")}
+          className="mt-1 w-full rounded-md border px-3 py-2"
+          aria-invalid={!!errors.password}
+        />
+        {errors.password && (
+          <p className="mt-1 text-sm text-destructive">{errors.password.message}</p>
+        )}
+      </div>
+      <button
+        type="submit"
+        disabled={isSubmitting}
+        className="w-full rounded-md bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+      >
+        {isSubmitting ? "Signing in..." : "Sign in"}
+      </button>
+    </form>
+  );
+}
+```
+
+---
+
+## Loading / Error / Empty States
+
+```tsx
+interface AsyncStateProps<T> {
+  data: T | undefined;
+  isLoading: boolean;
+  error: Error | null;
+  empty: React.ReactNode;
+  children: (data: T) => React.ReactNode;
+}
+
+export function AsyncState<T>({ data, isLoading, error, empty, children }: AsyncStateProps<T>) {
+  if (isLoading) return <div className="flex justify-center p-8"><Spinner /></div>;
+  if (error) return <ErrorCard message={error.message} />;
+  if (!data || (Array.isArray(data) && data.length === 0)) return <>{empty}</>;
+  return <>{children(data)}</>;
+}
+```
+
+---
+
+## Responsive Grid Layout
+
+```tsx
+export function StatsGrid({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {children}
+    </div>
+  );
+}
+```
+
+---
+
+## Vitest Component Test
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { Card } from "./Card";
+
+describe("Card", () => {
+  it("renders title and description", () => {
+    render(<Card title="Test" description="Desc" />);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(screen.getByText("Desc")).toBeInTheDocument();
+  });
+
+  it("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    render(<Card title="Test" onClick={onClick} />);
+    await userEvent.click(screen.getByText("Test"));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
+```