@wipal/agent-team 1.0.0

package/.claude/skills/domain/frontend/frontend-design/SKILL.md

@@ -0,0 +1,138 @@
+---
+name: frontend-design
+description: |
+  Create distinctive, production-grade frontend interfaces. Use when building
+  UI components, pages, websites, dashboards, React/Vue components, HTML/CSS
+  layouts, or when styling/beautifying any web UI. Use when user mentions
+  "design", "UI", "component", "page", "style", "dashboard", "landing page".
+  Make designs UNFORGETTABLE - avoid generic AI aesthetics.
+version: 1.0.0
+category: frontend
+tags:
+  - ui
+  - ux
+  - design
+  - components
+depends_on:
+  - code-review
+recommends:
+  - accessibility
+  - state-management
+used_by:
+  - accessibility
+---
+
+# Skill: Frontend Design
+
+## Core Principle
+**Design with intention.** Bold minimalism and refined maximalism both work - mediocrity never does. Every choice should be deliberate.
+
+## Hard Rules
+
+1. **NEVER use Inter, Roboto, Arial, system fonts** - Choose distinctive, characterful fonts
+2. **NEVER use purple gradients on white** - Most AI-generated aesthetic
+3. **NEVER use Space Grotesk repeatedly** - Vary font choices
+4. **ALWAYS commit to an aesthetic** - Timid design is bad design
+5. **ALWAYS consider motion** - Animations create delight
+6. **ALWAYS test responsive** - Mobile is not optional
+
+## Design Decision Framework
+
+### Before Coding
+1. **Purpose**: What problem does this solve? Who uses it?
+2. **Tone**: Pick extreme - brutalist, maximalist, organic, luxury, playful, editorial...
+3. **Differentiation**: What makes this UNFORGETTABLE?
+
+### Typography
+- Choose fonts with character
+- Pair distinctive display + refined body
+- Avoid generic defaults
+
+### Color
+- Commit to cohesive palette
+- Dominant colors with sharp accents
+- Avoid evenly-distributed "safe" palettes
+
+### Motion
+- One well-orchestrated page load > scattered micro-interactions
+- Use `animation-delay` for staggered reveals
+- Hover states should surprise
+
+### Layout
+- Unexpected layouts, asymmetry, grid-breaking
+- Generous negative space OR controlled density
+- Not predictable 3-column layouts
+
+## Common Mistakes
+
+| ❌ Mistake | ✅ Fix |
+|------------|--------|
+| Inter/Roboto font | Characterful fonts like Instrument Serif |
+| Purple gradient on white | Bold single color or unexpected palette |
+| Predictable 3-column | Asymmetry, overlap, diagonal flow |
+| No animation | CSS transitions, staggered reveals |
+| Safe, even spacing | Generous space OR controlled density |
+| Same design every time | Vary between light/dark, different aesthetics |
+
+## Quick Patterns
+
+```css
+/* Distinctive typography */
+font-family: 'Instrument Serif', serif;
+font-family: 'DM Sans', sans-serif;
+
+/* Commit to color */
+--primary: #1a1a1a;
+--accent: #ff3366;
+
+/* Motion */
+transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+/* Break the grid */
+transform: translateY(-20px);
+mix-blend-mode: difference;
+```
+
+## Component Patterns
+
+### Atomic Structure
+```text
+components/
+├── atoms/       # Button, Input, Label
+├── molecules/   # SearchBar, FormField
+├── organisms/   # Header, Sidebar
+├── templates/   # PageLayouts
+└── pages/       # Complete pages
+```
+
+### Compound Components
+```tsx
+<Card>
+  <Card.Header>Title</Card.Header>
+  <Card.Body>Content</Card.Body>
+  <Card.Footer>Action</Card.Footer>
+</Card>
+```
+
+## Accessibility (Non-negotiable)
+
+```tsx
+// Icon button needs label
+<button aria-label="Close">
+  <XIcon />
+</button>
+
+// Form field with hint
+<label htmlFor="email">Email</label>
+<input id="email" aria-describedby="email-hint" />
+<span id="email-hint">We'll never share</span>
+```
+
+## Output Checklist
+
+- [ ] Typography: Distinctive, not generic
+- [ ] Color: Cohesive, committed
+- [ ] Layout: Intentional, not default
+- [ ] Motion: Purposeful
+- [ ] Responsive: Works at 375px
+- [ ] Accessible: ARIA labels, focus states

package/.claude/skills/domain/frontend/performance-fe/SKILL.md

@@ -0,0 +1,195 @@
+---
+name: performance-fe
+description: |
+  React/frontend performance optimization patterns. Use when: optimizing render
+  performance, reducing bundle size, improving Core Web Vitals, or when user
+  mentions "performance", "slow", "optimize", "bundle size", "Lighthouse", "LCP".
+  Fast apps = happy users.
+version: 1.0.0
+category: frontend
+tags:
+  - performance
+  - optimization
+  - core-web-vitals
+  - bundle-size
+depends_on:
+  - frontend-design
+recommends: []
+used_by: []
+---
+
+# Skill: Performance FE
+
+## Core Principle
+**Measure before optimizing.** Premature optimization is waste. Fix real bottlenecks.
+
+## Core Web Vitals
+
+| Metric | Target | What |
+|--------|--------|------|
+| **LCP** | < 2.5s | Largest Contentful Paint |
+| **FID** | < 100ms | First Input Delay |
+| **CLS** | < 0.1 | Cumulative Layout Shift |
+
+## Hard Rules
+
+1. **NEVER optimize without measuring** - Profile first
+2. **NEVER use useEffect for derived state** - Compute in render
+3. **ALWAYS lazy load below fold** - Code splitting
+4. **ALWAYS memoize expensive computes** - useMemo, useCallback
+5. **ALWAYS optimize images** - WebP, lazy load, srcset
+
+## React Performance Patterns
+
+### Memoization
+
+```tsx
+import { memo, useMemo, useCallback } from 'react';
+
+// Memo component to prevent re-renders
+const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
+  return <div>{/* expensive render */}</div>;
+});
+
+// Memo expensive computation
+function Dashboard({ items }) {
+  const sortedItems = useMemo(
+    () => items.sort((a, b) => b.value - a.value),
+    [items]
+  );
+}
+
+// Memo callback passed to children
+function Parent() {
+  const handleClick = useCallback((id) => {
+    console.log(id);
+  }, []);
+
+  return <Child onClick={handleClick} />;
+}
+```
+
+### List Virtualization
+
+```tsx
+import { FixedSizeList } from 'react-window';
+
+function VirtualList({ items }) {
+  return (
+    <FixedSizeList
+      height={600}
+      itemCount={items.length}
+      itemSize={50}
+    >
+      {({ index, style }) => (
+        <div style={style}>{items[index].name}</div>
+      )}
+    </FixedSizeList>
+  );
+}
+```
+
+## Code Splitting
+
+```tsx
+import { lazy, Suspense } from 'react';
+
+// Lazy load heavy components
+const HeavyChart = lazy(() => import('./HeavyChart'));
+
+function Dashboard() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <HeavyChart />
+    </Suspense>
+  );
+}
+
+// Route-based splitting
+const routes = {
+  '/settings': lazy(() => import('./Settings')),
+  '/analytics': lazy(() => import('./Analytics')),
+};
+```
+
+## Common Mistakes
+
+| ❌ Mistake | ✅ Fix |
+|------------|--------|
+| Inline objects in render | useMemo, move outside |
+| Inline functions in render | useCallback |
+| useEffect for derived state | Compute in render |
+| Large initial bundle | Code splitting |
+| Unoptimized images | WebP, lazy load, srcset |
+| No virtualization | react-window |
+
+## Image Optimization
+
+```tsx
+// Responsive images
+<picture>
+  <source srcSet="/image.avif" type="image/avif" />
+  <source srcSet="/image.webp" type="image/webp" />
+  <img src="/image.jpg" loading="lazy" alt="Description" />
+</picture>
+
+// Next.js Image
+import Image from 'next/image';
+
+<Image
+  src="/hero.jpg"
+  alt="Hero"
+  width={1200}
+  height={600}
+  priority // For above fold
+/>
+```
+
+## Bundle Analysis
+
+```bash
+# Analyze bundle size
+npx vite-bundle-visualizer
+
+# Check what's in your bundle
+npx source-map-explorer dist/assets/*.js
+```
+
+## Performance Checklist
+
+### JavaScript
+- [ ] Code splitting implemented
+- [ ] Tree shaking working
+- [ ] No unnecessary dependencies
+- [ ] Lazy loading for routes
+
+### React
+- [ ] No useEffect for derived state
+- [ ] Lists virtualized
+- [ ] Expensive computes memoized
+- [ ] Props stable (useCallback)
+
+### Assets
+- [ ] Images optimized (WebP/AVIF)
+- [ ] Lazy loading for below fold
+- [ ] Fonts preloaded
+- [ ] Critical CSS inlined
+
+### Metrics
+- [ ] LCP < 2.5s
+- [ ] FID < 100ms
+- [ ] CLS < 0.1
+
+## Profiling
+
+```bash
+# Lighthouse
+npx lighthouse https://yoursite.com --view
+
+# React DevTools Profiler
+# 1. Open DevTools
+# 2. Go to Profiler tab
+# 3. Click record
+# 4. Interact with app
+# 5. Analyze flame graph
+```

package/.claude/skills/domain/frontend/state-management/SKILL.md

@@ -0,0 +1,190 @@
+---
+name: state-management
+description: |
+  Frontend state management patterns with Zustand, TanStack Query, React Context.
+  Use when: managing application state, server state, URL state, or when user
+  mentions "state", "Zustand", "React Query", "TanStack Query", "context", "store".
+  Choose the right tool for each type of state.
+version: 1.0.0
+category: frontend
+tags:
+  - state
+  - zustand
+  - tanstack-query
+  - react-query
+depends_on:
+  - frontend-design
+recommends: []
+used_by: []
+---
+
+# Skill: State Management
+
+## Core Principle
+**Different state types need different solutions.** Don't use a hammer for everything.
+
+## State Types
+
+| Type | Tool | Examples |
+|------|------|----------|
+| **Server State** | TanStack Query | API data, cached responses |
+| **Client State** | Zustand | UI state, preferences |
+| **URL State** | URL params | Filters, pagination |
+| **Form State** | React Hook Form | Form inputs, validation |
+| **Local State** | useState | Component-only state |
+
+## Server State (TanStack Query)
+
+```tsx
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+
+// Fetching data
+function useUser(id: string) {
+  return useQuery({
+    queryKey: ['user', id],
+    queryFn: () => fetchUser(id),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+}
+
+// Mutations
+function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateUser,
+    onSuccess: (data, variables) => {
+      // Invalidate and refetch
+      queryClient.invalidateQueries({ queryKey: ['user', variables.id] });
+    },
+  });
+}
+
+// Usage
+function UserProfile({ userId }: { userId: string }) {
+  const { data, isLoading, error } = useUser(userId);
+  const update = useUpdateUser();
+
+  if (isLoading) return <Loading />;
+  if (error) return <Error />;
+
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <button onClick={() => update.mutate({ id: userId, name: 'New' })}>
+        Update
+      </button>
+    </div>
+  );
+}
+```
+
+## Client State (Zustand)
+
+```tsx
+import { create } from 'zustand';
+import { persist, devtools } from 'zustand/middleware';
+
+// Store definition
+interface AppState {
+  theme: 'light' | 'dark';
+  sidebarOpen: boolean;
+  toggleTheme: () => void;
+  toggleSidebar: () => void;
+}
+
+const useStore = create<AppState>()(
+  devtools(
+    persist(
+      (set) => ({
+        theme: 'light',
+        sidebarOpen: false,
+        toggleTheme: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
+        toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
+      }),
+      { name: 'app-store' }
+    )
+  )
+);
+
+// Usage
+function ThemeToggle() {
+  const { theme, toggleTheme } = useStore();
+  return <button onClick={toggleTheme}>{theme}</button>;
+}
+
+// Selectors for performance
+const theme = useStore((s) => s.theme); // Only re-renders when theme changes
+```
+
+## URL State
+
+```tsx
+import { useSearchParams } from 'react-router-dom';
+
+function ProductList() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Read from URL
+  const page = Number(searchParams.get('page')) || 1;
+  const category = searchParams.get('category') || 'all';
+
+  // Update URL
+  const setPage = (p: number) => {
+    setSearchParams({ page: String(p), category });
+  };
+
+  return (
+    <div>
+      <Pagination current={page} onChange={setPage} />
+    </div>
+  );
+}
+```
+
+## Common Mistakes
+
+| ❌ Mistake | ✅ Fix |
+|------------|--------|
+| Storing API data in Zustand | Use TanStack Query |
+| useState for global state | Use Zustand |
+| useEffect for derived state | Compute during render |
+| Prop drilling | Context or Zustand |
+| Not persisting preferences | Add persist middleware |
+
+## Derived State
+
+```tsx
+// ❌ Bad: useEffect for derived state
+const [total, setTotal] = useState(0);
+useEffect(() => {
+  setTotal(items.reduce((sum, item) => sum + item.price, 0));
+}, [items]);
+
+// ✅ Good: Compute during render
+const total = items.reduce((sum, item) => sum + item.price, 0);
+```
+
+## When to Use What
+
+```
+API data → TanStack Query
+         ↓
+    Is it cached? Server state
+         ↓
+    Is it shared? Zustand
+         ↓
+    Is it form? React Hook Form
+         ↓
+    Is it URL? Search params
+         ↓
+    Local only? useState
+```
+
+## Quick Checklist
+
+- [ ] Server state uses TanStack Query
+- [ ] Client state uses Zustand
+- [ ] No useEffect for derived state
+- [ ] Form state uses React Hook Form
+- [ ] URL state for shareable state

package/.claude/skills/domain/frontend/testing-fe/SKILL.md

@@ -0,0 +1,193 @@
+---
+name: testing-fe
+description: |
+  Frontend testing with Vitest, Testing Library, Playwright. Use when: writing
+  unit tests, integration tests, component tests, E2E tests, or when user
+  mentions "test", "vitest", "jest", "testing library", "playwright", "cypress".
+  Test behavior, not implementation.
+version: 1.0.0
+category: frontend
+tags:
+  - testing
+  - vitest
+  - testing-library
+  - playwright
+depends_on:
+  - code-review
+recommends: []
+used_by: []
+---
+
+# Skill: Testing FE
+
+## Core Principle
+**Test behavior, not implementation.** Users don't care about your code structure—they care if it works.
+
+## Testing Trophy
+
+```
+         ▲
+        /E2E\         Few, slow, expensive
+       /─────\
+      /  API  \       Some, medium speed
+     /─────────\
+    / Integration \   Many, fast
+   /───────────────\
+  /    Unit Tests   \ Many, very fast
+ /───────────────────\
+```
+
+## Hard Rules
+
+1. **NEVER test implementation** - Test user behavior
+2. **NEVER use container.querySelector** - Use getBy* queries
+3. **ALWAYS use userEvent** - Not fireEvent
+4. **ALWAYS wait for async** - findBy*, waitFor
+5. **ALWAYS clean up** - No state leakage
+
+## Component Testing (Vitest + Testing Library)
+
+```tsx
+// Button.test.tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders with text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    render(<Button onClick={onClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('shows loading state', () => {
+    render(<Button loading>Submit</Button>);
+
+    expect(screen.getByRole('button')).toBeDisabled();
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+});
+```
+
+## Async Testing
+
+```tsx
+import { render, screen, waitFor } from '@testing-library/react';
+
+it('shows user after loading', async () => {
+  render(<UserProfile userId="1" />);
+
+  // Wait for element to appear
+  expect(await screen.findByText('John Doe')).toBeInTheDocument();
+
+  // Or use waitFor for complex conditions
+  await waitFor(() => {
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+  });
+});
+```
+
+## Mocking
+
+```tsx
+import { vi } from 'vitest';
+
+// Mock module
+vi.mock('../api', () => ({
+  fetchUser: vi.fn().mockResolvedValue({ id: '1', name: 'John' }),
+}));
+
+// Mock hooks
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+// Spy on console
+const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+```
+
+## Common Mistakes
+
+| ❌ Mistake | ✅ Fix |
+|------------|--------|
+| Testing props/state | Test rendered output |
+| Using fireEvent | Use userEvent |
+| Not waiting for async | findBy*, waitFor |
+| Testing implementation | Test user behavior |
+| Brittle selectors | Use accessible queries |
+
+## Query Priority
+
+```tsx
+// 1. Accessible queries (best)
+screen.getByRole('button', { name: /submit/i });
+screen.getByLabelText(/email/i);
+screen.getByPlaceholderText(/search/i);
+screen.getByText(/welcome/i);
+
+// 2. Semantic queries
+screen.getByAltText(/profile/i);
+screen.getByTitle(/close/i);
+
+// 3. Test ID (last resort)
+screen.getByTestId('submit-button');
+```
+
+## E2E Testing (Playwright)
+
+```typescript
+// example.spec.ts
+import { test, expect } from '@playwright/test';
+
+test('user can login', async ({ page }) => {
+  await page.goto('/login');
+
+  await page.fill('[name="email"]', 'test@example.com');
+  await page.fill('[name="password"]', 'password123');
+  await page.click('button[type="submit"]');
+
+  await expect(page).toHaveURL('/dashboard');
+  await expect(page.locator('h1')).toContainText('Welcome');
+});
+```
+
+## Vitest Config
+
+```typescript
+// vitest.config.ts
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    coverage: {
+      reporter: ['text', 'html'],
+      exclude: ['node_modules/', 'src/test/'],
+    },
+  },
+});
+```
+
+## Quick Checklist
+
+- [ ] Tests user behavior, not implementation
+- [ ] Uses accessible queries (getByRole)
+- [ ] Uses userEvent, not fireEvent
+- [ ] Waits for async with findBy/waitFor
+- [ ] Mocks external dependencies
+- [ ] Coverage reports generated