@mandujs/mcp 0.12.2 → 0.13.0

package/src/resources/skills/mandu-styling/rules/style-island-scoping.md

@@ -1,167 +1,167 @@
----
-title: Island Style Scoping
-impact: HIGH
-impactDescription: Prevents style conflicts between independent Islands
-tags: styling, island, scoping, isolation
----
-
-## Island Style Scoping
-
-**Impact: HIGH (Prevents style conflicts between independent Islands)**
-
-Island는 독립적으로 hydrate되므로 스타일 충돌을 방지해야 합니다.
-
-**문제 상황:**
-
-```tsx
-// ❌ 전역 클래스 충돌 가능
-<div className="card">...</div>  // Island A
-<div className="card">...</div>  // Island B - 다른 스타일 의도
-```
-
-## 해결 방법 1: data-island 속성
-
-```tsx
-// app/counter/client.tsx
-"use client";
-
-export function CounterIsland() {
-  return (
-    <div
-      data-island="counter"
-      className="p-4 rounded-lg bg-blue-500"
-    >
-      <button className="[&[data-island=counter]_&]:text-white">
-        Count
-      </button>
-    </div>
-  );
-}
-```
-
-```css
-/* Tailwind 커스텀 variant */
-[data-island="counter"] {
-  /* Island 특화 스타일 */
-}
-```
-
-## 해결 방법 2: CSS Modules (권장)
-
-```tsx
-// app/counter/client.tsx
-"use client";
-
-import styles from "./counter.module.css";
-
-export function CounterIsland() {
-  return (
-    <div className={styles.container}>
-      <button className={styles.button}>Count</button>
-    </div>
-  );
-}
-```
-
-```css
-/* app/counter/counter.module.css */
-.container {
-  @apply p-4 rounded-lg bg-blue-500;
-}
-
-.button {
-  @apply text-white font-medium;
-}
-```
-
-## 해결 방법 3: Tailwind Prefix
-
-```typescript
-// tailwind.config.ts
-export default {
-  prefix: "",  // 전역은 prefix 없음
-  // 또는 Island별 prefix
-};
-```
-
-```tsx
-// 컴포넌트별 네임스페이스
-const ns = "counter";
-
-export function CounterIsland() {
-  return (
-    <div className={`${ns}-container p-4`}>
-      <button className={`${ns}-btn`}>Count</button>
-    </div>
-  );
-}
-```
-
-## 해결 방법 4: CSS Layers
-
-```css
-/* app/globals.css */
-@layer components {
-  .island-counter {
-    @apply p-4 rounded-lg;
-  }
-}
-
-@layer islands.counter {
-  .container {
-    @apply bg-blue-500;
-  }
-}
-
-@layer islands.form {
-  .container {
-    @apply bg-green-500;
-  }
-}
-```
-
-## Best Practice: Compound + Module 조합
-
-```tsx
-// app/card/client.tsx
-"use client";
-
-import { cn } from "@/lib/utils";
-import styles from "./card.module.css";
-
-export const Card = {
-  Root: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn(styles.root, className)} {...props} />
-  ),
-  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn(styles.header, className)} {...props} />
-  ),
-  Content: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={cn(styles.content, className)} {...props} />
-  ),
-};
-```
-
-```css
-/* app/card/card.module.css */
-.root {
-  @apply rounded-lg border bg-white shadow-sm;
-}
-
-.header {
-  @apply px-6 py-4 border-b;
-}
-
-.content {
-  @apply px-6 py-4;
-}
-```
-
-## 스타일 충돌 체크리스트
-
-- [ ] 전역 클래스명 사용 금지 (`.card`, `.button` 등)
-- [ ] CSS Modules 또는 data-island 속성 사용
-- [ ] cn() 함수로 클래스 병합 시 순서 주의
-- [ ] 다크모드 변수는 :root에 정의
-
-Reference: [Tailwind CSS Scoping](https://tailwindcss.com/docs/adding-custom-styles)
+---
+title: Island Style Scoping
+impact: HIGH
+impactDescription: Prevents style conflicts between independent Islands
+tags: styling, island, scoping, isolation
+---
+
+## Island Style Scoping
+
+**Impact: HIGH (Prevents style conflicts between independent Islands)**
+
+Island는 독립적으로 hydrate되므로 스타일 충돌을 방지해야 합니다.
+
+**문제 상황:**
+
+```tsx
+// ❌ 전역 클래스 충돌 가능
+<div className="card">...</div>  // Island A
+<div className="card">...</div>  // Island B - 다른 스타일 의도
+```
+
+## 해결 방법 1: data-island 속성
+
+```tsx
+// app/counter/client.tsx
+"use client";
+
+export function CounterIsland() {
+  return (
+    <div
+      data-island="counter"
+      className="p-4 rounded-lg bg-blue-500"
+    >
+      <button className="[&[data-island=counter]_&]:text-white">
+        Count
+      </button>
+    </div>
+  );
+}
+```
+
+```css
+/* Tailwind 커스텀 variant */
+[data-island="counter"] {
+  /* Island 특화 스타일 */
+}
+```
+
+## 해결 방법 2: CSS Modules (권장)
+
+```tsx
+// app/counter/client.tsx
+"use client";
+
+import styles from "./counter.module.css";
+
+export function CounterIsland() {
+  return (
+    <div className={styles.container}>
+      <button className={styles.button}>Count</button>
+    </div>
+  );
+}
+```
+
+```css
+/* app/counter/counter.module.css */
+.container {
+  @apply p-4 rounded-lg bg-blue-500;
+}
+
+.button {
+  @apply text-white font-medium;
+}
+```
+
+## 해결 방법 3: Tailwind Prefix
+
+```typescript
+// tailwind.config.ts
+export default {
+  prefix: "",  // 전역은 prefix 없음
+  // 또는 Island별 prefix
+};
+```
+
+```tsx
+// 컴포넌트별 네임스페이스
+const ns = "counter";
+
+export function CounterIsland() {
+  return (
+    <div className={`${ns}-container p-4`}>
+      <button className={`${ns}-btn`}>Count</button>
+    </div>
+  );
+}
+```
+
+## 해결 방법 4: CSS Layers
+
+```css
+/* app/globals.css */
+@layer components {
+  .island-counter {
+    @apply p-4 rounded-lg;
+  }
+}
+
+@layer islands.counter {
+  .container {
+    @apply bg-blue-500;
+  }
+}
+
+@layer islands.form {
+  .container {
+    @apply bg-green-500;
+  }
+}
+```
+
+## Best Practice: Compound + Module 조합
+
+```tsx
+// app/card/client.tsx
+"use client";
+
+import { cn } from "@/lib/utils";
+import styles from "./card.module.css";
+
+export const Card = {
+  Root: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.root, className)} {...props} />
+  ),
+  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.header, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn(styles.content, className)} {...props} />
+  ),
+};
+```
+
+```css
+/* app/card/card.module.css */
+.root {
+  @apply rounded-lg border bg-white shadow-sm;
+}
+
+.header {
+  @apply px-6 py-4 border-b;
+}
+
+.content {
+  @apply px-6 py-4;
+}
+```
+
+## 스타일 충돌 체크리스트
+
+- [ ] 전역 클래스명 사용 금지 (`.card`, `.button` 등)
+- [ ] CSS Modules 또는 data-island 속성 사용
+- [ ] cn() 함수로 클래스 병합 시 순서 주의
+- [ ] 다크모드 변수는 :root에 정의
+
+Reference: [Tailwind CSS Scoping](https://tailwindcss.com/docs/adding-custom-styles)