@mandujs/mcp 0.38.12 → 0.39.0-beta.1

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

@@ -1,170 +0,0 @@
----
-title: Tailwind CSS v4 Setup
-impact: CRITICAL
-impactDescription: Primary CSS framework for Mandu applications (v4 required)
-tags: styling, tailwind, setup, v4, css-first
----
-
-## Tailwind CSS v4 Setup
-
-**Impact: CRITICAL (Primary CSS framework for Mandu applications)**
-
-Tailwind CSS v4를 Mandu 프로젝트에 설정합니다. v4는 Oxide Engine(Rust)으로 재작성되어 빌드 속도가 3.5~5배 향상되었습니다.
-
-## 설치
-
-```bash
-bun add -d tailwindcss@^4.1 @tailwindcss/cli@^4.1
-bun add clsx tailwind-merge
-```
-
-> **Note:** PostCSS, autoprefixer는 불필요합니다. Tailwind v4가 내장 처리합니다.
-
-## app/globals.css (CSS-first Configuration)
-
-```css
-@import "tailwindcss";
-
-/*
- * Tailwind CSS v4 - CSS-first Configuration
- * JavaScript 설정 파일 대신 CSS에서 직접 테마 정의
- */
-
-@theme {
-  /* Colors - shadcn/ui compatible */
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-secondary: hsl(210 40% 96.1%);
-  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --color-muted: hsl(210 40% 96.1%);
-  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --color-accent: hsl(210 40% 96.1%);
-  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --color-destructive: hsl(0 84.2% 60.2%);
-  --color-destructive-foreground: hsl(210 40% 98%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
-  --color-ring: hsl(222.2 84% 4.9%);
-
-  /* Radius */
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-
-  /* Fonts */
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-}
-
-/* Base styles */
-* {
-  border-color: var(--color-border);
-}
-
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-family: var(--font-sans);
-}
-```
-
-## Mandu 자동 통합
-
-Mandu는 Tailwind v4를 자동으로 감지하고 처리합니다:
-
-```
-mandu dev 실행 시:
-1. app/globals.css에서 @import "tailwindcss" 감지
-2. bunx @tailwindcss/cli --watch 자동 시작
-3. 출력: .mandu/client/globals.css
-4. SSR에서 <link> 태그 자동 주입
-5. CSS 변경 시 HMR 핫 리로드
-```
-
-## cn 유틸리티 함수
-
-```typescript
-// src/client/shared/lib/utils.ts
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-```
-
-## Island 컴포넌트 스타일링
-
-```tsx
-// src/client/features/counter/CounterIsland.tsx
-"use client";
-
-import { cn } from "@/shared/lib/utils";
-
-interface CounterProps {
-  variant?: "default" | "outline";
-}
-
-export function CounterIsland({ variant = "default" }: CounterProps) {
-  const variants = {
-    default: "bg-primary text-primary-foreground",
-    outline: "border-2 border-primary text-primary",
-  };
-
-  return (
-    <button className={cn(
-      "px-4 py-2 rounded-md transition-colors",
-      variants[variant]
-    )}>
-      Count: 0
-    </button>
-  );
-}
-```
-
-## Custom Utilities (v4 방식)
-
-```css
-/* @layer utilities 대신 @utility 사용 */
-@utility text-balance {
-  text-wrap: balance;
-}
-
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-```
-
-## VSCode 설정
-
-```json
-// .vscode/settings.json
-{
-  "tailwindCSS.experimental.classRegex": [
-    ["cn\\(([^)]*)\\)", "'([^']*)'"],
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ],
-  "editor.quickSuggestions": {
-    "strings": true
-  },
-  "files.associations": {
-    "*.css": "tailwindcss"
-  }
-}
-```
-
-## 삭제할 파일 (v3에서 마이그레이션 시)
-
-```bash
-rm -f tailwind.config.ts tailwind.config.js
-rm -f postcss.config.js postcss.config.ts
-```
-
-Reference: [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)

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

@@ -1,179 +0,0 @@
----
-title: Tailwind CSS v4 Gotchas
-impact: HIGH
-impactDescription: Critical breaking changes when using or migrating to Tailwind v4
-tags: styling, tailwind, v4, gotchas, migration, breaking-changes
----
-
-## Tailwind CSS v4 Gotchas
-
-**Impact: HIGH (Critical breaking changes when using or migrating to Tailwind v4)**
-
-Tailwind v4는 완전히 재작성된 프레임워크입니다. v3에서 마이그레이션 시 반드시 확인해야 할 주의사항입니다.
-
-## Browser Support
-
-```
-Safari 16.4+ | Chrome 111+ | Firefox 128+
-```
-
-> **Warning:** IE 및 구형 브라우저 지원 불가. 레거시 프로젝트는 v3 유지 권장.
-
-## Import Syntax 변경
-
-```css
-/* v3 (deprecated) */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* v4 (required) */
-@import "tailwindcss";
-```
-
-## Important Modifier 위치 변경
-
-```css
-/* v3 */
-!bg-red-500
-
-/* v4 - 끝에 위치 */
-bg-red-500!
-```
-
-## Custom Utilities 문법 변경
-
-```css
-/* v3 */
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}
-
-/* v4 - @utility 사용 */
-@utility text-balance {
-  text-wrap: balance;
-}
-```
-
-## Stacked Variants 순서 변경
-
-```html
-<!-- v3: right-to-left (hover가 dark보다 우선) -->
-<div class="dark:hover:bg-blue-500">
-
-<!-- v4: left-to-right (dark가 hover보다 우선) -->
-<div class="dark:hover:bg-blue-500">
-```
-
-> v4에서는 왼쪽부터 적용되므로 variant 순서에 주의하세요.
-
-## CSS Variable Syntax 변경
-
-```html
-<!-- v3 -->
-<div class="bg-[var(--brand-color)]">
-<div class="bg-[--brand-color]">
-
-<!-- v4 - 괄호 문법 사용 -->
-<div class="bg-(--brand-color)">
-```
-
-## hover: 동작 변경
-
-```html
-<!-- v4에서 hover:는 hover 지원 기기에서만 적용 -->
-<!-- 터치 기기에서는 적용되지 않음 -->
-<button class="hover:bg-blue-500">
-
-<!-- 모든 기기에서 적용하려면 -->
-<button class="hover:bg-blue-500 active:bg-blue-500">
-```
-
-## Default Color 변경
-
-```css
-/* v4 기본값 변경 */
-border-color: currentColor; /* v3: gray-200 */
-ring-width: 1px;           /* v3: 3px */
-ring-color: currentColor;   /* v3: blue-500/50 */
-```
-
-> 기존 디자인이 깨질 수 있으니 명시적 색상 지정 권장.
-
-## Transform 초기화 변경
-
-```html
-<!-- v3 -->
-<div class="transform-none">
-
-<!-- v4 - 개별 속성 사용 -->
-<div class="scale-none rotate-none translate-none">
-```
-
-## space-* / divide-* 선택자 변경
-
-```html
-<!-- 레이아웃이 깨지면 gap으로 대체 -->
-<div class="flex gap-4">  <!-- space-x-4 대신 -->
-<div class="grid gap-4">  <!-- space-y-4 대신 -->
-```
-
-## CSS Modules에서 Theme 변수 접근
-
-```css
-/* Component.module.css */
-@reference "tailwindcss";  /* v4 필수 */
-
-.button {
-  background-color: var(--color-primary);
-}
-```
-
-## Prefix 설정 변경
-
-```css
-/* v3: tailwind.config.js */
-module.exports = { prefix: 'tw-' }
-
-/* v4: CSS에서 설정 */
-@import "tailwindcss" prefix(tw);
-
-/* 사용 시 콜론 형식 */
-<div class="tw:bg-blue-500">
-```
-
-## Mandu 특화 주의사항
-
-### Island 컴포넌트에서 @reference
-
-```tsx
-// Island에서 CSS Modules 사용 시
-import styles from './Counter.module.css';
-
-// Counter.module.css에 @reference 필수
-```
-
-### SSR과 CSS 순서
-
-Mandu의 CSS Auto-Build는 `/.mandu/client/globals.css`에 출력합니다.
-SSR 시 이 경로로 자동 주입되므로 별도 설정 불필요.
-
-### HMR 동작
-
-CSS 변경 시 `css-update` HMR 메시지로 스타일시트만 교체됩니다.
-페이지 전체 리로드 없이 스타일 변경 확인 가능.
-
-## 마이그레이션 체크리스트
-
-- [ ] Browser support 확인 (Safari 16.4+)
-- [ ] `@tailwind` → `@import "tailwindcss"` 변경
-- [ ] `tailwind.config.ts` 삭제, `@theme`으로 이전
-- [ ] `postcss.config.js` 삭제
-- [ ] Important modifier 위치 변경 (`!` → 끝)
-- [ ] `@layer utilities` → `@utility` 변경
-- [ ] CSS variable 문법 확인 `[--var]` → `(--var)`
-- [ ] space-*/divide-* 레이아웃 확인
-
-Reference: [Tailwind CSS v4 Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)

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

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

@@ -1,132 +0,0 @@
----
-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 테스트를 다룹니다.
-
-## Agent Workflow Contract
-
-This skill is a Domain addendum. It must not replace `mandu-agent-workflow`.
-Use it only after `mandu.agent.plan` selects testing or `mandu.agent.verify` asks for targeted test coverage.
-
-Canonical workflow step: `verify -> repair`.
-
-Preferred MCP tools:
-
-| Step | Tools |
-|------|-------|
-| plan | `mandu.agent.plan` |
-| verify | `mandu.agent.verify`, `mandu.run.tests`, `mandu.ate.generate`, `mandu.ate.run` |
-| repair | `mandu.agent.repair`, `mandu.ate.heal` |
-
-Allowed file edits:
-
-- Co-located `*.test.ts` / `*.test.tsx` files
-- `tests/e2e/**/*.spec.ts`
-- Test fixtures and mocks scoped to the planned domain
-
-Verification command:
-
-```bash
-mandu agent verify --changed --json --write
-```
-
-Common failures:
-
-- Running broad watch-mode tests as an agent default
-- Adding tests that bypass the route/slot/contract path under change
-- Applying ATE healing before reading the verify report
-
-Repair path:
-
-```bash
-mandu agent repair --from .mandu/agent-verify.json --json
-```
-
-## 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
-
-## Low-Level Test Commands
-
-Use these only after `agent plan` or `agent verify` identifies the target:
-
-```bash
-mandu agent verify --changed --json --write
-bun test src/slots/user.test.ts
-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
-```