@mandujs/mcp 0.12.2 → 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,81 +1,81 @@
1
- ---
2
- title: Use Mandu Preset for Full-Stack Projects
3
- impact: HIGH
4
- impactDescription: Recommended architecture preset
5
- tags: guard, preset, architecture
6
- ---
7
-
8
- ## Use Mandu Preset for Full-Stack Projects
9
-
10
- The Mandu preset combines FSD (Feature-Sliced Design) for frontend with Clean Architecture for backend.
11
-
12
- ## Preset Selection Guide
13
-
14
- | Preset | Use Case | Frontend | Backend |
15
- |--------|----------|----------|---------|
16
- | `mandu` | Full-stack projects | FSD | Clean |
17
- | `fsd` | Frontend-focused | FSD | - |
18
- | `clean` | Backend-focused | - | Clean |
19
- | `hexagonal` | Domain-heavy | - | Hexagonal |
20
- | `atomic` | Component libraries | Atomic | - |
21
-
22
- ## Mandu Preset Structure
23
-
24
- ```
25
- src/
26
- ├── app/ # App entry, routing
27
- ├── pages/ # Page components
28
- ├── widgets/ # Complex UI blocks
29
- ├── features/ # Feature modules
30
- │ ├── auth/
31
- │ ├── cart/
32
- │ └── search/
33
- ├── entities/ # Business entities
34
- │ ├── user/
35
- │ ├── product/
36
- │ └── order/
37
- ├── shared/ # Shared utilities
38
- │ ├── ui/ # UI components
39
- │ ├── lib/ # Utility functions
40
- │ ├── api/ # API client
41
- │ └── config/ # Configuration
42
- └── api/ # Backend
43
- ├── application/ # Use cases
44
- ├── domain/ # Business logic
45
- ├── infra/ # Database, external
46
- └── core/ # Core utilities
47
- ```
48
-
49
- ## Configuration
50
-
51
- ```typescript
52
- // mandu.config.ts
53
-
54
- export default {
55
- guard: {
56
- preset: "mandu", // Use mandu preset
57
- rules: {
58
- "LAYER_VIOLATION": "error",
59
- "SLOT_NAMING": "warn",
60
- },
61
- ignore: [
62
- "**/test/**",
63
- "**/*.test.ts",
64
- "**/*.spec.ts",
65
- ],
66
- },
67
- };
68
- ```
69
-
70
- ## Switching Presets
71
-
72
- ```bash
73
- # Use FSD only (frontend project)
74
- bunx mandu guard arch --preset fsd
75
-
76
- # Use Clean only (backend project)
77
- bunx mandu guard arch --preset clean
78
-
79
- # Use Mandu (full-stack, default)
80
- bunx mandu guard arch --preset mandu
81
- ```
1
+ ---
2
+ title: Use Mandu Preset for Full-Stack Projects
3
+ impact: HIGH
4
+ impactDescription: Recommended architecture preset
5
+ tags: guard, preset, architecture
6
+ ---
7
+
8
+ ## Use Mandu Preset for Full-Stack Projects
9
+
10
+ The Mandu preset combines FSD (Feature-Sliced Design) for frontend with Clean Architecture for backend.
11
+
12
+ ## Preset Selection Guide
13
+
14
+ | Preset | Use Case | Frontend | Backend |
15
+ |--------|----------|----------|---------|
16
+ | `mandu` | Full-stack projects | FSD | Clean |
17
+ | `fsd` | Frontend-focused | FSD | - |
18
+ | `clean` | Backend-focused | - | Clean |
19
+ | `hexagonal` | Domain-heavy | - | Hexagonal |
20
+ | `atomic` | Component libraries | Atomic | - |
21
+
22
+ ## Mandu Preset Structure
23
+
24
+ ```
25
+ src/
26
+ ├── app/ # App entry, routing
27
+ ├── pages/ # Page components
28
+ ├── widgets/ # Complex UI blocks
29
+ ├── features/ # Feature modules
30
+ │ ├── auth/
31
+ │ ├── cart/
32
+ │ └── search/
33
+ ├── entities/ # Business entities
34
+ │ ├── user/
35
+ │ ├── product/
36
+ │ └── order/
37
+ ├── shared/ # Shared utilities
38
+ │ ├── ui/ # UI components
39
+ │ ├── lib/ # Utility functions
40
+ │ ├── api/ # API client
41
+ │ └── config/ # Configuration
42
+ └── api/ # Backend
43
+ ├── application/ # Use cases
44
+ ├── domain/ # Business logic
45
+ ├── infra/ # Database, external
46
+ └── core/ # Core utilities
47
+ ```
48
+
49
+ ## Configuration
50
+
51
+ ```typescript
52
+ // mandu.config.ts
53
+
54
+ export default {
55
+ guard: {
56
+ preset: "mandu", // Use mandu preset
57
+ rules: {
58
+ "LAYER_VIOLATION": "error",
59
+ "SLOT_NAMING": "warn",
60
+ },
61
+ ignore: [
62
+ "**/test/**",
63
+ "**/*.test.ts",
64
+ "**/*.spec.ts",
65
+ ],
66
+ },
67
+ };
68
+ ```
69
+
70
+ ## Switching Presets
71
+
72
+ ```bash
73
+ # Use FSD only (frontend project)
74
+ bunx mandu guard arch --preset fsd
75
+
76
+ # Use Clean only (backend project)
77
+ bunx mandu guard arch --preset clean
78
+
79
+ # Use Mandu (full-stack, default)
80
+ bunx mandu guard arch --preset mandu
81
+ ```
@@ -1,80 +1,80 @@
1
- ---
2
- title: Validate Import Paths Against Architecture
3
- impact: HIGH
4
- impactDescription: Prevents architecture violations
5
- tags: guard, validate, import
6
- ---
7
-
8
- ## Validate Import Paths Against Architecture
9
-
10
- Check that all imports respect layer boundaries before committing code.
11
-
12
- ## Valid Import Examples
13
-
14
- ```typescript
15
- // ✅ features/auth/login.ts → entities/user
16
- import { User, createUser } from "@/entities/user";
17
-
18
- // ✅ widgets/header/index.tsx → features/auth
19
- import { useAuth } from "@/features/auth";
20
-
21
- // ✅ pages/home/page.tsx → widgets/header
22
- import { Header } from "@/widgets/header";
23
-
24
- // ✅ Any layer → shared
25
- import { formatDate } from "@/shared/lib/date";
26
- ```
27
-
28
- ## Invalid Import Examples
29
-
30
- ```typescript
31
- // ❌ entities/user → features/auth (upward)
32
- import { useAuth } from "@/features/auth"; // VIOLATION!
33
-
34
- // ❌ shared/lib → entities/user (upward)
35
- import { User } from "@/entities/user"; // VIOLATION!
36
-
37
- // ❌ features/auth → features/cart (same layer cross-import)
38
- import { CartItem } from "@/features/cart"; // VIOLATION!
39
- ```
40
-
41
- ## Checking Imports
42
-
43
- ### CLI
44
-
45
- ```bash
46
- # Check single import
47
- bunx mandu guard check-import \
48
- --from "src/features/auth/index.ts" \
49
- --import "@/entities/user"
50
-
51
- # Check all imports in a file
52
- bunx mandu guard check src/features/auth/index.ts
53
- ```
54
-
55
- ### MCP Tool
56
-
57
- ```typescript
58
- // Check import validity
59
- mandu_check_import({
60
- fromFile: "src/features/auth/index.ts",
61
- importPath: "@/entities/user"
62
- })
63
- // Returns: { valid: true, layer: "features", targetLayer: "entities" }
64
- ```
65
-
66
- ## Fixing Violations
67
-
68
- | Pattern | Problem | Solution |
69
- |---------|---------|----------|
70
- | Upward import | Lower layer needs higher | Move shared logic down or use DI |
71
- | Cross-feature import | Feature A uses Feature B | Extract to shared or create entity |
72
- | Circular import | A → B → A | Restructure or use interfaces |
73
-
74
- ## CI Integration
75
-
76
- ```yaml
77
- # .github/workflows/guard.yml
78
- - name: Check Architecture
79
- run: bunx mandu guard arch --ci
80
- ```
1
+ ---
2
+ title: Validate Import Paths Against Architecture
3
+ impact: HIGH
4
+ impactDescription: Prevents architecture violations
5
+ tags: guard, validate, import
6
+ ---
7
+
8
+ ## Validate Import Paths Against Architecture
9
+
10
+ Check that all imports respect layer boundaries before committing code.
11
+
12
+ ## Valid Import Examples
13
+
14
+ ```typescript
15
+ // ✅ features/auth/login.ts → entities/user
16
+ import { User, createUser } from "@/entities/user";
17
+
18
+ // ✅ widgets/header/index.tsx → features/auth
19
+ import { useAuth } from "@/features/auth";
20
+
21
+ // ✅ pages/home/page.tsx → widgets/header
22
+ import { Header } from "@/widgets/header";
23
+
24
+ // ✅ Any layer → shared
25
+ import { formatDate } from "@/shared/lib/date";
26
+ ```
27
+
28
+ ## Invalid Import Examples
29
+
30
+ ```typescript
31
+ // ❌ entities/user → features/auth (upward)
32
+ import { useAuth } from "@/features/auth"; // VIOLATION!
33
+
34
+ // ❌ shared/lib → entities/user (upward)
35
+ import { User } from "@/entities/user"; // VIOLATION!
36
+
37
+ // ❌ features/auth → features/cart (same layer cross-import)
38
+ import { CartItem } from "@/features/cart"; // VIOLATION!
39
+ ```
40
+
41
+ ## Checking Imports
42
+
43
+ ### CLI
44
+
45
+ ```bash
46
+ # Check single import
47
+ bunx mandu guard check-import \
48
+ --from "src/features/auth/index.ts" \
49
+ --import "@/entities/user"
50
+
51
+ # Check all imports in a file
52
+ bunx mandu guard check src/features/auth/index.ts
53
+ ```
54
+
55
+ ### MCP Tool
56
+
57
+ ```typescript
58
+ // Check import validity
59
+ mandu_check_import({
60
+ fromFile: "src/features/auth/index.ts",
61
+ importPath: "@/entities/user"
62
+ })
63
+ // Returns: { valid: true, layer: "features", targetLayer: "entities" }
64
+ ```
65
+
66
+ ## Fixing Violations
67
+
68
+ | Pattern | Problem | Solution |
69
+ |---------|---------|----------|
70
+ | Upward import | Lower layer needs higher | Move shared logic down or use DI |
71
+ | Cross-feature import | Feature A uses Feature B | Extract to shared or create entity |
72
+ | Circular import | A → B → A | Restructure or use interfaces |
73
+
74
+ ## CI Integration
75
+
76
+ ```yaml
77
+ # .github/workflows/guard.yml
78
+ - name: Check Architecture
79
+ run: bunx mandu guard arch --ci
80
+ ```
@@ -1,91 +1,91 @@
1
- ---
2
- name: mandu-hydration
3
- description: |
4
- Island Hydration pattern for Mandu. Use when creating interactive components,
5
- client-side state, or partial hydration. Triggers on tasks involving
6
- "use client", client.tsx, useState, useEffect, Island, or hydration.
7
- license: MIT
8
- metadata:
9
- author: mandu
10
- version: "1.0.0"
11
- ---
12
-
13
- # Mandu Island Hydration
14
-
15
- Island Hydration은 페이지의 일부분만 클라이언트에서 인터랙티브하게 만드는 기술입니다.
16
- 대부분의 페이지는 정적 HTML로 유지하고, 필요한 부분만 JavaScript를 로드합니다.
17
-
18
- ## When to Apply
19
-
20
- Reference these guidelines when:
21
- - Creating interactive client components
22
- - Adding client-side state to pages
23
- - Implementing partial hydration
24
- - Setting up client-server data flow
25
- - Working with Island communication
26
-
27
- ## Rule Categories by Priority
28
-
29
- | Priority | Category | Impact | Prefix |
30
- |----------|----------|--------|--------|
31
- | 1 | Client Directive | CRITICAL | `hydration-directive-` |
32
- | 2 | Island Structure | HIGH | `hydration-island-` |
33
- | 3 | Hydration Priority | MEDIUM | `hydration-priority-` |
34
- | 4 | Data Flow | MEDIUM | `hydration-data-` |
35
-
36
- ## Quick Reference
37
-
38
- ### 1. Client Directive (CRITICAL)
39
-
40
- - `hydration-directive-use-client` - Add "use client" directive for client components
41
- - `hydration-directive-file-naming` - Use .client.tsx for client component files
42
-
43
- ### 2. Island Structure (HIGH)
44
-
45
- - `hydration-island-setup` - Use Mandu.island() with setup function
46
- - `hydration-island-render` - Separate state logic from render
47
-
48
- ### 3. Hydration Priority (MEDIUM)
49
-
50
- - `hydration-priority-immediate` - Load on page load (critical interactions)
51
- - `hydration-priority-visible` - Load when visible (default)
52
- - `hydration-priority-idle` - Load when browser idle
53
- - `hydration-priority-interaction` - Load on user interaction
54
-
55
- ### 4. Data Flow (MEDIUM)
56
-
57
- - `hydration-data-server` - Access server data with useServerData
58
- - `hydration-data-event` - Communicate between Islands with useIslandEvent
59
-
60
- ## Hydration Strategies
61
-
62
- | Strategy | Description | Use Case |
63
- |----------|-------------|----------|
64
- | `none` | No JavaScript | Pure static pages |
65
- | `island` | Partial hydration (default) | Static + interactive mix |
66
- | `full` | Full hydration | SPA-style pages |
67
-
68
- ## Client Hooks
69
-
70
- ```typescript
71
- import {
72
- useServerData,
73
- useHydrated,
74
- useIslandEvent,
75
- } from "@mandujs/core/client";
76
-
77
- // Access SSR data
78
- const data = useServerData<UserData>("user", defaultValue);
79
-
80
- // Check hydration status
81
- const isHydrated = useHydrated();
82
- ```
83
-
84
- ## How to Use
85
-
86
- Read individual rule files for detailed explanations:
87
-
88
- ```
89
- rules/hydration-directive-use-client.md
90
- rules/hydration-island-setup.md
91
- ```
1
+ ---
2
+ name: mandu-hydration
3
+ description: |
4
+ Island Hydration pattern for Mandu. Use when creating interactive components,
5
+ client-side state, or partial hydration. Triggers on tasks involving
6
+ "use client", client.tsx, useState, useEffect, Island, or hydration.
7
+ license: MIT
8
+ metadata:
9
+ author: mandu
10
+ version: "1.0.0"
11
+ ---
12
+
13
+ # Mandu Island Hydration
14
+
15
+ Island Hydration은 페이지의 일부분만 클라이언트에서 인터랙티브하게 만드는 기술입니다.
16
+ 대부분의 페이지는 정적 HTML로 유지하고, 필요한 부분만 JavaScript를 로드합니다.
17
+
18
+ ## When to Apply
19
+
20
+ Reference these guidelines when:
21
+ - Creating interactive client components
22
+ - Adding client-side state to pages
23
+ - Implementing partial hydration
24
+ - Setting up client-server data flow
25
+ - Working with Island communication
26
+
27
+ ## Rule Categories by Priority
28
+
29
+ | Priority | Category | Impact | Prefix |
30
+ |----------|----------|--------|--------|
31
+ | 1 | Client Directive | CRITICAL | `hydration-directive-` |
32
+ | 2 | Island Structure | HIGH | `hydration-island-` |
33
+ | 3 | Hydration Priority | MEDIUM | `hydration-priority-` |
34
+ | 4 | Data Flow | MEDIUM | `hydration-data-` |
35
+
36
+ ## Quick Reference
37
+
38
+ ### 1. Client Directive (CRITICAL)
39
+
40
+ - `hydration-directive-use-client` - Add "use client" directive for client components
41
+ - `hydration-directive-file-naming` - Use .client.tsx for client component files
42
+
43
+ ### 2. Island Structure (HIGH)
44
+
45
+ - `hydration-island-setup` - Use Mandu.island() with setup function
46
+ - `hydration-island-render` - Separate state logic from render
47
+
48
+ ### 3. Hydration Priority (MEDIUM)
49
+
50
+ - `hydration-priority-immediate` - Load on page load (critical interactions)
51
+ - `hydration-priority-visible` - Load when visible (default)
52
+ - `hydration-priority-idle` - Load when browser idle
53
+ - `hydration-priority-interaction` - Load on user interaction
54
+
55
+ ### 4. Data Flow (MEDIUM)
56
+
57
+ - `hydration-data-server` - Access server data with useServerData
58
+ - `hydration-data-event` - Communicate between Islands with useIslandEvent
59
+
60
+ ## Hydration Strategies
61
+
62
+ | Strategy | Description | Use Case |
63
+ |----------|-------------|----------|
64
+ | `none` | No JavaScript | Pure static pages |
65
+ | `island` | Partial hydration (default) | Static + interactive mix |
66
+ | `full` | Full hydration | SPA-style pages |
67
+
68
+ ## Client Hooks
69
+
70
+ ```typescript
71
+ import {
72
+ useServerData,
73
+ useHydrated,
74
+ useIslandEvent,
75
+ } from "@mandujs/core/client";
76
+
77
+ // Access SSR data
78
+ const data = useServerData<UserData>("user", defaultValue);
79
+
80
+ // Check hydration status
81
+ const isHydrated = useHydrated();
82
+ ```
83
+
84
+ ## How to Use
85
+
86
+ Read individual rule files for detailed explanations:
87
+
88
+ ```
89
+ rules/hydration-directive-use-client.md
90
+ rules/hydration-island-setup.md
91
+ ```
@@ -1,12 +1,12 @@
1
- {
2
- "version": "1.0.0",
3
- "organization": "Mandu Framework",
4
- "date": "February 2026",
5
- "abstract": "Island Hydration 패턴 가이드. 부분 hydration으로 페이지의 일부만 인터랙티브하게 만드는 기술입니다. \"use client\" 지시어, Mandu.island() API, hydration 우선순위, Island 간 통신을 다룹니다.",
6
- "references": [
7
- "https://jasonformat.com/islands-architecture/",
8
- "https://docs.astro.build/en/concepts/islands/",
9
- "https://fresh.deno.dev/docs/concepts/islands"
10
- ],
11
- "tags": ["hydration", "island", "client", "interactive", "mandu"]
12
- }
1
+ {
2
+ "version": "1.0.0",
3
+ "organization": "Mandu Framework",
4
+ "date": "February 2026",
5
+ "abstract": "Island Hydration 패턴 가이드. 부분 hydration으로 페이지의 일부만 인터랙티브하게 만드는 기술입니다. \"use client\" 지시어, Mandu.island() API, hydration 우선순위, Island 간 통신을 다룹니다.",
6
+ "references": [
7
+ "https://jasonformat.com/islands-architecture/",
8
+ "https://docs.astro.build/en/concepts/islands/",
9
+ "https://fresh.deno.dev/docs/concepts/islands"
10
+ ],
11
+ "tags": ["hydration", "island", "client", "interactive", "mandu"]
12
+ }
@@ -1,31 +1,31 @@
1
- # Sections
2
-
3
- This file defines all sections, their ordering, impact levels, and descriptions.
4
- The section ID (in parentheses) is the filename prefix used to group rules.
5
-
6
- ---
7
-
8
- ## 1. Client Directive (hydration-directive)
9
-
10
- **Impact:** CRITICAL
11
- **Description:** "use client" 지시어와 .client.tsx 파일 명명. 클라이언트 컴포넌트 식별에 필수입니다.
12
-
13
- ## 2. Island Structure (hydration-island)
14
-
15
- **Impact:** HIGH
16
- **Description:** Mandu.island() API로 Island 컴포넌트 구조화. setup/render 분리 패턴을 다룹니다.
17
-
18
- ## 3. Hydration Priority (hydration-priority)
19
-
20
- **Impact:** MEDIUM
21
- **Description:** immediate, visible, idle, interaction 우선순위. 초기 로드 성능 최적화에 중요합니다.
22
-
23
- ## 4. Data Flow (hydration-data)
24
-
25
- **Impact:** MEDIUM
26
- **Description:** useServerData, useIslandEvent를 통한 데이터 흐름. 서버-클라이언트, Island 간 통신입니다.
27
-
28
- ## 5. Error Handling (hydration-error)
29
-
30
- **Impact:** LOW
31
- **Description:** errorBoundary, loading 상태 처리. 사용자 경험 향상을 위한 폴백 UI입니다.
1
+ # Sections
2
+
3
+ This file defines all sections, their ordering, impact levels, and descriptions.
4
+ The section ID (in parentheses) is the filename prefix used to group rules.
5
+
6
+ ---
7
+
8
+ ## 1. Client Directive (hydration-directive)
9
+
10
+ **Impact:** CRITICAL
11
+ **Description:** "use client" 지시어와 .client.tsx 파일 명명. 클라이언트 컴포넌트 식별에 필수입니다.
12
+
13
+ ## 2. Island Structure (hydration-island)
14
+
15
+ **Impact:** HIGH
16
+ **Description:** Mandu.island() API로 Island 컴포넌트 구조화. setup/render 분리 패턴을 다룹니다.
17
+
18
+ ## 3. Hydration Priority (hydration-priority)
19
+
20
+ **Impact:** MEDIUM
21
+ **Description:** immediate, visible, idle, interaction 우선순위. 초기 로드 성능 최적화에 중요합니다.
22
+
23
+ ## 4. Data Flow (hydration-data)
24
+
25
+ **Impact:** MEDIUM
26
+ **Description:** useServerData, useIslandEvent를 통한 데이터 흐름. 서버-클라이언트, Island 간 통신입니다.
27
+
28
+ ## 5. Error Handling (hydration-error)
29
+
30
+ **Impact:** LOW
31
+ **Description:** errorBoundary, loading 상태 처리. 사용자 경험 향상을 위한 폴백 UI입니다.