@mandujs/mcp 0.12.2 → 0.13.0

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

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