@mandujs/mcp 0.38.11 → 0.39.0-beta.1

package/src/resources/skills/mandu-composition/rules/comp-pattern-children.md

@@ -1,149 +0,0 @@
----
-title: Use Children for Composition Over Render Props
-impact: MEDIUM
-impactDescription: Simpler API, better composition
-tags: composition, children, render-props, pattern
----
-
-## Use Children for Composition Over Render Props
-
-**Impact: MEDIUM (Simpler API, better composition)**
-
-`renderX` props 대신 `children`을 사용하여 컴포지션하세요. 더 선언적이고 유연합니다.
-
-**Incorrect (render props):**
-
-```tsx
-// ❌ renderX props 패턴
-function Modal({
-  renderHeader,
-  renderBody,
-  renderFooter,
-  renderCloseButton,
-}: ModalProps) {
-  return (
-    <div className="modal">
-      <div className="modal-header">
-        {renderCloseButton?.()}
-        {renderHeader?.()}
-      </div>
-      <div className="modal-body">
-        {renderBody?.()}
-      </div>
-      <div className="modal-footer">
-        {renderFooter?.()}
-      </div>
-    </div>
-  );
-}
-
-// 사용 시 복잡함
-<Modal
-  renderHeader={() => <h2>Title</h2>}
-  renderBody={() => <p>Content</p>}
-  renderFooter={() => (
-    <>
-      <Button>Cancel</Button>
-      <Button>Save</Button>
-    </>
-  )}
-  renderCloseButton={() => <CloseButton />}
-/>
-```
-
-**Correct (children + compound):**
-
-```tsx
-// ✅ children과 컴파운드 패턴
-function Modal({ children }: { children: React.ReactNode }) {
-  return <div className="modal">{children}</div>;
-}
-
-function ModalHeader({ children }: { children: React.ReactNode }) {
-  return <div className="modal-header">{children}</div>;
-}
-
-function ModalBody({ children }: { children: React.ReactNode }) {
-  return <div className="modal-body">{children}</div>;
-}
-
-function ModalFooter({ children }: { children: React.ReactNode }) {
-  return <div className="modal-footer">{children}</div>;
-}
-
-function ModalClose({ onClose }: { onClose: () => void }) {
-  return <button onClick={onClose} className="modal-close">×</button>;
-}
-
-export { Modal, ModalHeader, ModalBody, ModalFooter, ModalClose };
-```
-
-**사용:**
-
-```tsx
-// 선언적이고 명확함
-<Modal>
-  <ModalHeader>
-    <ModalClose onClose={handleClose} />
-    <h2>Title</h2>
-  </ModalHeader>
-
-  <ModalBody>
-    <p>Content goes here</p>
-  </ModalBody>
-
-  <ModalFooter>
-    <Button onClick={handleClose}>Cancel</Button>
-    <Button onClick={handleSave}>Save</Button>
-  </ModalFooter>
-</Modal>
-```
-
-## 장점
-
-| render props | children |
-|--------------|----------|
-| 숨겨진 구조 | 명시적 구조 |
-| 함수 호출 문법 | JSX 문법 |
-| 순서가 props에 의존 | 순서를 소비자가 제어 |
-| 어떤 props가 있는지 봐야 함 | 자동완성 지원 |
-
-## Mandu Island에서의 적용
-
-```tsx
-// ❌ 피해야 할 패턴
-<FormIsland
-  renderInput={(value, onChange) => <Input value={value} onChange={onChange} />}
-  renderSubmit={(onSubmit) => <Button onClick={onSubmit}>Submit</Button>}
-  renderError={(error) => <ErrorMessage error={error} />}
-/>
-
-// ✅ 권장 패턴
-<Form.Provider>
-  <Form.Frame>
-    <Form.Input name="email" />
-    <Form.Input name="password" type="password" />
-    <Form.Error />
-    <Form.Submit>Sign In</Form.Submit>
-  </Form.Frame>
-</Form.Provider>
-```
-
-## 언제 Render Props를 사용하나?
-
-render props가 여전히 유용한 경우:
-- 부모가 데이터를 제공하고 자식이 렌더링 방법을 결정 (예: virtualized list)
-- 자식에게 상태를 노출해야 하는 headless 컴포넌트
-
-```tsx
-// Render props가 적합한 예: Virtualized List
-<VirtualList
-  items={items}
-  itemHeight={50}
-  renderItem={(item, index) => (
-    <div key={item.id}>{item.name}</div>
-  )}
-/>
-```
-
-Reference: [Compound Components](https://kentcdodds.com/blog/compound-components-with-react-hooks)

package/src/resources/skills/mandu-composition/rules/comp-state-context-interface.md

@@ -1,148 +0,0 @@
----
-title: Define Generic Context Interface for Dependency Injection
-impact: HIGH
-impactDescription: Enables dependency-injectable state across use-cases
-tags: composition, context, state, typescript, dependency-injection
----
-
-## Define Generic Context Interface for Dependency Injection
-
-**Impact: HIGH (Enables dependency-injectable state across use-cases)**
-
-컴포넌트 context를 위한 제네릭 인터페이스를 `state`, `actions`, `meta` 세 부분으로 정의하세요. 어떤 Provider든 이 인터페이스를 구현할 수 있어, 같은 UI 컴포넌트가 완전히 다른 상태 구현과 작동할 수 있습니다.
-
-**핵심 원칙:** Lift state, compose internals, make state dependency-injectable.
-
-**Incorrect (특정 상태 구현에 결합):**
-
-```tsx
-// ❌ 특정 훅에 강하게 결합
-function ComposerInput() {
-  const { input, setInput } = useChannelComposerState();
-  return <TextInput value={input} onChangeText={setInput} />;
-}
-```
-
-**Correct (제네릭 인터페이스로 의존성 주입):**
-
-```tsx
-// ✅ 어떤 Provider든 구현할 수 있는 제네릭 인터페이스
-interface ComposerState {
-  input: string;
-  attachments: Attachment[];
-  isSubmitting: boolean;
-}
-
-interface ComposerActions {
-  update: (updater: (state: ComposerState) => ComposerState) => void;
-  submit: () => void;
-  addAttachment: (file: File) => void;
-}
-
-interface ComposerMeta {
-  inputRef: React.RefObject<HTMLTextAreaElement>;
-  maxLength?: number;
-}
-
-interface ComposerContextValue {
-  state: ComposerState;
-  actions: ComposerActions;
-  meta: ComposerMeta;
-}
-
-const ComposerContext = createContext<ComposerContextValue | null>(null);
-```
-
-**UI 컴포넌트는 인터페이스만 소비:**
-
-```tsx
-function ComposerInput() {
-  const {
-    state,
-    actions: { update },
-    meta,
-  } = use(ComposerContext)!;
-
-  // 이 컴포넌트는 인터페이스를 구현한 어떤 Provider와도 작동
-  return (
-    <textarea
-      ref={meta.inputRef}
-      value={state.input}
-      maxLength={meta.maxLength}
-      onChange={(e) => update((s) => ({ ...s, input: e.target.value }))}
-    />
-  );
-}
-```
-
-**서로 다른 Provider가 같은 인터페이스 구현:**
-
-```tsx
-// Provider A: 임시 폼을 위한 로컬 상태
-function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
-  const [state, setState] = useState(initialState);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const submit = useForwardMessage();
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update: setState, submit, addAttachment: ... },
-      meta: { inputRef },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-
-// Provider B: 채널을 위한 전역 동기화 상태
-function ChannelProvider({ channelId, children }: Props) {
-  const { state, update, submit } = useGlobalChannel(channelId);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  return (
-    <ComposerContext value={{
-      state,
-      actions: { update, submit, addAttachment: ... },
-      meta: { inputRef, maxLength: 2000 },
-    }}>
-      {children}
-    </ComposerContext>
-  );
-}
-```
-
-**같은 UI가 두 Provider와 모두 작동:**
-
-```tsx
-// ForwardMessageProvider와 작동 (로컬 상태)
-<ForwardMessageProvider>
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ForwardMessageProvider>
-
-// ChannelProvider와 작동 (전역 동기화 상태)
-<ChannelProvider channelId="abc">
-  <Composer.Frame>
-    <Composer.Input />
-    <Composer.Submit />
-  </Composer.Frame>
-</ChannelProvider>
-```
-
-## Mandu Island에서의 활용
-
-```tsx
-// Island 컴포넌트는 인터페이스만 알면 됨
-// slot에서 어떤 Provider를 사용하든 같은 Island 재사용 가능
-
-// spec/slots/forward.slot.ts → ForwardMessageProvider 사용
-// spec/slots/channel.slot.ts → ChannelProvider 사용
-// 둘 다 같은 Composer Island 컴포넌트 사용
-```
-
-UI는 재사용 가능한 조각들이고, 상태는 Provider가 주입합니다. Provider를 바꾸면 UI는 그대로!
-
-Reference: [Context Interface Pattern](https://kentcdodds.com/blog/how-to-use-react-context-effectively)

package/src/resources/skills/mandu-composition/rules/comp-state-lift-state.md

@@ -1,150 +0,0 @@
----
-title: Lift State into Provider for Sibling Access
-impact: HIGH
-impactDescription: Enables state sharing without prop drilling
-tags: composition, state, provider, lift-state
----
-
-## Lift State into Provider for Sibling Access
-
-**Impact: HIGH (Enables state sharing without prop drilling)**
-
-형제 컴포넌트가 상태를 공유해야 할 때, 상태를 Provider로 끌어올리세요. Provider 경계 내의 모든 컴포넌트가 상태에 접근할 수 있습니다.
-
-**Incorrect (prop drilling):**
-
-```tsx
-// ❌ 상태를 여러 단계로 전달
-function ChatPage() {
-  const [message, setMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-
-  return (
-    <div>
-      <MessageList
-        isTyping={isTyping}
-        typingMessage={message}  // prop drilling
-      />
-      <Composer
-        message={message}
-        setMessage={setMessage}
-        setIsTyping={setIsTyping}
-      />
-      <TypingIndicator isTyping={isTyping} />  // prop drilling
-    </div>
-  );
-}
-```
-
-**Correct (Provider로 끌어올리기):**
-
-```tsx
-// ✅ Provider가 상태 관리
-interface ChatContextValue {
-  state: { message: string; isTyping: boolean };
-  actions: { setMessage: (msg: string) => void; setIsTyping: (val: boolean) => void };
-}
-
-const ChatContext = createContext<ChatContextValue | null>(null);
-
-function ChatProvider({ children }: { children: React.ReactNode }) {
-  const [message, setMessage] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-
-  return (
-    <ChatContext value={{
-      state: { message, isTyping },
-      actions: { setMessage, setIsTyping },
-    }}>
-      {children}
-    </ChatContext>
-  );
-}
-
-// 각 컴포넌트가 필요한 것만 가져감
-function MessageList() {
-  const { state } = use(ChatContext)!;
-  return (
-    <div>
-      {messages.map(msg => <Message key={msg.id} {...msg} />)}
-      {state.isTyping && <TypingPreview text={state.message} />}
-    </div>
-  );
-}
-
-function Composer() {
-  const { state, actions } = use(ChatContext)!;
-  return (
-    <textarea
-      value={state.message}
-      onChange={(e) => {
-        actions.setMessage(e.target.value);
-        actions.setIsTyping(e.target.value.length > 0);
-      }}
-    />
-  );
-}
-
-function TypingIndicator() {
-  const { state } = use(ChatContext)!;
-  if (!state.isTyping) return null;
-  return <span>Someone is typing...</span>;
-}
-```
-
-**사용:**
-
-```tsx
-function ChatPage() {
-  return (
-    <ChatProvider>
-      <div>
-        <MessageList />    {/* context에서 상태 읽음 */}
-        <Composer />       {/* context에서 상태 수정 */}
-        <TypingIndicator /> {/* context에서 상태 읽음 */}
-      </div>
-    </ChatProvider>
-  );
-}
-```
-
-## Provider 경계 이해하기
-
-Provider 경계 내라면 시각적 위치와 무관하게 상태 접근 가능:
-
-```tsx
-<ChatProvider>
-  <Dialog>
-    {/* Dialog 내부 */}
-    <Composer.Frame>
-      <Composer.Input />
-    </Composer.Frame>
-
-    {/* Frame 외부지만 Provider 내부! */}
-    <MessagePreview />  {/* ✅ context 접근 가능 */}
-
-    <DialogActions>
-      <SendButton />    {/* ✅ context 접근 가능 */}
-    </DialogActions>
-  </Dialog>
-</ChatProvider>
-```
-
-## Mandu Island에서의 적용
-
-```tsx
-// app/chat/page.tsx
-import { ChatIsland } from "./client";
-
-export default function ChatPage({ data }) {
-  return (
-    <div>
-      <h1>Chat</h1>
-      {/* Island 내부에서 Provider로 상태 관리 */}
-      <ChatIsland initialMessages={data.messages} />
-    </div>
-  );
-}
-```
-
-Reference: [Lifting State Up](https://react.dev/learn/sharing-state-between-components)

package/src/resources/skills/mandu-deployment/SKILL.md

@@ -1,135 +0,0 @@
----
-name: Mandu Deployment
-description: Production deployment patterns for Mandu applications
-metadata:
-  version: "1.0.0"
-  author: mandu
-globs:
-  - "render.yaml"
-  - "Dockerfile"
-  - "docker-compose.yml"
-  - ".github/workflows/*.yml"
-  - "bunfig.toml"
----
-
-# Mandu Deployment Skill
-
-Mandu 앱을 프로덕션 환경에 안전하고 효율적으로 배포하기 위한 가이드입니다.
-
-## Agent Workflow Contract
-
-This skill is a Domain addendum. It must not replace `mandu-agent-workflow`.
-Use it only after `mandu.agent.plan` selects the deploy domain.
-
-Canonical workflow step: `plan -> apply -> verify`.
-
-Preferred MCP tools:
-
-| Step | Tools |
-|------|-------|
-| plan | `mandu.agent.plan`, `mandu.deploy.plan` |
-| apply | `mandu.agent.apply`, `mandu.deploy.compile` |
-| verify | `mandu.agent.verify`, `mandu.deploy.preview` |
-| repair | `mandu.agent.repair` |
-
-Allowed file edits:
-
-- `.mandu/deploy.intent.json`
-- Provider artifacts named in the plan, such as `render.yaml`, `Dockerfile`, `docker-compose.yml`, `fly.toml`, `vercel.json`, or `netlify.toml`
-- CI workflow files only when deploy automation is explicitly requested
-
-Verification command:
-
-```bash
-mandu agent verify --changed --json --write
-```
-
-Common failures:
-
-- Executing a provider deploy before a dry-run or preview step
-- Writing secrets into tracked config
-- Changing provider artifacts without route/deploy intent verification
-
-Repair path:
-
-```bash
-mandu agent repair --from .mandu/agent-verify.json --json
-```
-
-## 핵심 원칙
-
-1. **Bun 네이티브**: Bun 런타임과 번들러를 최대한 활용
-2. **환경 분리**: 개발/스테이징/프로덕션 환경 명확히 구분
-3. **자동화**: CI/CD를 통한 일관된 배포 프로세스
-4. **보안 우선**: 민감 정보는 환경 변수로 관리
-
-## Provider Artifact Examples
-
-Use these examples only after `mandu.agent.plan` selects the deploy domain and
-`mandu.agent.apply` has produced the intended action order.
-
-### Render 배포 (권장)
-
-```yaml
-# render.yaml
-services:
-  - type: web
-    name: mandu-app
-    runtime: node
-    buildCommand: bun install && bun run build
-    startCommand: bun run start
-    envVars:
-      - key: NODE_ENV
-        value: production
-      - key: BUN_ENV
-        value: production
-```
-
-### Docker 배포
-
-```dockerfile
-FROM oven/bun:1.0
-
-WORKDIR /app
-COPY package.json bun.lockb ./
-RUN bun install --frozen-lockfile --production
-
-COPY . .
-RUN bun run build
-
-EXPOSE 3000
-CMD ["bun", "run", "start"]
-```
-
-## 배포 체크리스트
-
-### 빌드 준비
-- [ ] `bun run build` 성공 확인
-- [ ] 번들 크기 최적화 (tree-shaking, code-splitting)
-- [ ] 환경 변수 설정 완료
-
-### 플랫폼 설정
-- [ ] Render/Docker 설정 파일 작성
-- [ ] 헬스체크 엔드포인트 구현
-- [ ] 로깅 설정 완료
-
-### 보안
-- [ ] 민감 정보 환경 변수로 분리
-- [ ] HTTPS 강제 적용
-- [ ] 보안 헤더 설정
-
-### 모니터링
-- [ ] 에러 트래킹 설정
-- [ ] 성능 모니터링 구성
-- [ ] 알림 설정
-
-## 규칙 카테고리
-
-| Category | Description | Rules |
-|----------|-------------|-------|
-| Build | 프로덕션 빌드 최적화 | 2 |
-| Platform | 플랫폼별 배포 설정 | 3 |
-| Container | Docker 컨테이너화 | 2 |
-| CI/CD | 자동화 파이프라인 | 1 |
-
-→ 세부 규칙은 `rules/` 폴더 참조

package/src/resources/skills/mandu-deployment/_sections.md

@@ -1,41 +0,0 @@
-# Mandu Deployment - Rule Categories
-
-## Build
-프로덕션 빌드 최적화 및 번들링 설정
-
-| Impact | Description |
-|--------|-------------|
-| CRITICAL | 빌드 실패 시 배포 불가 |
-| HIGH | 번들 크기, 빌드 시간에 큰 영향 |
-
-## Platform
-배포 플랫폼별 설정 및 최적화
-
-| Impact | Description |
-|--------|-------------|
-| CRITICAL | 플랫폼 호환성 필수 |
-| HIGH | 성능, 비용에 큰 영향 |
-
-## Container
-Docker 컨테이너화 및 오케스트레이션
-
-| Impact | Description |
-|--------|-------------|
-| HIGH | 일관된 배포 환경 보장 |
-| MEDIUM | 개발/프로덕션 환경 일치 |
-
-## CI/CD
-지속적 통합 및 배포 파이프라인
-
-| Impact | Description |
-|--------|-------------|
-| HIGH | 자동화된 품질 보증 |
-| MEDIUM | 배포 속도 및 안정성 향상 |
-
-## Environment
-환경 변수 및 설정 관리
-
-| Impact | Description |
-|--------|-------------|
-| CRITICAL | 보안 민감 정보 보호 |
-| HIGH | 환경별 설정 분리 |

package/src/resources/skills/mandu-deployment/_template.md

@@ -1,38 +0,0 @@
----
-title: Rule Title Here
-impact: CRITICAL | HIGH | MEDIUM | LOW
-impactDescription: One-line description of why this matters
-tags: deployment, tag2, tag3
----
-
-## Rule Title Here
-
-**Impact: LEVEL (Impact description)**
-
-규칙에 대한 간단한 설명.
-
-**설정 예시:**
-
-```yaml
-# 설정 파일 예시
-key: value
-```
-
-**구현 예시:**
-
-```typescript
-// 코드 예시
-```
-
-## 추가 설정
-
-```bash
-# 명령어 예시
-```
-
-## 주의사항
-
-- 첫 번째 주의사항
-- 두 번째 주의사항
-
-Reference: [문서 링크](https://example.com)

package/src/resources/skills/mandu-deployment/metadata.json

@@ -1,13 +0,0 @@
-{
-  "id": "mandu-deployment",
-  "name": "Mandu Deployment",
-  "version": "1.0.0",
-  "description": "Production deployment patterns for Mandu applications",
-  "author": "mandu",
-  "references": [
-    "https://bun.sh/docs/bundler",
-    "https://render.com/docs",
-    "https://docs.docker.com/"
-  ],
-  "abstract": "Mandu 앱을 프로덕션 환경에 배포하기 위한 패턴과 가이드. Bun 빌드 최적화, Render/Docker 배포, CI/CD 파이프라인, 환경 설정을 다룹니다."
-}