@mandujs/mcp 0.38.12 → 0.39.0-beta.1

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

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

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

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

@@ -1,196 +0,0 @@
----
-name: Mandu Styling
-description: Tailwind CSS v4 integration and Island styling patterns for Mandu Framework
-metadata:
-  version: "2.0.0"
-  author: mandu
-  tailwind: "v4.1+"
-globs:
-  - "**/*.css"
-  - "**/*.module.css"
-  - "app/globals.css"
----
-
-# Mandu Styling Skill
-
-Mandu Island 아키텍처에 최적화된 Tailwind CSS v4 스타일링 가이드입니다.
-
-## Agent Workflow Contract
-
-This skill is a Domain addendum. It must not replace `mandu-agent-workflow`.
-Use it only after `mandu.agent.plan` selects styling, design, UI, hydration, or component domains.
-
-Canonical workflow step: `plan -> apply -> verify`.
-
-Preferred MCP tools:
-
-| Step | Tools |
-|------|-------|
-| plan | `mandu.agent.plan`, `mandu.design.get` |
-| apply | `mandu.agent.apply`, `mandu.design.patch` |
-| verify | `mandu.agent.verify`, `mandu.design.check`, `mandu.lint` |
-| repair | `mandu.agent.repair` |
-
-Allowed file edits:
-
-- CSS files named in the plan, especially `app/globals.css`
-- Component className changes scoped to the target UI
-- Theme tokens only after inspecting the project's design source
-
-Verification command:
-
-```bash
-mandu agent verify --changed --json --write
-```
-
-Common failures:
-
-- Installing or changing styling stacks before checking the existing project style
-- Editing broad theme tokens for a local component issue
-- Skipping design/lint verification after Tailwind v4 syntax changes
-
-Repair path:
-
-```bash
-mandu agent repair --from .mandu/agent-verify.json --json
-```
-
-## 핵심 원칙
-
-1. **Zero-Runtime**: 빌드 타임 CSS 생성 (SSR 호환)
-2. **CSS-First**: JavaScript 설정 대신 CSS에서 테마 정의
-3. **Island 격리**: 컴포넌트 간 스타일 충돌 방지
-4. **Auto Integration**: Mandu가 Tailwind v4 자동 감지 및 빌드
-
-## 권장 스택
-
-```
-Primary:    Tailwind CSS v4 + clsx/tailwind-merge
-Alternative: CSS Modules (최소 의존성)
-```
-
-## Setup Examples
-
-Use these examples only after `mandu.agent.plan` selects styling setup or migration.
-
-### 1. 설치
-
-```bash
-bun add -d tailwindcss@^4.1 @tailwindcss/cli@^4.1
-bun add clsx tailwind-merge
-```
-
-### 2. app/globals.css
-
-```css
-@import "tailwindcss";
-
-@theme {
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --radius-md: 0.5rem;
-  --font-sans: 'Inter', system-ui, sans-serif;
-}
-
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-}
-```
-
-### 3. Mandu 자동 통합
-
-```
-mandu dev 실행 시:
-├─ @import "tailwindcss" 감지
-├─ Tailwind CLI --watch 자동 시작
-├─ 출력: .mandu/client/globals.css
-├─ SSR에서 <link> 자동 주입
-└─ CSS 변경 시 HMR 핫 리로드
-```
-
-## Island 스타일링
-
-```tsx
-// src/client/widgets/counter/Counter.island.tsx
-"use client";
-
-import { cn } from "@/shared/lib/utils";
-
-export function CounterIsland({ variant = "default" }) {
-  return (
-    <button className={cn(
-      "px-4 py-2 rounded-md font-medium transition-colors",
-      variant === "default"
-        ? "bg-primary text-primary-foreground hover:bg-primary/90"
-        : "border border-primary text-primary hover:bg-primary/10"
-    )}>
-      Count: 0
-    </button>
-  );
-}
-```
-
-## 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));
-}
-```
-
-## Custom Utilities
-
-```css
-/* v4 방식: @utility 사용 */
-@utility text-balance {
-  text-wrap: balance;
-}
-
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar { display: none; }
-}
-```
-
-## v4 주요 변경사항
-
-| v3 | v4 |
-|----|-----|
-| `@tailwind base/utilities` | `@import "tailwindcss"` |
-| `tailwind.config.ts` | `@theme { }` in CSS |
-| `!bg-red-500` | `bg-red-500!` |
-| `@layer utilities` | `@utility` |
-| `bg-[--var]` | `bg-(--var)` |
-
-> 자세한 내용은 `rules/style-tailwind-v4-gotchas.md` 참조
-
-## 규칙 카테고리
-
-| Category | Description | Rules |
-|----------|-------------|-------|
-| Setup | Tailwind v4 설정 | 1 |
-| Gotchas | v4 주의사항/마이그레이션 | 1 |
-| Island | Island 스타일 패턴 | 3 |
-| Component | 컴포넌트 스타일 | 3 |
-| Performance | 최적화 | 2 |
-| Theme | 테마/다크모드 | 1 |
-
-→ 세부 규칙은 `rules/` 폴더 참조
-
-## Browser Support
-
-```
-Safari 16.4+ | Chrome 111+ | Firefox 128+
-```
-
-> IE 및 구형 브라우저 미지원. 레거시 프로젝트는 Tailwind v3 유지 권장.
-
-Reference: [Tailwind CSS v4](https://tailwindcss.com/docs)

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

@@ -1,43 +0,0 @@
-# Mandu Styling - Rule Categories
-
-## Setup
-CSS 프레임워크 초기 설정 및 Mandu 통합 (Tailwind v4 CSS-first)
-
-| Impact | Description |
-|--------|-------------|
-| CRITICAL | 프레임워크 설정 없이 스타일링 불가 |
-
-## Gotchas
-Tailwind CSS v4 마이그레이션 주의사항 및 Breaking Changes
-
-| Impact | Description |
-|--------|-------------|
-| HIGH | v3→v4 마이그레이션 시 필수 확인 사항 |
-
-## 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

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

@@ -1,15 +0,0 @@
-{
-  "id": "mandu-styling",
-  "name": "Mandu Styling",
-  "version": "2.0.0",
-  "description": "Tailwind CSS v4 integration and Island styling patterns for Mandu Framework",
-  "author": "mandu",
-  "tailwind": "v4.1+",
-  "references": [
-    "https://tailwindcss.com/docs",
-    "https://tailwindcss.com/docs/upgrade-guide",
-    "https://panda-css.com/docs",
-    "https://lightningcss.dev/"
-  ],
-  "abstract": "Mandu Island 아키텍처에 최적화된 Tailwind CSS v4 스타일링 가이드. CSS-first 설정, @theme 블록, Mandu 자동 통합(CSS Auto-Build, HMR)을 지원합니다."
-}

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

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