npm - @mandujs/mcp - Versions diffs - 0.9.19 → 0.9.21 - Mend

@mandujs/mcp 0.9.19 → 0.9.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/src/resources/skills/mandu-ui/rules/ui-island-integration.md ADDED Viewed

@@ -0,0 +1,258 @@
+---
+title: UI Library Island Integration
+impact: MEDIUM
+impactDescription: Proper integration of UI components with Island architecture
+tags: ui, island, integration, client
+---
+## UI Library Island Integration
+**Impact: MEDIUM (Proper integration of UI components with Island architecture)**
+UI 라이브러리 컴포넌트를 Mandu Island 아키텍처에 올바르게 통합하세요.
+## "use client" 경계
+```tsx
+// components/ui/button.tsx
+// shadcn/ui 컴포넌트는 이미 클라이언트 컴포넌트
+"use client";
+import { cn } from "@/lib/utils";
+// ...
+```
+```tsx
+// app/dashboard/page.tsx (서버 컴포넌트)
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { DashboardActionsIsland } from "./client";
+export default function DashboardPage() {
+  return (
+    <div>
+      {/* Card는 서버에서 렌더링 (정적 마크업) */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Dashboard</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {/* 인터랙티브 부분만 Island */}
+          <DashboardActionsIsland />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+## 서버 데이터 → Island 전달
+```tsx
+// app/users/page.tsx
+import { UserTableIsland } from "./client";
+import { getUsers } from "@/lib/db";
+export default async function UsersPage() {
+  const users = await getUsers();
+  return (
+    <div>
+      <h1>Users</h1>
+      {/* 초기 데이터를 props로 전달 */}
+      <UserTableIsland initialUsers={users} />
+    </div>
+  );
+}
+```
+```tsx
+// app/users/client.tsx
+"use client";
+import { useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+export function UserTableIsland({ initialUsers }) {
+  const [users, setUsers] = useState(initialUsers);
+  const handleDelete = async (id: string) => {
+    await fetch(`/api/users/${id}`, { method: "DELETE" });
+    setUsers(users.filter(u => u.id !== id));
+  };
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {users.map(user => (
+          <TableRow key={user.id}>
+            <TableCell>{user.name}</TableCell>
+            <TableCell>{user.email}</TableCell>
+            <TableCell>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => handleDelete(user.id)}
+              >
+                Delete
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+```
+## Dialog/Modal Island 패턴
+```tsx
+// app/users/client.tsx
+"use client";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+export function CreateUserIsland() {
+  const [open, setOpen] = useState(false);
+  const handleSubmit = async (data: FormData) => {
+    await fetch("/api/users", {
+      method: "POST",
+      body: data,
+    });
+    setOpen(false);
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Add User</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New User</DialogTitle>
+        </DialogHeader>
+        <form action={handleSubmit}>
+          {/* Form fields */}
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+## Toast Island
+```tsx
+// app/layout.tsx
+import { Toaster } from "@/components/ui/toaster";
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        {children}
+        {/* Toast는 전역 Island */}
+        <Toaster />
+      </body>
+    </html>
+  );
+}
+```
+```tsx
+// app/form/client.tsx
+"use client";
+import { useToast } from "@/components/ui/use-toast";
+export function FormIsland() {
+  const { toast } = useToast();
+  const handleSubmit = async () => {
+    try {
+      await submitForm();
+      toast({
+        title: "Success",
+        description: "Form submitted successfully",
+      });
+    } catch {
+      toast({
+        title: "Error",
+        description: "Something went wrong",
+        variant: "destructive",
+      });
+    }
+  };
+  // ...
+}
+```
+## Island 간 UI 상태 공유
+```tsx
+// app/sidebar/client.tsx
+"use client";
+import { useIslandEvent } from "@mandujs/core/client";
+export function SidebarIsland() {
+  const [isOpen, setIsOpen] = useState(true);
+  useIslandEvent("toggle-sidebar", () => {
+    setIsOpen(prev => !prev);
+  });
+  return (
+    <aside className={cn(isOpen ? "w-64" : "w-0", "transition-all")}>
+      {/* Sidebar content */}
+    </aside>
+  );
+}
+```
+```tsx
+// app/header/client.tsx
+"use client";
+import { useIslandEvent } from "@mandujs/core/client";
+import { Button } from "@/components/ui/button";
+export function HeaderIsland() {
+  const { emit } = useIslandEvent("toggle-sidebar");
+  return (
+    <header>
+      <Button variant="ghost" size="icon" onClick={() => emit({})}>
+        <MenuIcon />
+      </Button>
+    </header>
+  );
+}
+```
+Reference: [React Server Components](https://react.dev/reference/rsc/server-components)

package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md ADDED Viewed

@@ -0,0 +1,213 @@
+---
+title: Radix UI Patterns
+impact: HIGH
+impactDescription: Accessible headless primitives for custom components
+tags: ui, radix, headless, primitives
+---
+## Radix UI Patterns
+**Impact: HIGH (Accessible headless primitives for custom components)**
+Radix UI를 직접 사용하여 커스텀 컴포넌트를 만들 때의 패턴입니다.
+**설치:**
+```bash
+# 개별 패키지
+bun add @radix-ui/react-dialog
+bun add @radix-ui/react-dropdown-menu
+bun add @radix-ui/react-popover
+bun add @radix-ui/react-tabs
+bun add @radix-ui/react-tooltip
+```
+## Dialog 커스텀 구현
+```tsx
+// components/ui/custom-dialog.tsx
+"use client";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = ({ className, ...props }) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+);
+const DialogContent = ({ className, children, ...props }) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+        "rounded-lg border bg-background p-6 shadow-lg",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+export { Dialog, DialogTrigger, DialogContent, DialogClose };
+```
+## Dropdown Menu 패턴
+```tsx
+// components/ui/custom-dropdown.tsx
+"use client";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuContent = ({ className, sideOffset = 4, ...props }) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[side=bottom]:slide-in-from-top-2",
+        "data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+const DropdownMenuItem = ({ className, ...props }) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+);
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem };
+```
+## Island에서 사용
+```tsx
+// app/user-menu/client.tsx
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/custom-dropdown";
+export function UserMenuIsland({ user }: { user: { name: string; avatar: string } }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="flex items-center gap-2 rounded-full p-1 hover:bg-accent">
+          <img src={user.avatar} alt="" className="h-8 w-8 rounded-full" />
+          <span className="sr-only">User menu</span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => navigate("/profile")}>
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => navigate("/settings")}>
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => logout()}
+          className="text-destructive"
+        >
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+## Tooltip 패턴
+```tsx
+// components/ui/tooltip.tsx
+"use client";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = ({ className, sideOffset = 4, ...props }) => (
+  <TooltipPrimitive.Content
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      className
+    )}
+    {...props}
+  />
+);
+// 사용
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <button>Hover me</button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Tooltip text</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+## data-state 스타일링
+```css
+/* Radix는 상태를 data-* 속성으로 노출 */
+[data-state="open"] { /* 열림 상태 */ }
+[data-state="closed"] { /* 닫힘 상태 */ }
+[data-state="active"] { /* 활성 상태 */ }
+[data-disabled] { /* 비활성화 */ }
+[data-highlighted] { /* 키보드 포커스 */ }
+```
+Reference: [Radix UI Documentation](https://www.radix-ui.com/primitives)

package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md ADDED Viewed

@@ -0,0 +1,209 @@
+---
+title: shadcn/ui Setup
+impact: HIGH
+impactDescription: Production-ready UI components with full customization
+tags: ui, shadcn, setup, components
+---
+## shadcn/ui Setup
+**Impact: HIGH (Production-ready UI components with full customization)**
+shadcn/ui를 Mandu 프로젝트에 설정하세요. 컴포넌트를 직접 소유하고 커스터마이징할 수 있습니다.
+**초기화:**
+```bash
+bunx shadcn-ui@latest init
+```
+**선택 옵션:**
+```
+✔ TypeScript: yes
+✔ Style: Default (또는 New York)
+✔ Base color: Slate
+✔ Global CSS: app/globals.css
+✔ CSS variables: yes
+✔ tailwind.config: tailwind.config.ts
+✔ Components alias: @/components
+✔ Utils alias: @/lib/utils
+```
+## 컴포넌트 추가
+```bash
+# 자주 사용하는 컴포넌트
+bunx shadcn-ui@latest add button
+bunx shadcn-ui@latest add input
+bunx shadcn-ui@latest add card
+bunx shadcn-ui@latest add dialog
+bunx shadcn-ui@latest add dropdown-menu
+bunx shadcn-ui@latest add form
+bunx shadcn-ui@latest add toast
+# 한 번에 여러 개
+bunx shadcn-ui@latest add button input card dialog
+```
+## 생성된 구조
+```
+components/
+└── ui/
+    ├── button.tsx      # 직접 수정 가능
+    ├── input.tsx
+    ├── card.tsx
+    └── ...
+lib/
+└── utils.ts            # cn() 함수
+```
+## 컴포넌트 커스터마이징
+```tsx
+// components/ui/button.tsx
+import { cva, type VariantProps } from "class-variance-authority";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        // 커스텀 variant 추가
+        mandu: "bg-blue-500 text-white hover:bg-blue-600",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        // 커스텀 size 추가
+        xl: "h-14 rounded-lg px-10 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+// ... 컴포넌트 코드
+```
+## Island에서 사용
+```tsx
+// app/actions/client.tsx
+"use client";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+export function ActionButtonsIsland() {
+  const [loading, setLoading] = useState(false);
+  const handleAction = async () => {
+    setLoading(true);
+    try {
+      await doSomething();
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <div className="flex gap-2">
+      <Button onClick={handleAction} disabled={loading}>
+        {loading ? "Processing..." : "Submit"}
+      </Button>
+      <Button variant="outline">Cancel</Button>
+    </div>
+  );
+}
+```
+## Form 통합
+```bash
+bunx shadcn-ui@latest add form
+bun add react-hook-form @hookform/resolvers zod
+```
+```tsx
+// app/contact/client.tsx
+"use client";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+const formSchema = z.object({
+  email: z.string().email("Invalid email"),
+  message: z.string().min(10, "Minimum 10 characters"),
+});
+export function ContactFormIsland() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: "", message: "" },
+  });
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    await fetch("/api/contact", {
+      method: "POST",
+      body: JSON.stringify(values),
+    });
+  };
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder="you@example.com" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Send</Button>
+      </form>
+    </Form>
+  );
+}
+```
+## 업데이트
+```bash
+# 컴포넌트 업데이트 (덮어쓰기 주의!)
+bunx shadcn-ui@latest add button --overwrite
+# diff 확인 후 수동 병합 권장
+bunx shadcn-ui@latest diff button
+```
+Reference: [shadcn/ui Documentation](https://ui.shadcn.com/docs)