@mandujs/mcp 0.9.19 → 0.9.21

package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md

@@ -0,0 +1,56 @@
+---
+title: Use Context Response Methods
+impact: HIGH
+impactDescription: Consistent API responses
+tags: slot, context, response
+---
+
+## Use Context Response Methods
+
+Use `ctx.ok()`, `ctx.created()`, `ctx.error()` instead of manual Response objects.
+These methods ensure consistent response format across your API.
+
+**Incorrect (manual Response):**
+
+```typescript
+export default Mandu.filling()
+  .get((ctx) => {
+    return new Response(JSON.stringify({ data: [] }), {
+      headers: { "Content-Type": "application/json" }
+    });
+  })
+  .post(async (ctx) => {
+    return new Response(JSON.stringify({ error: "Bad request" }), {
+      status: 400
+    });
+  });
+```
+
+**Correct (context methods):**
+
+```typescript
+export default Mandu.filling()
+  .get((ctx) => {
+    return ctx.ok({ data: [] });
+  })
+  .post(async (ctx) => {
+    const body = await ctx.body();
+    if (!body.name) {
+      return ctx.error("name is required");
+    }
+    return ctx.created({ data: body });
+  });
+```
+
+## Response Methods
+
+| Method | Status | Use Case |
+|--------|--------|----------|
+| `ctx.ok(data)` | 200 | Success |
+| `ctx.created(data)` | 201 | Resource created |
+| `ctx.noContent()` | 204 | Success, no body |
+| `ctx.error(msg)` | 400 | Bad request |
+| `ctx.unauthorized(msg)` | 401 | Auth required |
+| `ctx.forbidden(msg)` | 403 | Permission denied |
+| `ctx.notFound(msg)` | 404 | Not found |
+| `ctx.fail(msg)` | 500 | Server error |

package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md

@@ -0,0 +1,59 @@
+---
+title: Use .guard() for Authentication
+impact: MEDIUM
+impactDescription: Clean auth separation
+tags: slot, guard, authentication
+---
+
+## Use .guard() for Authentication
+
+Use `.guard()` to check authentication before handlers run. Return a response
+to block the request, or return void/undefined to continue.
+
+**Incorrect (auth check in every handler):**
+
+```typescript
+export default Mandu.filling()
+  .get((ctx) => {
+    const user = ctx.get("user");
+    if (!user) {
+      return ctx.unauthorized("Login required");
+    }
+    return ctx.ok({ data: [] });
+  })
+  .post(async (ctx) => {
+    const user = ctx.get("user");
+    if (!user) {
+      return ctx.unauthorized("Login required");
+    }
+    // ... create logic
+  });
+```
+
+**Correct (single guard):**
+
+```typescript
+export default Mandu.filling()
+  .guard((ctx) => {
+    const user = ctx.get("user");
+    if (!user) {
+      return ctx.unauthorized("Login required");
+    }
+    // void return = continue to handlers
+  })
+  .get((ctx) => {
+    const user = ctx.get("user");
+    return ctx.ok({ data: [], user });
+  })
+  .post(async (ctx) => {
+    const body = await ctx.body();
+    return ctx.created({ data: body });
+  });
+```
+
+## Guard Rules
+
+1. Return response → Request blocked
+2. Return void → Continue to handler
+3. Guard runs before ALL HTTP method handlers
+4. Use `.onRequest()` to set user before guard runs

package/src/resources/skills/mandu-slot/rules/slot-http-methods.md

@@ -0,0 +1,64 @@
+---
+title: Use Appropriate HTTP Methods
+impact: HIGH
+impactDescription: RESTful API design
+tags: slot, http, methods, rest
+---
+
+## Use Appropriate HTTP Methods
+
+Chain HTTP methods on Mandu.filling() for RESTful API design.
+
+**Incorrect (single handler for all):**
+
+```typescript
+export default Mandu.filling()
+  .get(async (ctx) => {
+    const method = ctx.req.method;
+    if (method === "GET") {
+      return ctx.ok({ data: [] });
+    } else if (method === "POST") {
+      const body = await ctx.body();
+      return ctx.created({ data: body });
+    }
+  });
+```
+
+**Correct (separate methods):**
+
+```typescript
+export default Mandu.filling()
+  .get((ctx) => {
+    // GET /api/users - List users
+    return ctx.ok({ data: [] });
+  })
+  .post(async (ctx) => {
+    // POST /api/users - Create user
+    const body = await ctx.body<{ name: string }>();
+    return ctx.created({ data: { id: 1, ...body } });
+  })
+  .put(async (ctx) => {
+    // PUT /api/users/:id - Replace user
+    const body = await ctx.body();
+    return ctx.ok({ data: body });
+  })
+  .patch(async (ctx) => {
+    // PATCH /api/users/:id - Update user
+    const body = await ctx.body();
+    return ctx.ok({ data: body });
+  })
+  .delete((ctx) => {
+    // DELETE /api/users/:id - Delete user
+    return ctx.noContent();
+  });
+```
+
+## HTTP Method Semantics
+
+| Method | Idempotent | Use Case |
+|--------|------------|----------|
+| GET | Yes | Read resource |
+| POST | No | Create resource |
+| PUT | Yes | Replace resource |
+| PATCH | No | Partial update |
+| DELETE | Yes | Remove resource |

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

@@ -0,0 +1,118 @@
+---
+name: Mandu Styling
+description: CSS framework integration and Island styling patterns
+metadata:
+  version: "1.0.0"
+  author: mandu
+globs:
+  - "tailwind.config.{js,ts}"
+  - "panda.config.{js,ts}"
+  - "postcss.config.{js,ts}"
+  - "**/*.css"
+  - "**/*.module.css"
+---
+
+# Mandu Styling Skill
+
+Mandu Island 아키텍처에 최적화된 CSS 스타일링 가이드입니다.
+
+## 핵심 원칙
+
+1. **Zero-Runtime**: 빌드 타임 CSS 생성 (SSR 호환)
+2. **Island 격리**: 컴포넌트 간 스타일 충돌 방지
+3. **Composition**: Tailwind utility + 컴포넌트 패턴
+4. **Performance**: Critical CSS, Tree-shaking
+
+## 권장 스택
+
+```
+Primary:   Tailwind CSS + clsx/tailwind-merge
+Alternative: Panda CSS (type-safe 선호 시)
+Fallback:  CSS Modules (최소 의존성)
+```
+
+## 빠른 시작
+
+### Tailwind CSS 설정
+
+```bash
+bun add -d tailwindcss postcss autoprefixer
+bunx tailwindcss init -p
+```
+
+```typescript
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./app/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        mandu: {
+          primary: "#3b82f6",
+          secondary: "#64748b",
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;
+```
+
+```css
+/* app/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### Island 스타일링
+
+```tsx
+// app/counter/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface CounterProps {
+  variant?: "default" | "outline";
+}
+
+export function CounterIsland({ variant = "default" }: CounterProps) {
+  const variants = {
+    default: "bg-mandu-primary text-white",
+    outline: "border-2 border-mandu-primary text-mandu-primary",
+  };
+
+  return (
+    <button className={cn("px-4 py-2 rounded-lg", variants[variant])}>
+      Count: 0
+    </button>
+  );
+}
+```
+
+## 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));
+}
+```
+
+## 규칙 카테고리
+
+| Category | Description | Rules |
+|----------|-------------|-------|
+| Setup | 프레임워크 설정 | 3 |
+| Island | Island 스타일 패턴 | 3 |
+| Component | 컴포넌트 스타일 | 3 |
+| Performance | 최적화 | 2 |
+| Theme | 테마/다크모드 | 1 |
+
+→ 세부 규칙은 `rules/` 폴더 참조

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

@@ -0,0 +1,36 @@
+# Mandu Styling - Rule Categories
+
+## Setup
+CSS 프레임워크 초기 설정 및 Bun 통합
+
+| Impact | Description |
+|--------|-------------|
+| CRITICAL | 프레임워크 설정 없이 스타일링 불가 |
+
+## Island
+Island 컴포넌트 특화 스타일링 패턴
+
+| Impact | Description |
+|--------|-------------|
+| HIGH | 스타일 충돌 방지, 독립적 hydration 지원 |
+
+## Component
+컴포넌트 레벨 스타일링 패턴
+
+| Impact | Description |
+|--------|-------------|
+| HIGH | 재사용성, 일관성, 유지보수성 향상 |
+
+## Performance
+CSS 빌드 및 로딩 최적화
+
+| Impact | Description |
+|--------|-------------|
+| MEDIUM | 번들 크기, 초기 로딩 성능 개선 |
+
+## Theme
+다크모드 및 테마 시스템
+
+| Impact | Description |
+|--------|-------------|
+| MEDIUM | 사용자 경험, 접근성 향상 |

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

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

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

@@ -0,0 +1,13 @@
+{
+  "id": "mandu-styling",
+  "name": "Mandu Styling",
+  "version": "1.0.0",
+  "description": "CSS framework integration and Island styling patterns",
+  "author": "mandu",
+  "references": [
+    "https://tailwindcss.com/docs",
+    "https://panda-css.com/docs",
+    "https://lightningcss.dev/"
+  ],
+  "abstract": "Mandu Island 아키텍처에 최적화된 CSS 스타일링 패턴. Tailwind CSS를 primary로, Panda CSS와 CSS Modules를 대안으로 제공합니다."
+}

package/src/resources/skills/mandu-styling/rules/style-component-compound.md

@@ -0,0 +1,235 @@
+---
+title: Compound Component Styling
+impact: HIGH
+impactDescription: Consistent styling for compound component patterns
+tags: styling, compound, composition, patterns
+---
+
+## Compound Component Styling
+
+**Impact: HIGH (Consistent styling for compound component patterns)**
+
+Mandu의 compound component 패턴에 맞는 스타일링 방법입니다.
+
+## 기본 패턴
+
+```tsx
+// app/card/client.tsx
+"use client";
+
+import { createContext, useContext } from "react";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+// 1. Variants 정의
+const cardVariants = cva("rounded-lg border", {
+  variants: {
+    variant: {
+      default: "bg-card text-card-foreground",
+      elevated: "bg-card shadow-lg",
+      ghost: "border-transparent",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// 2. Context로 variant 공유
+type CardContextValue = VariantProps<typeof cardVariants>;
+const CardContext = createContext<CardContextValue>({});
+
+// 3. Compound 컴포넌트
+export const Card = {
+  Root: ({
+    variant,
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLDivElement> & CardContextValue) => (
+    <CardContext.Provider value={{ variant }}>
+      <div className={cn(cardVariants({ variant }), className)} {...props}>
+        {children}
+      </div>
+    </CardContext.Provider>
+  ),
+
+  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+
+  Title: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3 className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+
+  Description: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+
+  Content: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("p-6 pt-0", className)} {...props} />
+  ),
+
+  Footer: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+};
+```
+
+## 사용 예시
+
+```tsx
+<Card.Root variant="elevated">
+  <Card.Header>
+    <Card.Title>Card Title</Card.Title>
+    <Card.Description>Card description</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    Content here
+  </Card.Content>
+  <Card.Footer>
+    <button>Action</button>
+  </Card.Footer>
+</Card.Root>
+```
+
+## Context 기반 스타일 상속
+
+```tsx
+// app/alert/client.tsx
+"use client";
+
+import { createContext, useContext } from "react";
+
+type AlertVariant = "default" | "info" | "success" | "warning" | "error";
+
+const AlertContext = createContext<{ variant: AlertVariant }>({
+  variant: "default",
+});
+
+const alertStyles = {
+  default: {
+    root: "bg-background text-foreground",
+    icon: "text-foreground",
+  },
+  info: {
+    root: "bg-blue-50 text-blue-900 border-blue-200",
+    icon: "text-blue-600",
+  },
+  success: {
+    root: "bg-green-50 text-green-900 border-green-200",
+    icon: "text-green-600",
+  },
+  warning: {
+    root: "bg-yellow-50 text-yellow-900 border-yellow-200",
+    icon: "text-yellow-600",
+  },
+  error: {
+    root: "bg-red-50 text-red-900 border-red-200",
+    icon: "text-red-600",
+  },
+};
+
+export const Alert = {
+  Root: ({ variant = "default", className, ...props }) => (
+    <AlertContext.Provider value={{ variant }}>
+      <div
+        role="alert"
+        className={cn(
+          "relative w-full rounded-lg border p-4",
+          alertStyles[variant].root,
+          className
+        )}
+        {...props}
+      />
+    </AlertContext.Provider>
+  ),
+
+  Icon: ({ className, children, ...props }) => {
+    const { variant } = useContext(AlertContext);
+    return (
+      <span
+        className={cn("h-5 w-5", alertStyles[variant].icon, className)}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  },
+
+  Title: ({ className, ...props }) => (
+    <h5
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+
+  Description: ({ className, ...props }) => (
+    <div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+};
+```
+
+## Slot 기반 커스터마이징
+
+```tsx
+// asChild 패턴으로 스타일 전달
+import { Slot } from "@radix-ui/react-slot";
+
+export const Button = ({
+  asChild,
+  className,
+  variant,
+  size,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+};
+
+// 사용: Link에 Button 스타일 적용
+<Button asChild variant="outline">
+  <a href="/about">About</a>
+</Button>
+```
+
+## CSS Modules와 조합
+
+```css
+/* card.module.css */
+.root {
+  @apply rounded-lg border;
+}
+
+.root[data-variant="elevated"] {
+  @apply shadow-lg;
+}
+
+.header {
+  @apply p-6;
+}
+
+.content {
+  @apply p-6 pt-0;
+}
+```
+
+```tsx
+import styles from "./card.module.css";
+
+export const Card = {
+  Root: ({ variant, ...props }) => (
+    <div className={styles.root} data-variant={variant} {...props} />
+  ),
+  Header: (props) => <div className={styles.header} {...props} />,
+  Content: (props) => <div className={styles.content} {...props} />,
+};
+```
+
+Reference: [Radix UI Primitives](https://www.radix-ui.com/primitives)