@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md

@@ -0,0 +1,161 @@
+---
+title: Tailwind CSS Setup
+impact: CRITICAL
+impactDescription: Primary CSS framework for Mandu applications
+tags: styling, tailwind, setup, postcss
+---
+
+## Tailwind CSS Setup
+
+**Impact: CRITICAL (Primary CSS framework for Mandu applications)**
+
+Tailwind CSS를 Mandu 프로젝트에 설정하세요. Bun과 PostCSS 통합을 포함합니다.
+
+**설치:**
+
+```bash
+bun add -d tailwindcss postcss autoprefixer
+bun add clsx tailwind-merge
+bunx tailwindcss init -p
+```
+
+**tailwind.config.ts:**
+
+```typescript
+import type { Config } from "tailwindcss";
+
+export default {
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./lib/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mandu: {
+          primary: "hsl(var(--mandu-primary))",
+          secondary: "hsl(var(--mandu-secondary))",
+          accent: "hsl(var(--mandu-accent))",
+          background: "hsl(var(--mandu-background))",
+          foreground: "hsl(var(--mandu-foreground))",
+        },
+      },
+      borderRadius: {
+        mandu: "var(--mandu-radius)",
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
+```
+
+**postcss.config.js:**
+
+```javascript
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+**app/globals.css:**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --mandu-primary: 221.2 83.2% 53.3%;
+    --mandu-secondary: 210 40% 96.1%;
+    --mandu-accent: 210 40% 96.1%;
+    --mandu-background: 0 0% 100%;
+    --mandu-foreground: 222.2 84% 4.9%;
+    --mandu-radius: 0.5rem;
+  }
+
+  .dark {
+    --mandu-primary: 217.2 91.2% 59.8%;
+    --mandu-secondary: 217.2 32.6% 17.5%;
+    --mandu-accent: 217.2 32.6% 17.5%;
+    --mandu-background: 222.2 84% 4.9%;
+    --mandu-foreground: 210 40% 98%;
+  }
+}
+```
+
+## cn 유틸리티 함수
+
+```typescript
+// lib/utils.ts
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
+## 사용 예시
+
+```tsx
+// app/button/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg";
+}
+
+export function ButtonIsland({
+  variant = "default",
+  size = "md",
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        // Base
+        "inline-flex items-center justify-center rounded-mandu font-medium transition-colors",
+        // Variants
+        {
+          default: "bg-mandu-primary text-white hover:bg-mandu-primary/90",
+          outline: "border border-mandu-primary text-mandu-primary hover:bg-mandu-primary/10",
+          ghost: "hover:bg-mandu-secondary",
+        }[variant],
+        // Sizes
+        {
+          sm: "h-8 px-3 text-sm",
+          md: "h-10 px-4",
+          lg: "h-12 px-6 text-lg",
+        }[size],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## VSCode 설정
+
+```json
+// .vscode/settings.json
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "'([^']*)'"]
+  ],
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}
+```
+
+Reference: [Tailwind CSS Documentation](https://tailwindcss.com/docs)

package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md

@@ -0,0 +1,229 @@
+---
+title: Dark Mode Implementation
+impact: MEDIUM
+impactDescription: User preference and accessibility support
+tags: styling, theme, darkmode, accessibility
+---
+
+## Dark Mode Implementation
+
+**Impact: MEDIUM (User preference and accessibility support)**
+
+다크모드를 구현하여 사용자 선호도와 접근성을 지원하세요.
+
+## CSS Variables 기반 테마
+
+```css
+/* app/globals.css */
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --border: 214.3 31.8% 91.4%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}
+```
+
+## Tailwind dark: 활성화
+
+```typescript
+// tailwind.config.ts
+export default {
+  darkMode: "class",  // 또는 "media"
+  // ...
+};
+```
+
+## 테마 Provider Island
+
+```tsx
+// app/theme/client.tsx
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  resolvedTheme: "light" | "dark";
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProviderIsland({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("system");
+  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    // 저장된 테마 복원
+    const stored = localStorage.getItem("theme") as Theme | null;
+    if (stored) {
+      setTheme(stored);
+    }
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    if (theme === "system") {
+      const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolvedTheme(systemDark ? "dark" : "light");
+      root.classList.toggle("dark", systemDark);
+    } else {
+      setResolvedTheme(theme);
+      root.classList.toggle("dark", theme === "dark");
+    }
+
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  // System 변경 감지
+  useEffect(() => {
+    if (theme !== "system") return;
+
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      setResolvedTheme(e.matches ? "dark" : "light");
+      document.documentElement.classList.toggle("dark", e.matches);
+    };
+
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProviderIsland");
+  }
+  return context;
+}
+```
+
+## 테마 토글 컴포넌트
+
+```tsx
+// app/theme/toggle.tsx
+"use client";
+
+import { useTheme } from "./client";
+
+export function ThemeToggleIsland() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="p-2 rounded-md hover:bg-muted"
+      aria-label={`Switch to ${resolvedTheme === "dark" ? "light" : "dark"} mode`}
+    >
+      {resolvedTheme === "dark" ? "🌙" : "☀️"}
+    </button>
+  );
+}
+```
+
+## 플래시 방지 스크립트
+
+```tsx
+// app/layout.tsx
+export default function RootLayout({ children }) {
+  return (
+    <html lang="ko" suppressHydrationWarning>
+      <head>
+        {/* 다크모드 플래시 방지 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                const theme = localStorage.getItem('theme');
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                if (theme === 'dark' || (!theme && prefersDark)) {
+                  document.documentElement.classList.add('dark');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
+      <body>
+        <ThemeProviderIsland>
+          {children}
+        </ThemeProviderIsland>
+      </body>
+    </html>
+  );
+}
+```
+
+## Island 간 테마 동기화
+
+```tsx
+// useIslandEvent로 테마 변경 전파
+import { useIslandEvent } from "@mandujs/core/client";
+
+export function ThemeProviderIsland({ children }) {
+  const { emit } = useIslandEvent<{ theme: string }>("theme-change");
+  const [theme, setTheme] = useState("system");
+
+  const handleSetTheme = (newTheme: Theme) => {
+    setTheme(newTheme);
+    emit({ theme: newTheme });  // 다른 Island에 전파
+  };
+
+  // ...
+}
+
+// 다른 Island에서 수신
+export function AnotherIsland() {
+  useIslandEvent<{ theme: string }>("theme-change", (data) => {
+    console.log("Theme changed to:", data.theme);
+  });
+}
+```
+
+## 다크모드 특화 스타일
+
+```tsx
+// Tailwind dark: 접두사 사용
+<div className="bg-white dark:bg-gray-900">
+  <p className="text-gray-900 dark:text-gray-100">
+    Content
+  </p>
+</div>
+
+// 복잡한 경우 CSS Variables 활용
+<div className="bg-[hsl(var(--background))]">
+  {/* 자동으로 테마 반영 */}
+</div>
+```
+
+Reference: [Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode)

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

@@ -0,0 +1,99 @@
+---
+name: mandu-testing
+description: |
+  Testing patterns for Mandu applications. Use when writing unit tests,
+  integration tests, or E2E tests. Triggers on test, spec, Bun test,
+  Playwright, or testing tasks.
+license: MIT
+metadata:
+  author: mandu
+  version: "1.0.0"
+---
+
+# Mandu Testing
+
+Mandu 애플리케이션의 테스트 패턴 가이드. Bun test를 활용한 단위 테스트, slot 테스트, Island 컴포넌트 테스트, Playwright E2E 테스트를 다룹니다.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing unit tests for slots
+- Testing Island components
+- Setting up E2E tests with Playwright
+- Mocking external dependencies
+- Testing authentication flows
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Slot Testing | HIGH | `test-slot-` |
+| 2 | Component Testing | HIGH | `test-component-` |
+| 3 | E2E Testing | MEDIUM | `test-e2e-` |
+| 4 | Mocking | MEDIUM | `test-mock-` |
+
+## Quick Reference
+
+### 1. Slot Testing (HIGH)
+
+- `test-slot-unit` - Unit test slot handlers
+- `test-slot-guard` - Test guard authentication
+- `test-slot-integration` - Integration test with database
+
+### 2. Component Testing (HIGH)
+
+- `test-component-island` - Test Island components
+- `test-component-render` - Test rendering output
+- `test-component-interaction` - Test user interactions
+
+### 3. E2E Testing (MEDIUM)
+
+- `test-e2e-playwright` - Playwright setup and patterns
+- `test-e2e-auth` - Test authentication flows
+- `test-e2e-navigation` - Test page navigation
+
+### 4. Mocking (MEDIUM)
+
+- `test-mock-fetch` - Mock fetch requests
+- `test-mock-database` - Mock database operations
+
+## Bun Test Quick Start
+
+```bash
+# Run all tests
+bun test
+
+# Run specific test file
+bun test src/slots/user.test.ts
+
+# Watch mode
+bun test --watch
+
+# Coverage
+bun test --coverage
+```
+
+## Test File Convention
+
+```
+spec/slots/
+├── users.slot.ts
+├── users.slot.test.ts    # Slot tests
+app/
+├── dashboard/
+│   ├── client.tsx
+│   └── client.test.tsx   # Component tests
+tests/
+└── e2e/
+    └── auth.spec.ts      # E2E tests
+```
+
+## How to Use
+
+Read individual rule files for detailed explanations:
+
+```
+rules/test-slot-unit.md
+rules/test-component-island.md
+rules/test-e2e-playwright.md
+```

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

@@ -0,0 +1,13 @@
+{
+  "version": "1.0.0",
+  "organization": "Mandu Framework",
+  "date": "February 2026",
+  "abstract": "Mandu 애플리케이션 테스트 패턴 가이드. Bun test를 활용한 slot 단위/통합 테스트, Island 컴포넌트 테스트, Playwright E2E 테스트, 모킹 패턴을 다룹니다.",
+  "references": [
+    "https://bun.sh/docs/cli/test",
+    "https://playwright.dev/docs/intro",
+    "https://testing-library.com/docs/react-testing-library/intro",
+    "https://kentcdodds.com/blog/write-tests"
+  ],
+  "tags": ["testing", "bun-test", "playwright", "e2e", "unit", "mandu"]
+}

package/src/resources/skills/mandu-testing/rules/_sections.md

@@ -0,0 +1,26 @@
+# Sections
+
+This file defines all sections, their ordering, impact levels, and descriptions.
+The section ID (in parentheses) is the filename prefix used to group rules.
+
+---
+
+## 1. Slot Testing (test-slot)
+
+**Impact:** HIGH
+**Description:** slot 핸들러의 단위 테스트와 통합 테스트. API 로직의 정확성 검증에 필수입니다.
+
+## 2. Component Testing (test-component)
+
+**Impact:** HIGH
+**Description:** Island 컴포넌트의 렌더링과 인터랙션 테스트. UI 로직의 정확성 검증입니다.
+
+## 3. E2E Testing (test-e2e)
+
+**Impact:** MEDIUM
+**Description:** Playwright를 사용한 End-to-End 테스트. 전체 사용자 플로우 검증입니다.
+
+## 4. Mocking (test-mock)
+
+**Impact:** MEDIUM
+**Description:** 외부 의존성 모킹. 테스트 격리와 속도 향상을 위한 기법입니다.

package/src/resources/skills/mandu-testing/rules/_template.md

@@ -0,0 +1,65 @@
+# Rule Template
+
+Use this template when creating new rules for mandu-testing.
+
+---
+
+```markdown
+---
+title: Rule Title Here
+impact: HIGH | MEDIUM | LOW
+impactDescription: 영향 설명 (예: "Ensures API correctness")
+tags: testing, tag1, tag2
+---
+
+## Rule Title Here
+
+**Impact: {LEVEL} ({impactDescription})**
+
+테스트 규칙의 목적과 중요성을 설명합니다.
+
+**Test Example:**
+
+\`\`\`typescript
+import { describe, it, expect } from "bun:test";
+import userSlot from "./user.slot";
+
+describe("User Slot", () => {
+  it("should return user by id", async () => {
+    const ctx = createMockContext({
+      params: { id: "1" },
+    });
+
+    const response = await userSlot.handlers.get(ctx);
+
+    expect(response.status).toBe(200);
+    expect(response.body.user.id).toBe("1");
+  });
+});
+\`\`\`
+
+## Test Structure
+
+테스트 구조와 네이밍 컨벤션을 설명합니다.
+
+## Common Patterns
+
+자주 사용되는 테스트 패턴을 설명합니다.
+
+Reference: [Bun Test Docs](https://bun.sh/docs/cli/test)
+```
+
+---
+
+## Naming Convention
+
+- 파일명: `test-{category}-{rule-name}.md`
+- 예시: `test-slot-unit.md`, `test-e2e-playwright.md`
+
+## Test File Location
+
+| Type | Location | Pattern |
+|------|----------|---------|
+| Slot Unit | `spec/slots/*.test.ts` | Co-located |
+| Component | `app/**/*.test.tsx` | Co-located |
+| E2E | `tests/e2e/*.spec.ts` | Centralized |