@wipal/agent-team 1.0.4 → 1.1.0

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

@@ -0,0 +1,207 @@
+---
+name: responsive-design
+description: |
+  Mobile-first responsive design with breakpoints and adaptive layouts.
+  Use when creating responsive layouts, mobile designs, or adapting for different screens.
+  Triggers: responsive, mobile-first, breakpoints, adaptive, mobile, tablet, desktop
+version: 1.0.0
+category: design
+tags:
+  - responsive
+  - mobile-first
+  - breakpoints
+  - adaptive
+depends_on: [ui-design]
+recommends: []
+used_by: []
+---
+
+# Responsive Design Guide
+
+Mobile-first approach to creating adaptive layouts.
+
+## Mobile-First Philosophy
+
+Start with mobile styles, then add complexity for larger screens.
+
+**Why Mobile-First:**
+- Forces prioritization of content
+- Simpler base styles
+- Progressive enhancement
+- Better performance on mobile
+
+## Breakpoint System
+
+### Standard Breakpoints
+
+```css
+/* Mobile First (min-width) */
+--breakpoint-sm: 640px;   /* Small tablets */
+--breakpoint-md: 768px;   /* Tablets */
+--breakpoint-lg: 1024px;  /* Laptops */
+--breakpoint-xl: 1280px;  /* Desktops */
+--breakpoint-2xl: 1536px; /* Large screens */
+```
+
+### Tailwind-style Usage
+
+```css
+/* Base: Mobile styles */
+.container {
+  padding: 1rem;
+}
+
+/* sm: 640px+ */
+@media (min-width: 640px) {
+  .container {
+    padding: 1.5rem;
+  }
+}
+
+/* md: 768px+ */
+@media (min-width: 768px) {
+  .container {
+    padding: 2rem;
+  }
+}
+```
+
+## Layout Patterns
+
+### Container
+
+```css
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+```
+
+### Responsive Grid
+
+```css
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+```
+
+### Stack on Mobile
+
+```css
+/* Mobile: Stack */
+.flex-mobile-stack {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Desktop: Row */
+@media (min-width: 768px) {
+  .flex-mobile-stack {
+    flex-direction: row;
+    gap: 2rem;
+  }
+}
+```
+
+## Typography Scaling
+
+### Fluid Typography
+
+```css
+/* Clamps between min and max based on viewport */
+.heading {
+  font-size: clamp(1.5rem, 4vw, 3rem);
+}
+```
+
+### Responsive Type Scale
+
+| Size | Mobile | Desktop |
+| ---- | ------ | ------- |
+| h1 | 2rem | 3rem |
+| h2 | 1.5rem | 2.25rem |
+| h3 | 1.25rem | 1.5rem |
+| h4 | 1.125rem | 1.25rem |
+| body | 1rem | 1rem |
+| small | 0.875rem | 0.875rem |
+
+## Image Handling
+
+### Responsive Images
+
+```html
+<img
+  src="image.jpg"
+  srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
+  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+  alt="Description"
+/>
+```
+
+### Aspect Ratio
+
+```css
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+```
+
+## Touch Considerations
+
+### Touch Targets
+
+```css
+/* Minimum 44x44px for touch */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.75rem 1rem;
+}
+```
+
+### Touch vs Mouse Interactions
+
+| Touch | Mouse |
+| ----- | ----- |
+| Tap | Click |
+| Long press | Right click |
+| Swipe | Scroll |
+| Pinch | Scroll zoom |
+
+## Testing Checklist
+
+- [ ] Test at 320px, 375px, 768px, 1024px, 1440px
+- [ ] Touch targets at least 44x44px
+- [ ] Text readable without zoom on mobile
+- [ ] No horizontal scroll on mobile
+- [ ] Images scale appropriately
+- [ ] Forms usable on touch devices

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

@@ -0,0 +1,124 @@
+---
+name: ui-design
+description: |
+  UI design principles for creating professional, accessible interfaces.
+  Use when designing user interfaces, creating design systems, or reviewing UI.
+  Triggers: design, ui, interface, visual, user interface
+version: 1.0.0
+category: design
+tags:
+  - ui-design
+  - accessibility
+  - visual-design
+  - user-interface
+depends_on: []
+recommends: []
+used_by: [design-system]
+---
+
+# UI Design Principles
+
+Core principles for creating professional, accessible user interfaces.
+
+## Visual Hierarchy
+
+- **Size**: Larger elements draw more attention
+- **Color**: Bright/warm colors advance, cool/dark colors recede
+- **Contrast**: High contrast creates focal points
+- **Spacing**: White space guides the eye
+- **Typography**: Weight and size differentiate importance
+
+## Layout Principles
+
+### Grid Systems
+- Use consistent grid (12-column common)
+- Maintain alignment across elements
+- Create rhythm through repetition
+
+### Spacing Scale
+```
+xs: 4px
+sm: 8px
+md: 16px
+lg: 24px
+xl: 32px
+2xl: 48px
+```
+
+### Visual Balance
+- Distribute visual weight evenly
+- Use symmetry for stability, asymmetry for interest
+- Avoid orphan elements
+
+## Color Application
+
+### Primary Actions
+- One primary color for main CTAs
+- High contrast with background
+- Consistent across all screens
+
+### Semantic Colors
+- **Success**: Green (#10B981)
+- **Warning**: Yellow (#F59E0B)
+- **Error**: Red (#EF4444)
+- **Info**: Blue (#3B82F6)
+
+### Accessibility
+- Minimum 4.5:1 contrast ratio for text
+- 3:1 for large text (18px+ or 14px+ bold)
+- Never rely on color alone for meaning
+
+## Typography
+
+### Font Pairing
+- Maximum 2 font families
+- Pair contrasting styles (serif + sans-serif)
+- Ensure readability at all sizes
+
+### Type Scale
+```
+xs: 12px
+sm: 14px
+base: 16px
+lg: 18px
+xl: 20px
+2xl: 24px
+3xl: 30px
+4xl: 36px
+5xl: 48px
+```
+
+### Line Height
+- Body text: 1.5 - 1.75
+- Headings: 1.2 - 1.4
+- Captions: 1.4
+
+## Interactive Elements
+
+### Buttons
+- Minimum 44x44px touch target
+- Clear hover/focus states
+- Disabled state visually distinct
+- Loading state when async
+
+### Form Inputs
+- Visible labels (not placeholder-only)
+- Clear error states
+- Helper text for complex inputs
+- Consistent input heights
+
+### Links
+- Underline or clear visual distinction
+- Different visited state optional
+- Hover state feedback
+
+## Accessibility Checklist
+
+- [ ] Color contrast meets WCAG 2.1 AA
+- [ ] Focus states visible
+- [ ] Touch targets minimum 44x44px
+- [ ] Form inputs have labels
+- [ ] Error messages clear and specific
+- [ ] Interactive elements keyboard accessible
+- [ ] Images have alt text
+- [ ] Heading hierarchy logical

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

@@ -1,42 +1,45 @@
 ---
 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
+  Frontend testing from developer perspective: Unit Tests, Integration Tests,
+  Functional Tests, Component/UI Tests. Use when writing tests for your own
+  code. NOT for E2E/QA testing (that's QA domain). Test behavior, not implementation.
+version: 1.1.0
 category: frontend
 tags:
   - testing
+  - unit-test
+  - integration-test
+  - functional-test
+  - component-test
   - vitest
   - testing-library
-  - playwright
 depends_on:
   - code-review
 recommends: []
-used_by: []
+used_by:
+  - dev-fe
 ---
 
-# Skill: Testing FE
+# Skill: Testing FE (Developer Perspective)
 
 ## Core Principle
-**Test behavior, not implementation.** Users don't care about your code structure—they care if it works.
+**Test behavior, not implementation.** As a developer, you test YOUR code to ensure it works correctly. E2E testing is QA's responsibility.
 
-## Testing Trophy
+## Testing Pyramid (Developer Focus)
 
 ```
-         ▲
-        /E2E\         Few, slow, expensive
-       /─────\
-      /  API  \       Some, medium speed
-     /─────────\
-    / Integration \   Many, fast
-   /───────────────\
-  /    Unit Tests   \ Many, very fast
- /───────────────────\
+        ▲
+       /API\          Some, medium speed (Integration)
+      /─────\
+     /Component\      Many, fast (Component/UI)
+    /───────────\
+   /    Unit     \    Many, very fast
+  /───────────────\
 ```
 
+**Note:** E2E testing is NOT included - that's QA/Tester domain, not developer responsibility.
+
 ## Hard Rules
 
 1. **NEVER test implementation** - Test user behavior
@@ -44,8 +47,39 @@ used_by: []
 3. **ALWAYS use userEvent** - Not fireEvent
 4. **ALWAYS wait for async** - findBy*, waitFor
 5. **ALWAYS clean up** - No state leakage
+6. **NO E2E tests** - That's QA domain, not dev responsibility
+
+## Unit Testing
+
+Test individual functions, hooks, and utilities in isolation.
+
+```tsx
+// useCounter.test.ts
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useCounter } from './useCounter';
+
+describe('useCounter', () => {
+  it('initializes with default value', () => {
+    const { result } = renderHook(() => useCounter());
+    expect(result.current.count).toBe(0);
+  });
+
+  it('increments count', () => {
+    const { result } = renderHook(() => useCounter());
+
+    act(() => {
+      result.current.increment();
+    });
 
-## Component Testing (Vitest + Testing Library)
+    expect(result.current.count).toBe(1);
+  });
+});
+```
+
+## Component/UI Testing (Vitest + Testing Library)
+
+Test how components render and respond to user interaction.
 
 ```tsx
 // Button.test.tsx
@@ -80,6 +114,93 @@ describe('Button', () => {
 });
 ```
 
+## Integration Testing
+
+Test how multiple components work together.
+
+```tsx
+// LoginForm.test.tsx
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { LoginForm } from './LoginForm';
+
+describe('LoginForm Integration', () => {
+  it('submits form with valid credentials', async () => {
+    const onSubmit = vi.fn();
+    const user = userEvent.setup();
+
+    render(<LoginForm onSubmit={onSubmit} />);
+
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+    await user.type(screen.getByLabelText(/password/i), 'password123');
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('shows validation errors', async () => {
+    const user = userEvent.setup();
+
+    render(<LoginForm onSubmit={vi.fn()} />);
+
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+
+    expect(await screen.findByText(/email is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+  });
+});
+```
+
+## Functional Testing
+
+Test complete features from user perspective (without browser).
+
+```tsx
+// ShoppingCart.test.tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { ShoppingCart } from './ShoppingCart';
+
+describe('ShoppingCart Functional Tests', () => {
+  it('adds item and updates total', async () => {
+    const user = userEvent.setup();
+
+    render(<ShoppingCart />);
+
+    // Add first item
+    await user.click(screen.getByRole('button', { name: /add product a/i }));
+
+    expect(screen.getByText(/total: \$10.00/i)).toBeInTheDocument();
+    expect(screen.getByText(/1 item/i)).toBeInTheDocument();
+
+    // Add second item
+    await user.click(screen.getByRole('button', { name: /add product b/i }));
+
+    expect(screen.getByText(/total: \$25.00/i)).toBeInTheDocument();
+    expect(screen.getByText(/2 items/i)).toBeInTheDocument();
+  });
+
+  it('removes item and updates total', async () => {
+    const user = userEvent.setup();
+
+    render(<ShoppingCart />);
+
+    await user.click(screen.getByRole('button', { name: /add product a/i }));
+    await user.click(screen.getByRole('button', { name: /remove product a/i }));
+
+    expect(screen.getByText(/total: \$0.00/i)).toBeInTheDocument();
+    expect(screen.getByText(/0 items/i)).toBeInTheDocument();
+  });
+});
+```
+
 ## Async Testing
 
 ```tsx
@@ -127,6 +248,7 @@ const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 | Not waiting for async | findBy*, waitFor |
 | Testing implementation | Test user behavior |
 | Brittle selectors | Use accessible queries |
+| Writing E2E tests | That's QA domain |
 
 ## Query Priority
 
@@ -145,24 +267,6 @@ screen.getByTitle(/close/i);
 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
@@ -191,3 +295,4 @@ export default defineConfig({
 - [ ] Waits for async with findBy/waitFor
 - [ ] Mocks external dependencies
 - [ ] Coverage reports generated
+- [ ] NO E2E tests (that's QA domain)

package/.claude/skills/domain/frontend/ui-ux-pro-max/README.md

@@ -0,0 +1,45 @@
+# UI/UX Pro Max Skill
+
+Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+
+## Version Update
+
+To update this skill to the latest version:
+
+```bash
+cd /tmp
+git clone --depth 1 https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
+cd ui-ux-pro-max-skill
+
+# Update skill files
+cp .claude/skills/ui-ux-pro-max/SKILL.md /path/to/project/.claude/skills/domain/frontend/ui-ux-pro-max/
+cp src/ui-ux-pro-max/scripts/*.py /path/to/project/.claude/skills/domain/frontend/ui-ux-pro-max/scripts/
+cp src/ui-ux-pro-max/data/*.csv /path/to/project/.claude/skills/domain/frontend/ui-ux-pro-max/data/
+cp -r src/ui-ux-pro-max/data/stacks/* /path/to/project/.claude/skills/domain/frontend/ui-ux-pro-max/data/stacks/
+```
+
+## Requirements
+
+- Python 3.x (for search script)
+
+## Usage
+
+The skill activates automatically when working on UI/UX tasks. It provides:
+
+- 67 UI styles (Glassmorphism, Claymorphism, Minimalism, etc.)
+- 96 color palettes
+- 57 font pairings
+- 99 UX guidelines
+- 25 chart types
+- 100 industry-specific reasoning rules
+- 13 tech stack guidelines (React, Next.js, Vue, Svelte, SwiftUI, etc.)
+
+## Search Script
+
+```bash
+# Generate design system
+python3 .claude/skills/domain/frontend/ui-ux-pro-max/scripts/search.py "fintech" --design-system
+
+# Search by domain
+python3 .claude/skills/domain/frontend/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
+```