@mandujs/mcp 0.12.1 → 0.13.0

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 (141) hide show
  1. package/README.md +367 -367
  2. package/package.json +2 -2
  3. package/src/activity-monitor.ts +847 -847
  4. package/src/adapters/index.ts +20 -20
  5. package/src/adapters/monitor-adapter.ts +100 -100
  6. package/src/adapters/tool-adapter.ts +88 -88
  7. package/src/executor/error-handler.ts +250 -250
  8. package/src/executor/index.ts +22 -22
  9. package/src/executor/tool-executor.ts +148 -148
  10. package/src/hooks/config-watcher.ts +174 -174
  11. package/src/hooks/index.ts +23 -23
  12. package/src/hooks/mcp-hooks.ts +227 -227
  13. package/src/index.ts +106 -106
  14. package/src/logging/index.ts +15 -15
  15. package/src/logging/mcp-transport.ts +134 -134
  16. package/src/registry/index.ts +13 -13
  17. package/src/registry/mcp-tool-registry.ts +298 -298
  18. package/src/resources/skills/guides.ts +1136 -1136
  19. package/src/resources/skills/index.ts +12 -12
  20. package/src/resources/skills/loader.ts +218 -218
  21. package/src/resources/skills/mandu-composition/SKILL.md +91 -91
  22. package/src/resources/skills/mandu-composition/metadata.json +13 -13
  23. package/src/resources/skills/mandu-composition/rules/_sections.md +26 -26
  24. package/src/resources/skills/mandu-composition/rules/_template.md +77 -77
  25. package/src/resources/skills/mandu-composition/rules/comp-arch-avoid-boolean-props.md +146 -146
  26. package/src/resources/skills/mandu-composition/rules/comp-arch-compound-components.md +164 -164
  27. package/src/resources/skills/mandu-composition/rules/comp-island-event.md +161 -161
  28. package/src/resources/skills/mandu-composition/rules/comp-island-slot-split.md +167 -167
  29. package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md +149 -149
  30. package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md +148 -148
  31. package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md +150 -150
  32. package/src/resources/skills/mandu-deployment/SKILL.md +92 -92
  33. package/src/resources/skills/mandu-deployment/_sections.md +41 -41
  34. package/src/resources/skills/mandu-deployment/_template.md +38 -38
  35. package/src/resources/skills/mandu-deployment/metadata.json +13 -13
  36. package/src/resources/skills/mandu-deployment/rules/deploy-build-bun.md +109 -109
  37. package/src/resources/skills/mandu-deployment/rules/deploy-build-output.md +115 -115
  38. package/src/resources/skills/mandu-deployment/rules/deploy-cicd-github.md +219 -219
  39. package/src/resources/skills/mandu-deployment/rules/deploy-docker-bun.md +150 -150
  40. package/src/resources/skills/mandu-deployment/rules/deploy-docker-compose.md +223 -223
  41. package/src/resources/skills/mandu-deployment/rules/deploy-platform-fly.md +152 -152
  42. package/src/resources/skills/mandu-deployment/rules/deploy-platform-render.md +179 -179
  43. package/src/resources/skills/mandu-deployment/rules/deploy-platform-supabase.md +323 -323
  44. package/src/resources/skills/mandu-deployment/rules/deploy-platform-vercel.md +140 -140
  45. package/src/resources/skills/mandu-fs-routes/SKILL.md +82 -82
  46. package/src/resources/skills/mandu-fs-routes/metadata.json +12 -12
  47. package/src/resources/skills/mandu-fs-routes/rules/_sections.md +36 -36
  48. package/src/resources/skills/mandu-fs-routes/rules/_template.md +69 -69
  49. package/src/resources/skills/mandu-fs-routes/rules/routes-api-methods.md +65 -65
  50. package/src/resources/skills/mandu-fs-routes/rules/routes-dynamic-param.md +93 -93
  51. package/src/resources/skills/mandu-fs-routes/rules/routes-naming-page.md +55 -55
  52. package/src/resources/skills/mandu-guard/SKILL.md +129 -129
  53. package/src/resources/skills/mandu-guard/metadata.json +12 -12
  54. package/src/resources/skills/mandu-guard/rules/_sections.md +36 -36
  55. package/src/resources/skills/mandu-guard/rules/_template.md +82 -82
  56. package/src/resources/skills/mandu-guard/rules/guard-config-rules.md +100 -100
  57. package/src/resources/skills/mandu-guard/rules/guard-layer-direction.md +76 -76
  58. package/src/resources/skills/mandu-guard/rules/guard-preset-mandu.md +81 -81
  59. package/src/resources/skills/mandu-guard/rules/guard-validate-import.md +80 -80
  60. package/src/resources/skills/mandu-hydration/SKILL.md +91 -91
  61. package/src/resources/skills/mandu-hydration/metadata.json +12 -12
  62. package/src/resources/skills/mandu-hydration/rules/_sections.md +31 -31
  63. package/src/resources/skills/mandu-hydration/rules/_template.md +72 -72
  64. package/src/resources/skills/mandu-hydration/rules/hydration-data-event.md +109 -109
  65. package/src/resources/skills/mandu-hydration/rules/hydration-directive-use-client.md +55 -55
  66. package/src/resources/skills/mandu-hydration/rules/hydration-island-setup.md +113 -113
  67. package/src/resources/skills/mandu-hydration/rules/hydration-priority-visible.md +68 -68
  68. package/src/resources/skills/mandu-performance/SKILL.md +85 -85
  69. package/src/resources/skills/mandu-performance/metadata.json +14 -14
  70. package/src/resources/skills/mandu-performance/rules/_sections.md +31 -31
  71. package/src/resources/skills/mandu-performance/rules/_template.md +64 -64
  72. package/src/resources/skills/mandu-performance/rules/perf-async-defer-await.md +103 -103
  73. package/src/resources/skills/mandu-performance/rules/perf-async-parallel.md +95 -95
  74. package/src/resources/skills/mandu-performance/rules/perf-bun-file.md +124 -124
  75. package/src/resources/skills/mandu-performance/rules/perf-bun-serve.md +125 -125
  76. package/src/resources/skills/mandu-performance/rules/perf-bundle-imports.md +80 -80
  77. package/src/resources/skills/mandu-performance/rules/perf-bundle-island-lazy.md +145 -145
  78. package/src/resources/skills/mandu-performance/rules/perf-cache-react.md +98 -98
  79. package/src/resources/skills/mandu-performance/rules/perf-render-transitions.md +154 -154
  80. package/src/resources/skills/mandu-security/SKILL.md +87 -87
  81. package/src/resources/skills/mandu-security/metadata.json +13 -13
  82. package/src/resources/skills/mandu-security/rules/_sections.md +31 -31
  83. package/src/resources/skills/mandu-security/rules/_template.md +74 -74
  84. package/src/resources/skills/mandu-security/rules/sec-auth-guard.md +127 -127
  85. package/src/resources/skills/mandu-security/rules/sec-env-management.md +133 -133
  86. package/src/resources/skills/mandu-security/rules/sec-input-validate.md +148 -148
  87. package/src/resources/skills/mandu-security/rules/sec-protect-csrf.md +146 -146
  88. package/src/resources/skills/mandu-security/rules/sec-protect-headers.md +138 -138
  89. package/src/resources/skills/mandu-slot/SKILL.md +85 -85
  90. package/src/resources/skills/mandu-slot/metadata.json +12 -12
  91. package/src/resources/skills/mandu-slot/rules/_sections.md +36 -36
  92. package/src/resources/skills/mandu-slot/rules/_template.md +63 -63
  93. package/src/resources/skills/mandu-slot/rules/slot-basic-structure.md +38 -38
  94. package/src/resources/skills/mandu-slot/rules/slot-ctx-response.md +56 -56
  95. package/src/resources/skills/mandu-slot/rules/slot-guard-auth.md +59 -59
  96. package/src/resources/skills/mandu-slot/rules/slot-http-methods.md +64 -64
  97. package/src/resources/skills/mandu-styling/SKILL.md +154 -154
  98. package/src/resources/skills/mandu-styling/_sections.md +43 -43
  99. package/src/resources/skills/mandu-styling/_template.md +32 -32
  100. package/src/resources/skills/mandu-styling/metadata.json +15 -15
  101. package/src/resources/skills/mandu-styling/rules/style-component-compound.md +235 -235
  102. package/src/resources/skills/mandu-styling/rules/style-component-slots.md +255 -255
  103. package/src/resources/skills/mandu-styling/rules/style-component-tokens.md +205 -205
  104. package/src/resources/skills/mandu-styling/rules/style-island-animations.md +272 -272
  105. package/src/resources/skills/mandu-styling/rules/style-island-scoping.md +167 -167
  106. package/src/resources/skills/mandu-styling/rules/style-island-variants.md +221 -221
  107. package/src/resources/skills/mandu-styling/rules/style-perf-critical.md +209 -209
  108. package/src/resources/skills/mandu-styling/rules/style-perf-purge.md +192 -192
  109. package/src/resources/skills/mandu-styling/rules/style-setup-modules.md +162 -162
  110. package/src/resources/skills/mandu-styling/rules/style-setup-panda.md +164 -164
  111. package/src/resources/skills/mandu-styling/rules/style-setup-tailwind.md +170 -170
  112. package/src/resources/skills/mandu-styling/rules/style-tailwind-v4-gotchas.md +179 -179
  113. package/src/resources/skills/mandu-styling/rules/style-theme-darkmode.md +229 -229
  114. package/src/resources/skills/mandu-testing/SKILL.md +99 -99
  115. package/src/resources/skills/mandu-testing/metadata.json +13 -13
  116. package/src/resources/skills/mandu-testing/rules/_sections.md +26 -26
  117. package/src/resources/skills/mandu-testing/rules/_template.md +65 -65
  118. package/src/resources/skills/mandu-testing/rules/test-component-island.md +195 -195
  119. package/src/resources/skills/mandu-testing/rules/test-e2e-playwright.md +196 -196
  120. package/src/resources/skills/mandu-testing/rules/test-mock-fetch.md +219 -219
  121. package/src/resources/skills/mandu-testing/rules/test-slot-unit.md +192 -192
  122. package/src/resources/skills/mandu-ui/SKILL.md +117 -117
  123. package/src/resources/skills/mandu-ui/_sections.md +23 -23
  124. package/src/resources/skills/mandu-ui/_template.md +32 -32
  125. package/src/resources/skills/mandu-ui/metadata.json +13 -13
  126. package/src/resources/skills/mandu-ui/rules/ui-accessibility-aria.md +232 -232
  127. package/src/resources/skills/mandu-ui/rules/ui-accessibility-focus.md +238 -238
  128. package/src/resources/skills/mandu-ui/rules/ui-composition-patterns.md +259 -259
  129. package/src/resources/skills/mandu-ui/rules/ui-island-integration.md +258 -258
  130. package/src/resources/skills/mandu-ui/rules/ui-radix-patterns.md +213 -213
  131. package/src/resources/skills/mandu-ui/rules/ui-shadcn-setup.md +209 -209
  132. package/src/resources/skills/recipes.ts +932 -932
  133. package/src/tools/generate.ts +7 -4
  134. package/src/tools/guard.ts +17 -4
  135. package/src/tools/hydration.ts +10 -10
  136. package/src/tools/project.ts +334 -334
  137. package/src/tools/runtime.ts +497 -497
  138. package/src/tools/seo.ts +417 -417
  139. package/src/tools/spec.ts +80 -159
  140. package/src/utils/project.ts +22 -12
  141. package/src/utils/withWarnings.ts +83 -83
@@ -1,192 +1,192 @@
1
- ---
2
- title: Unit Test Slot Handlers
3
- impact: HIGH
4
- impactDescription: Ensures API correctness
5
- tags: testing, slot, unit, bun-test
6
- ---
7
-
8
- ## Unit Test Slot Handlers
9
-
10
- **Impact: HIGH (Ensures API correctness)**
11
-
12
- slot 핸들러를 단위 테스트하여 API 로직의 정확성을 검증하세요.
13
-
14
- **기본 테스트 구조:**
15
-
16
- ```typescript
17
- // spec/slots/users.slot.test.ts
18
- import { describe, it, expect, beforeEach, mock } from "bun:test";
19
- import usersSlot from "./users.slot";
20
- import { createMockContext } from "@/test/helpers";
21
-
22
- describe("Users Slot", () => {
23
- describe("GET /users", () => {
24
- it("should return list of users", async () => {
25
- // Arrange
26
- const ctx = createMockContext({
27
- method: "GET",
28
- query: { page: "1", limit: "10" },
29
- });
30
-
31
- // Act
32
- const response = await usersSlot.handlers.get(ctx);
33
-
34
- // Assert
35
- expect(response.status).toBe(200);
36
- expect(response.body.users).toBeArray();
37
- expect(response.body.total).toBeNumber();
38
- });
39
-
40
- it("should filter by role", async () => {
41
- const ctx = createMockContext({
42
- method: "GET",
43
- query: { role: "admin" },
44
- });
45
-
46
- const response = await usersSlot.handlers.get(ctx);
47
-
48
- expect(response.status).toBe(200);
49
- expect(response.body.users.every(u => u.role === "admin")).toBe(true);
50
- });
51
- });
52
-
53
- describe("POST /users", () => {
54
- it("should create a new user", async () => {
55
- const ctx = createMockContext({
56
- method: "POST",
57
- body: { email: "test@example.com", name: "Test User" },
58
- });
59
-
60
- const response = await usersSlot.handlers.post(ctx);
61
-
62
- expect(response.status).toBe(201);
63
- expect(response.body.user.email).toBe("test@example.com");
64
- });
65
-
66
- it("should return 400 for invalid email", async () => {
67
- const ctx = createMockContext({
68
- method: "POST",
69
- body: { email: "invalid-email", name: "Test" },
70
- });
71
-
72
- const response = await usersSlot.handlers.post(ctx);
73
-
74
- expect(response.status).toBe(400);
75
- expect(response.body.errors).toBeDefined();
76
- });
77
- });
78
- });
79
- ```
80
-
81
- ## Mock Context 헬퍼
82
-
83
- ```typescript
84
- // test/helpers.ts
85
- interface MockContextOptions {
86
- method?: string;
87
- params?: Record<string, string>;
88
- query?: Record<string, string>;
89
- body?: unknown;
90
- headers?: Record<string, string>;
91
- user?: { id: string; role: string } | null;
92
- }
93
-
94
- export function createMockContext(options: MockContextOptions = {}) {
95
- const store = new Map<string, unknown>();
96
-
97
- // 사용자 설정
98
- if (options.user) {
99
- store.set("user", options.user);
100
- }
101
-
102
- return {
103
- req: {
104
- method: options.method || "GET",
105
- },
106
- params: options.params || {},
107
- query: options.query || {},
108
- headers: {
109
- get: (key: string) => options.headers?.[key.toLowerCase()] || null,
110
- },
111
-
112
- body: async <T>() => options.body as T,
113
-
114
- get: <T>(key: string) => store.get(key) as T,
115
- set: (key: string, value: unknown) => store.set(key, value),
116
-
117
- // 응답 메서드
118
- ok: (data: unknown) => ({ status: 200, body: data }),
119
- created: (data: unknown) => ({ status: 201, body: data }),
120
- noContent: () => ({ status: 204, body: null }),
121
- error: (data: unknown) => ({ status: 400, body: data }),
122
- unauthorized: (msg?: string) => ({ status: 401, body: { message: msg } }),
123
- forbidden: (msg?: string) => ({ status: 403, body: { message: msg } }),
124
- notFound: (msg?: string) => ({ status: 404, body: { message: msg } }),
125
- fail: (msg?: string) => ({ status: 500, body: { message: msg } }),
126
- };
127
- }
128
- ```
129
-
130
- ## Guard 테스트
131
-
132
- ```typescript
133
- describe("Guard", () => {
134
- it("should reject unauthenticated requests", async () => {
135
- const ctx = createMockContext({
136
- user: null, // 인증 안 됨
137
- });
138
-
139
- const response = await usersSlot.guard(ctx);
140
-
141
- expect(response.status).toBe(401);
142
- });
143
-
144
- it("should allow authenticated requests", async () => {
145
- const ctx = createMockContext({
146
- user: { id: "1", role: "user" },
147
- });
148
-
149
- const response = await usersSlot.guard(ctx);
150
-
151
- expect(response).toBeUndefined(); // void = 통과
152
- });
153
- });
154
- ```
155
-
156
- ## 데이터베이스 모킹
157
-
158
- ```typescript
159
- import { mock } from "bun:test";
160
- import * as db from "@/lib/db";
161
-
162
- // 모듈 모킹
163
- mock.module("@/lib/db", () => ({
164
- user: {
165
- findMany: mock(() => [
166
- { id: "1", email: "test@example.com" },
167
- ]),
168
- create: mock((data) => ({ id: "2", ...data.data })),
169
- },
170
- }));
171
- ```
172
-
173
- ## 테스트 실행
174
-
175
- ```bash
176
- # 모든 테스트
177
- bun test
178
-
179
- # 특정 파일
180
- bun test spec/slots/users.slot.test.ts
181
-
182
- # 패턴 매칭
183
- bun test --filter "Users"
184
-
185
- # Watch 모드
186
- bun test --watch
187
-
188
- # 커버리지
189
- bun test --coverage
190
- ```
191
-
192
- Reference: [Bun Test Runner](https://bun.sh/docs/cli/test)
1
+ ---
2
+ title: Unit Test Slot Handlers
3
+ impact: HIGH
4
+ impactDescription: Ensures API correctness
5
+ tags: testing, slot, unit, bun-test
6
+ ---
7
+
8
+ ## Unit Test Slot Handlers
9
+
10
+ **Impact: HIGH (Ensures API correctness)**
11
+
12
+ slot 핸들러를 단위 테스트하여 API 로직의 정확성을 검증하세요.
13
+
14
+ **기본 테스트 구조:**
15
+
16
+ ```typescript
17
+ // spec/slots/users.slot.test.ts
18
+ import { describe, it, expect, beforeEach, mock } from "bun:test";
19
+ import usersSlot from "./users.slot";
20
+ import { createMockContext } from "@/test/helpers";
21
+
22
+ describe("Users Slot", () => {
23
+ describe("GET /users", () => {
24
+ it("should return list of users", async () => {
25
+ // Arrange
26
+ const ctx = createMockContext({
27
+ method: "GET",
28
+ query: { page: "1", limit: "10" },
29
+ });
30
+
31
+ // Act
32
+ const response = await usersSlot.handlers.get(ctx);
33
+
34
+ // Assert
35
+ expect(response.status).toBe(200);
36
+ expect(response.body.users).toBeArray();
37
+ expect(response.body.total).toBeNumber();
38
+ });
39
+
40
+ it("should filter by role", async () => {
41
+ const ctx = createMockContext({
42
+ method: "GET",
43
+ query: { role: "admin" },
44
+ });
45
+
46
+ const response = await usersSlot.handlers.get(ctx);
47
+
48
+ expect(response.status).toBe(200);
49
+ expect(response.body.users.every(u => u.role === "admin")).toBe(true);
50
+ });
51
+ });
52
+
53
+ describe("POST /users", () => {
54
+ it("should create a new user", async () => {
55
+ const ctx = createMockContext({
56
+ method: "POST",
57
+ body: { email: "test@example.com", name: "Test User" },
58
+ });
59
+
60
+ const response = await usersSlot.handlers.post(ctx);
61
+
62
+ expect(response.status).toBe(201);
63
+ expect(response.body.user.email).toBe("test@example.com");
64
+ });
65
+
66
+ it("should return 400 for invalid email", async () => {
67
+ const ctx = createMockContext({
68
+ method: "POST",
69
+ body: { email: "invalid-email", name: "Test" },
70
+ });
71
+
72
+ const response = await usersSlot.handlers.post(ctx);
73
+
74
+ expect(response.status).toBe(400);
75
+ expect(response.body.errors).toBeDefined();
76
+ });
77
+ });
78
+ });
79
+ ```
80
+
81
+ ## Mock Context 헬퍼
82
+
83
+ ```typescript
84
+ // test/helpers.ts
85
+ interface MockContextOptions {
86
+ method?: string;
87
+ params?: Record<string, string>;
88
+ query?: Record<string, string>;
89
+ body?: unknown;
90
+ headers?: Record<string, string>;
91
+ user?: { id: string; role: string } | null;
92
+ }
93
+
94
+ export function createMockContext(options: MockContextOptions = {}) {
95
+ const store = new Map<string, unknown>();
96
+
97
+ // 사용자 설정
98
+ if (options.user) {
99
+ store.set("user", options.user);
100
+ }
101
+
102
+ return {
103
+ req: {
104
+ method: options.method || "GET",
105
+ },
106
+ params: options.params || {},
107
+ query: options.query || {},
108
+ headers: {
109
+ get: (key: string) => options.headers?.[key.toLowerCase()] || null,
110
+ },
111
+
112
+ body: async <T>() => options.body as T,
113
+
114
+ get: <T>(key: string) => store.get(key) as T,
115
+ set: (key: string, value: unknown) => store.set(key, value),
116
+
117
+ // 응답 메서드
118
+ ok: (data: unknown) => ({ status: 200, body: data }),
119
+ created: (data: unknown) => ({ status: 201, body: data }),
120
+ noContent: () => ({ status: 204, body: null }),
121
+ error: (data: unknown) => ({ status: 400, body: data }),
122
+ unauthorized: (msg?: string) => ({ status: 401, body: { message: msg } }),
123
+ forbidden: (msg?: string) => ({ status: 403, body: { message: msg } }),
124
+ notFound: (msg?: string) => ({ status: 404, body: { message: msg } }),
125
+ fail: (msg?: string) => ({ status: 500, body: { message: msg } }),
126
+ };
127
+ }
128
+ ```
129
+
130
+ ## Guard 테스트
131
+
132
+ ```typescript
133
+ describe("Guard", () => {
134
+ it("should reject unauthenticated requests", async () => {
135
+ const ctx = createMockContext({
136
+ user: null, // 인증 안 됨
137
+ });
138
+
139
+ const response = await usersSlot.guard(ctx);
140
+
141
+ expect(response.status).toBe(401);
142
+ });
143
+
144
+ it("should allow authenticated requests", async () => {
145
+ const ctx = createMockContext({
146
+ user: { id: "1", role: "user" },
147
+ });
148
+
149
+ const response = await usersSlot.guard(ctx);
150
+
151
+ expect(response).toBeUndefined(); // void = 통과
152
+ });
153
+ });
154
+ ```
155
+
156
+ ## 데이터베이스 모킹
157
+
158
+ ```typescript
159
+ import { mock } from "bun:test";
160
+ import * as db from "@/lib/db";
161
+
162
+ // 모듈 모킹
163
+ mock.module("@/lib/db", () => ({
164
+ user: {
165
+ findMany: mock(() => [
166
+ { id: "1", email: "test@example.com" },
167
+ ]),
168
+ create: mock((data) => ({ id: "2", ...data.data })),
169
+ },
170
+ }));
171
+ ```
172
+
173
+ ## 테스트 실행
174
+
175
+ ```bash
176
+ # 모든 테스트
177
+ bun test
178
+
179
+ # 특정 파일
180
+ bun test spec/slots/users.slot.test.ts
181
+
182
+ # 패턴 매칭
183
+ bun test --filter "Users"
184
+
185
+ # Watch 모드
186
+ bun test --watch
187
+
188
+ # 커버리지
189
+ bun test --coverage
190
+ ```
191
+
192
+ Reference: [Bun Test Runner](https://bun.sh/docs/cli/test)
@@ -1,117 +1,117 @@
1
- ---
2
- name: Mandu UI
3
- description: UI component library integration and accessibility patterns
4
- metadata:
5
- version: "1.0.0"
6
- author: mandu
7
- globs:
8
- - "components/ui/**/*.tsx"
9
- - "app/**/client.tsx"
10
- ---
11
-
12
- # Mandu UI Skill
13
-
14
- Mandu Island 아키텍처에 UI 컴포넌트 라이브러리를 통합하는 가이드입니다.
15
-
16
- ## 핵심 원칙
17
-
18
- 1. **Headless First**: Radix UI 기반으로 동작과 스타일 분리
19
- 2. **Copy-Paste**: shadcn/ui 방식으로 소유권 유지
20
- 3. **Accessibility**: WCAG 2.1 AA 수준 준수
21
- 4. **Island 호환**: 클라이언트 컴포넌트로 올바르게 분리
22
-
23
- ## 권장 스택
24
-
25
- ```
26
- Primitives: Radix UI (headless, accessible)
27
- Components: shadcn/ui (copy-paste, customizable)
28
- Icons: Lucide React
29
- Utilities: clsx, tailwind-merge, cva
30
- ```
31
-
32
- ## 빠른 시작
33
-
34
- ### shadcn/ui 초기화
35
-
36
- ```bash
37
- bunx shadcn-ui@latest init
38
- ```
39
-
40
- ```
41
- ✔ Would you like to use TypeScript? yes
42
- ✔ Which style would you like to use? Default
43
- ✔ Which color would you like to use as base? Slate
44
- ✔ Where is your global CSS file? app/globals.css
45
- ✔ Do you want to use CSS variables? yes
46
- ✔ Where is your tailwind.config located? tailwind.config.ts
47
- ✔ Configure import alias for components? @/components
48
- ✔ Configure import alias for utils? @/lib/utils
49
- ```
50
-
51
- ### 컴포넌트 추가
52
-
53
- ```bash
54
- # 개별 컴포넌트
55
- bunx shadcn-ui@latest add button
56
- bunx shadcn-ui@latest add card
57
- bunx shadcn-ui@latest add dialog
58
-
59
- # 여러 컴포넌트
60
- bunx shadcn-ui@latest add button card dialog input
61
- ```
62
-
63
- ## Island에서 사용
64
-
65
- ```tsx
66
- // app/user-settings/client.tsx
67
- "use client";
68
-
69
- import { Button } from "@/components/ui/button";
70
- import {
71
- Dialog,
72
- DialogContent,
73
- DialogHeader,
74
- DialogTitle,
75
- DialogTrigger,
76
- } from "@/components/ui/dialog";
77
-
78
- export function UserSettingsIsland() {
79
- return (
80
- <Dialog>
81
- <DialogTrigger asChild>
82
- <Button variant="outline">Settings</Button>
83
- </DialogTrigger>
84
- <DialogContent>
85
- <DialogHeader>
86
- <DialogTitle>User Settings</DialogTitle>
87
- </DialogHeader>
88
- {/* Settings form */}
89
- </DialogContent>
90
- </Dialog>
91
- );
92
- }
93
- ```
94
-
95
- ## 폴더 구조
96
-
97
- ```
98
- components/
99
- ├── ui/ # shadcn/ui 컴포넌트
100
- │ ├── button.tsx
101
- │ ├── card.tsx
102
- │ ├── dialog.tsx
103
- │ └── ...
104
- └── islands/ # 커스텀 Island 컴포넌트
105
- ├── user-menu.tsx
106
- └── ...
107
- ```
108
-
109
- ## 규칙 카테고리
110
-
111
- | Category | Description | Rules |
112
- |----------|-------------|-------|
113
- | Library | 라이브러리 설정 | 2 |
114
- | Accessibility | 접근성 패턴 | 2 |
115
- | Integration | Island 통합 | 2 |
116
-
117
- → 세부 규칙은 `rules/` 폴더 참조
1
+ ---
2
+ name: Mandu UI
3
+ description: UI component library integration and accessibility patterns
4
+ metadata:
5
+ version: "1.0.0"
6
+ author: mandu
7
+ globs:
8
+ - "components/ui/**/*.tsx"
9
+ - "app/**/client.tsx"
10
+ ---
11
+
12
+ # Mandu UI Skill
13
+
14
+ Mandu Island 아키텍처에 UI 컴포넌트 라이브러리를 통합하는 가이드입니다.
15
+
16
+ ## 핵심 원칙
17
+
18
+ 1. **Headless First**: Radix UI 기반으로 동작과 스타일 분리
19
+ 2. **Copy-Paste**: shadcn/ui 방식으로 소유권 유지
20
+ 3. **Accessibility**: WCAG 2.1 AA 수준 준수
21
+ 4. **Island 호환**: 클라이언트 컴포넌트로 올바르게 분리
22
+
23
+ ## 권장 스택
24
+
25
+ ```
26
+ Primitives: Radix UI (headless, accessible)
27
+ Components: shadcn/ui (copy-paste, customizable)
28
+ Icons: Lucide React
29
+ Utilities: clsx, tailwind-merge, cva
30
+ ```
31
+
32
+ ## 빠른 시작
33
+
34
+ ### shadcn/ui 초기화
35
+
36
+ ```bash
37
+ bunx shadcn-ui@latest init
38
+ ```
39
+
40
+ ```
41
+ ✔ Would you like to use TypeScript? yes
42
+ ✔ Which style would you like to use? Default
43
+ ✔ Which color would you like to use as base? Slate
44
+ ✔ Where is your global CSS file? app/globals.css
45
+ ✔ Do you want to use CSS variables? yes
46
+ ✔ Where is your tailwind.config located? tailwind.config.ts
47
+ ✔ Configure import alias for components? @/components
48
+ ✔ Configure import alias for utils? @/lib/utils
49
+ ```
50
+
51
+ ### 컴포넌트 추가
52
+
53
+ ```bash
54
+ # 개별 컴포넌트
55
+ bunx shadcn-ui@latest add button
56
+ bunx shadcn-ui@latest add card
57
+ bunx shadcn-ui@latest add dialog
58
+
59
+ # 여러 컴포넌트
60
+ bunx shadcn-ui@latest add button card dialog input
61
+ ```
62
+
63
+ ## Island에서 사용
64
+
65
+ ```tsx
66
+ // app/user-settings/client.tsx
67
+ "use client";
68
+
69
+ import { Button } from "@/components/ui/button";
70
+ import {
71
+ Dialog,
72
+ DialogContent,
73
+ DialogHeader,
74
+ DialogTitle,
75
+ DialogTrigger,
76
+ } from "@/components/ui/dialog";
77
+
78
+ export function UserSettingsIsland() {
79
+ return (
80
+ <Dialog>
81
+ <DialogTrigger asChild>
82
+ <Button variant="outline">Settings</Button>
83
+ </DialogTrigger>
84
+ <DialogContent>
85
+ <DialogHeader>
86
+ <DialogTitle>User Settings</DialogTitle>
87
+ </DialogHeader>
88
+ {/* Settings form */}
89
+ </DialogContent>
90
+ </Dialog>
91
+ );
92
+ }
93
+ ```
94
+
95
+ ## 폴더 구조
96
+
97
+ ```
98
+ components/
99
+ ├── ui/ # shadcn/ui 컴포넌트
100
+ │ ├── button.tsx
101
+ │ ├── card.tsx
102
+ │ ├── dialog.tsx
103
+ │ └── ...
104
+ └── islands/ # 커스텀 Island 컴포넌트
105
+ ├── user-menu.tsx
106
+ └── ...
107
+ ```
108
+
109
+ ## 규칙 카테고리
110
+
111
+ | Category | Description | Rules |
112
+ |----------|-------------|-------|
113
+ | Library | 라이브러리 설정 | 2 |
114
+ | Accessibility | 접근성 패턴 | 2 |
115
+ | Integration | Island 통합 | 2 |
116
+
117
+ → 세부 규칙은 `rules/` 폴더 참조
@@ -1,23 +1,23 @@
1
- # Mandu UI - Rule Categories
2
-
3
- ## Library
4
- UI 라이브러리 설정 및 통합
5
-
6
- | Impact | Description |
7
- |--------|-------------|
8
- | HIGH | 컴포넌트 일관성, 개발 생산성 |
9
-
10
- ## Accessibility
11
- 웹 접근성 표준 준수
12
-
13
- | Impact | Description |
14
- |--------|-------------|
15
- | HIGH | 법적 요구사항, 사용자 경험 |
16
- | CRITICAL | 키보드 네비게이션, 스크린 리더 지원 |
17
-
18
- ## Integration
19
- Mandu Island과의 통합 패턴
20
-
21
- | Impact | Description |
22
- |--------|-------------|
23
- | MEDIUM | Island 아키텍처에 맞는 컴포넌트 사용 |
1
+ # Mandu UI - Rule Categories
2
+
3
+ ## Library
4
+ UI 라이브러리 설정 및 통합
5
+
6
+ | Impact | Description |
7
+ |--------|-------------|
8
+ | HIGH | 컴포넌트 일관성, 개발 생산성 |
9
+
10
+ ## Accessibility
11
+ 웹 접근성 표준 준수
12
+
13
+ | Impact | Description |
14
+ |--------|-------------|
15
+ | HIGH | 법적 요구사항, 사용자 경험 |
16
+ | CRITICAL | 키보드 네비게이션, 스크린 리더 지원 |
17
+
18
+ ## Integration
19
+ Mandu Island과의 통합 패턴
20
+
21
+ | Impact | Description |
22
+ |--------|-------------|
23
+ | MEDIUM | Island 아키텍처에 맞는 컴포넌트 사용 |