@mandujs/mcp 0.38.12 → 0.39.0-beta.1

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

@@ -1,192 +0,0 @@
----
-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

@@ -1,159 +0,0 @@
----
-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 컴포넌트 라이브러리를 통합하는 가이드입니다.
-
-## Agent Workflow Contract
-
-This skill is a Domain addendum. It must not replace `mandu-agent-workflow`.
-Use it only after `mandu.agent.plan` selects UI, design, styling, component, or hydration domains.
-
-Canonical workflow step: `plan -> apply -> verify`.
-
-Preferred MCP tools:
-
-| Step | Tools |
-|------|-------|
-| plan | `mandu.agent.plan`, `mandu.design.get`, `mandu.component.list` |
-| apply | `mandu.agent.apply`, `mandu.component.add` |
-| verify | `mandu.agent.verify`, `mandu.design.check`, `mandu.lint` |
-| repair | `mandu.agent.repair` |
-
-Allowed file edits:
-
-- `components/ui/**/*.tsx`
-- Route-local island/client components named in the plan
-- Styling utilities only when they are required by the selected component
-
-Verification command:
-
-```bash
-mandu agent verify --changed --json --write
-```
-
-Common failures:
-
-- Adding UI libraries before reading the existing design/component inventory
-- Mixing server components and island-only UI imports
-- Skipping accessibility or design checks for interactive components
-
-Repair path:
-
-```bash
-mandu agent repair --from .mandu/agent-verify.json --json
-```
-
-## 핵심 원칙
-
-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
-```
-
-## Setup Examples
-
-Use these examples only after `mandu.agent.plan` selects UI library setup.
-
-### 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

@@ -1,23 +0,0 @@
-# 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

@@ -1,32 +0,0 @@
----
-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

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,232 +0,0 @@
----
-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/)