@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-testing/rules/test-slot-unit.md

@@ -0,0 +1,192 @@
+---
+title: Unit Test Slot Handlers
+impact: HIGH
+impactDescription: Ensures API correctness
+tags: testing, slot, unit, bun-test
+---
+
+## Unit Test Slot Handlers
+
+**Impact: HIGH (Ensures API correctness)**
+
+slot 핸들러를 단위 테스트하여 API 로직의 정확성을 검증하세요.
+
+**기본 테스트 구조:**
+
+```typescript
+// spec/slots/users.slot.test.ts
+import { describe, it, expect, beforeEach, mock } from "bun:test";
+import usersSlot from "./users.slot";
+import { createMockContext } from "@/test/helpers";
+
+describe("Users Slot", () => {
+  describe("GET /users", () => {
+    it("should return list of users", async () => {
+      // Arrange
+      const ctx = createMockContext({
+        method: "GET",
+        query: { page: "1", limit: "10" },
+      });
+
+      // Act
+      const response = await usersSlot.handlers.get(ctx);
+
+      // Assert
+      expect(response.status).toBe(200);
+      expect(response.body.users).toBeArray();
+      expect(response.body.total).toBeNumber();
+    });
+
+    it("should filter by role", async () => {
+      const ctx = createMockContext({
+        method: "GET",
+        query: { role: "admin" },
+      });
+
+      const response = await usersSlot.handlers.get(ctx);
+
+      expect(response.status).toBe(200);
+      expect(response.body.users.every(u => u.role === "admin")).toBe(true);
+    });
+  });
+
+  describe("POST /users", () => {
+    it("should create a new user", async () => {
+      const ctx = createMockContext({
+        method: "POST",
+        body: { email: "test@example.com", name: "Test User" },
+      });
+
+      const response = await usersSlot.handlers.post(ctx);
+
+      expect(response.status).toBe(201);
+      expect(response.body.user.email).toBe("test@example.com");
+    });
+
+    it("should return 400 for invalid email", async () => {
+      const ctx = createMockContext({
+        method: "POST",
+        body: { email: "invalid-email", name: "Test" },
+      });
+
+      const response = await usersSlot.handlers.post(ctx);
+
+      expect(response.status).toBe(400);
+      expect(response.body.errors).toBeDefined();
+    });
+  });
+});
+```
+
+## Mock Context 헬퍼
+
+```typescript
+// test/helpers.ts
+interface MockContextOptions {
+  method?: string;
+  params?: Record<string, string>;
+  query?: Record<string, string>;
+  body?: unknown;
+  headers?: Record<string, string>;
+  user?: { id: string; role: string } | null;
+}
+
+export function createMockContext(options: MockContextOptions = {}) {
+  const store = new Map<string, unknown>();
+
+  // 사용자 설정
+  if (options.user) {
+    store.set("user", options.user);
+  }
+
+  return {
+    req: {
+      method: options.method || "GET",
+    },
+    params: options.params || {},
+    query: options.query || {},
+    headers: {
+      get: (key: string) => options.headers?.[key.toLowerCase()] || null,
+    },
+
+    body: async <T>() => options.body as T,
+
+    get: <T>(key: string) => store.get(key) as T,
+    set: (key: string, value: unknown) => store.set(key, value),
+
+    // 응답 메서드
+    ok: (data: unknown) => ({ status: 200, body: data }),
+    created: (data: unknown) => ({ status: 201, body: data }),
+    noContent: () => ({ status: 204, body: null }),
+    error: (data: unknown) => ({ status: 400, body: data }),
+    unauthorized: (msg?: string) => ({ status: 401, body: { message: msg } }),
+    forbidden: (msg?: string) => ({ status: 403, body: { message: msg } }),
+    notFound: (msg?: string) => ({ status: 404, body: { message: msg } }),
+    fail: (msg?: string) => ({ status: 500, body: { message: msg } }),
+  };
+}
+```
+
+## Guard 테스트
+
+```typescript
+describe("Guard", () => {
+  it("should reject unauthenticated requests", async () => {
+    const ctx = createMockContext({
+      user: null,  // 인증 안 됨
+    });
+
+    const response = await usersSlot.guard(ctx);
+
+    expect(response.status).toBe(401);
+  });
+
+  it("should allow authenticated requests", async () => {
+    const ctx = createMockContext({
+      user: { id: "1", role: "user" },
+    });
+
+    const response = await usersSlot.guard(ctx);
+
+    expect(response).toBeUndefined();  // void = 통과
+  });
+});
+```
+
+## 데이터베이스 모킹
+
+```typescript
+import { mock } from "bun:test";
+import * as db from "@/lib/db";
+
+// 모듈 모킹
+mock.module("@/lib/db", () => ({
+  user: {
+    findMany: mock(() => [
+      { id: "1", email: "test@example.com" },
+    ]),
+    create: mock((data) => ({ id: "2", ...data.data })),
+  },
+}));
+```
+
+## 테스트 실행
+
+```bash
+# 모든 테스트
+bun test
+
+# 특정 파일
+bun test spec/slots/users.slot.test.ts
+
+# 패턴 매칭
+bun test --filter "Users"
+
+# Watch 모드
+bun test --watch
+
+# 커버리지
+bun test --coverage
+```
+
+Reference: [Bun Test Runner](https://bun.sh/docs/cli/test)

package/src/resources/skills/mandu-ui/SKILL.md

@@ -0,0 +1,117 @@
+---
+name: Mandu UI
+description: UI component library integration and accessibility patterns
+metadata:
+  version: "1.0.0"
+  author: mandu
+globs:
+  - "components/ui/**/*.tsx"
+  - "app/**/client.tsx"
+---
+
+# Mandu UI Skill
+
+Mandu Island 아키텍처에 UI 컴포넌트 라이브러리를 통합하는 가이드입니다.
+
+## 핵심 원칙
+
+1. **Headless First**: Radix UI 기반으로 동작과 스타일 분리
+2. **Copy-Paste**: shadcn/ui 방식으로 소유권 유지
+3. **Accessibility**: WCAG 2.1 AA 수준 준수
+4. **Island 호환**: 클라이언트 컴포넌트로 올바르게 분리
+
+## 권장 스택
+
+```
+Primitives:  Radix UI (headless, accessible)
+Components:  shadcn/ui (copy-paste, customizable)
+Icons:       Lucide React
+Utilities:   clsx, tailwind-merge, cva
+```
+
+## 빠른 시작
+
+### shadcn/ui 초기화
+
+```bash
+bunx shadcn-ui@latest init
+```
+
+```
+✔ Would you like to use TypeScript? yes
+✔ Which style would you like to use? Default
+✔ Which color would you like to use as base? Slate
+✔ Where is your global CSS file? app/globals.css
+✔ Do you want to use CSS variables? yes
+✔ Where is your tailwind.config located? tailwind.config.ts
+✔ Configure import alias for components? @/components
+✔ Configure import alias for utils? @/lib/utils
+```
+
+### 컴포넌트 추가
+
+```bash
+# 개별 컴포넌트
+bunx shadcn-ui@latest add button
+bunx shadcn-ui@latest add card
+bunx shadcn-ui@latest add dialog
+
+# 여러 컴포넌트
+bunx shadcn-ui@latest add button card dialog input
+```
+
+## Island에서 사용
+
+```tsx
+// app/user-settings/client.tsx
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export function UserSettingsIsland() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Settings</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>User Settings</DialogTitle>
+        </DialogHeader>
+        {/* Settings form */}
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+## 폴더 구조
+
+```
+components/
+├── ui/                    # shadcn/ui 컴포넌트
+│   ├── button.tsx
+│   ├── card.tsx
+│   ├── dialog.tsx
+│   └── ...
+└── islands/               # 커스텀 Island 컴포넌트
+    ├── user-menu.tsx
+    └── ...
+```
+
+## 규칙 카테고리
+
+| Category | Description | Rules |
+|----------|-------------|-------|
+| Library | 라이브러리 설정 | 2 |
+| Accessibility | 접근성 패턴 | 2 |
+| Integration | Island 통합 | 2 |
+
+→ 세부 규칙은 `rules/` 폴더 참조

package/src/resources/skills/mandu-ui/_sections.md

@@ -0,0 +1,23 @@
+# Mandu UI - Rule Categories
+
+## Library
+UI 라이브러리 설정 및 통합
+
+| Impact | Description |
+|--------|-------------|
+| HIGH | 컴포넌트 일관성, 개발 생산성 |
+
+## Accessibility
+웹 접근성 표준 준수
+
+| Impact | Description |
+|--------|-------------|
+| HIGH | 법적 요구사항, 사용자 경험 |
+| CRITICAL | 키보드 네비게이션, 스크린 리더 지원 |
+
+## Integration
+Mandu Island과의 통합 패턴
+
+| Impact | Description |
+|--------|-------------|
+| MEDIUM | Island 아키텍처에 맞는 컴포넌트 사용 |

package/src/resources/skills/mandu-ui/_template.md

@@ -0,0 +1,32 @@
+---
+title: Rule Title Here
+impact: CRITICAL | HIGH | MEDIUM | LOW
+impactDescription: One-line description of why this matters
+tags: ui, tag2, tag3
+---
+
+## Rule Title Here
+
+**Impact: LEVEL (Impact description)**
+
+규칙에 대한 간단한 설명.
+
+**설치:**
+
+```bash
+# 설치 명령어
+```
+
+**사용 예시:**
+
+```tsx
+// 컴포넌트 예시
+```
+
+## 추가 패턴
+
+```tsx
+// 추가 패턴
+```
+
+Reference: [문서 링크](https://example.com)

package/src/resources/skills/mandu-ui/metadata.json

@@ -0,0 +1,13 @@
+{
+  "id": "mandu-ui",
+  "name": "Mandu UI",
+  "version": "1.0.0",
+  "description": "UI component library integration and accessibility patterns",
+  "author": "mandu",
+  "references": [
+    "https://ui.shadcn.com/docs",
+    "https://www.radix-ui.com/primitives",
+    "https://www.w3.org/WAI/ARIA/apg/"
+  ],
+  "abstract": "shadcn/ui, Radix UI 등 UI 라이브러리를 Mandu Island 아키텍처에 통합하고 접근성을 보장하는 패턴을 제공합니다."
+}

package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md

@@ -0,0 +1,232 @@
+---
+title: ARIA Patterns
+impact: HIGH
+impactDescription: Screen reader support and semantic markup
+tags: ui, accessibility, aria, screen-reader
+---
+
+## ARIA Patterns
+
+**Impact: HIGH (Screen reader support and semantic markup)**
+
+스크린 리더 사용자를 위한 ARIA 속성과 시맨틱 마크업을 구현하세요.
+
+## ARIA 기본 원칙
+
+```tsx
+// 1. 네이티브 HTML 우선 (No ARIA > ARIA)
+// ❌
+<div role="button" tabIndex={0} onClick={handleClick}>Click</div>
+
+// ✅
+<button onClick={handleClick}>Click</button>
+
+// 2. 네이티브가 부족할 때만 ARIA 사용
+<div
+  role="tablist"
+  aria-label="Settings tabs"
+>
+  <button role="tab" aria-selected="true">General</button>
+  <button role="tab" aria-selected="false">Security</button>
+</div>
+```
+
+## 일반적인 ARIA 패턴
+
+### 버튼
+
+```tsx
+// 아이콘 버튼
+<button aria-label="Close dialog">
+  <XIcon aria-hidden="true" />
+</button>
+
+// 토글 버튼
+<button
+  aria-pressed={isActive}
+  onClick={() => setIsActive(!isActive)}
+>
+  {isActive ? "Active" : "Inactive"}
+</button>
+
+// 로딩 버튼
+<button disabled={isLoading} aria-busy={isLoading}>
+  {isLoading ? "Submitting..." : "Submit"}
+</button>
+```
+
+### 폼
+
+```tsx
+// 라벨 연결
+<label htmlFor="email">Email</label>
+<input
+  id="email"
+  type="email"
+  aria-describedby="email-hint email-error"
+  aria-invalid={!!error}
+/>
+<p id="email-hint">We'll never share your email</p>
+{error && <p id="email-error" role="alert">{error}</p>}
+
+// 필수 필드
+<label htmlFor="name">
+  Name <span aria-hidden="true">*</span>
+</label>
+<input id="name" required aria-required="true" />
+```
+
+### 알림
+
+```tsx
+// 중요 알림 (스크린 리더가 즉시 읽음)
+<div role="alert" aria-live="assertive">
+  Error: Invalid credentials
+</div>
+
+// 부드러운 알림 (현재 읽기 완료 후)
+<div role="status" aria-live="polite">
+  3 items added to cart
+</div>
+
+// 라이브 영역
+<div aria-live="polite" aria-atomic="true">
+  Search results: {count} items found
+</div>
+```
+
+### 모달 다이얼로그
+
+```tsx
+// app/dialog/client.tsx
+export function DialogIsland({ open, title, children, onClose }) {
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="dialog-title"
+      aria-describedby="dialog-description"
+    >
+      <h2 id="dialog-title">{title}</h2>
+      <div id="dialog-description">
+        {children}
+      </div>
+      <button onClick={onClose}>Close</button>
+    </div>
+  );
+}
+```
+
+### 탭
+
+```tsx
+export function TabsIsland() {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div>
+      <div role="tablist" aria-label="Settings">
+        {tabs.map((tab, index) => (
+          <button
+            key={tab.id}
+            role="tab"
+            id={`tab-${tab.id}`}
+            aria-selected={activeTab === index}
+            aria-controls={`panel-${tab.id}`}
+            tabIndex={activeTab === index ? 0 : -1}
+            onClick={() => setActiveTab(index)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {tabs.map((tab, index) => (
+        <div
+          key={tab.id}
+          role="tabpanel"
+          id={`panel-${tab.id}`}
+          aria-labelledby={`tab-${tab.id}`}
+          hidden={activeTab !== index}
+          tabIndex={0}
+        >
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### 메뉴
+
+```tsx
+<nav aria-label="Main navigation">
+  <ul role="menubar">
+    <li role="none">
+      <a role="menuitem" href="/">Home</a>
+    </li>
+    <li role="none">
+      <button
+        role="menuitem"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+      >
+        Products
+      </button>
+      {isOpen && (
+        <ul role="menu" aria-label="Products submenu">
+          <li role="none">
+            <a role="menuitem" href="/products/new">New</a>
+          </li>
+        </ul>
+      )}
+    </li>
+  </ul>
+</nav>
+```
+
+## 숨김 처리
+
+```tsx
+// 스크린 리더에서만 표시
+<span className="sr-only">Currently on page 3 of 10</span>
+
+// 스크린 리더에서 숨김 (장식용)
+<span aria-hidden="true">🎉</span>
+
+// Tailwind sr-only 클래스
+// .sr-only {
+//   position: absolute;
+//   width: 1px;
+//   height: 1px;
+//   padding: 0;
+//   margin: -1px;
+//   overflow: hidden;
+//   clip: rect(0, 0, 0, 0);
+//   border: 0;
+// }
+```
+
+## 테스트
+
+```bash
+# axe-core로 접근성 검사
+bun add -d @axe-core/playwright
+```
+
+```typescript
+// tests/e2e/accessibility.spec.ts
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test("should have no accessibility violations", async ({ page }) => {
+  await page.goto("/");
+
+  const results = await new AxeBuilder({ page }).analyze();
+
+  expect(results.violations).toEqual([]);
+});
+```
+
+Reference: [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)