메뉴
Mandu 개념 설명. Island/Filling/Guard/Contract/Slot/SSR/ISR 등 '뭐야'/'어떻게' 시 자동 호출
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Canonical Mandu agent workflow. Use first in Mandu projects before direct source edits so Codex, Claude Code, Gemini CLI, and other agents follow the same context -> plan -> apply -> verify -> repair loop.
React composition patterns for Mandu applications. Use when designing Island components, managing shared state, or building reusable component APIs. Triggers on compound components, context providers, boolean props, or component architecture tasks.
Production deployment patterns for Mandu applications
File-system based routing for Mandu. Use when creating pages, API routes, layouts, or dynamic routes. Triggers on tasks involving app/ folder, page.tsx, route.ts, layout.tsx, [id], [...slug], or URL patterns.
Architecture guard system for Mandu. Use when checking layer dependencies, enforcing architecture rules, or validating file locations. Triggers on tasks involving architecture, layers, dependencies, or guard commands.
Island Hydration pattern for Mandu. Use when creating interactive components, client-side state, or partial hydration. Triggers on tasks involving "use client", client.tsx, useState, useEffect, Island, or hydration.
| name | mandu-explain |
| description | Mandu 개념 설명. Island/Filling/Guard/Contract/Slot/SSR/ISR 등 '뭐야'/'어떻게' 시 자동 호출 |
Mandu 프레임워크의 핵심 개념 18가지를 설명하는 레퍼런스.
페이지의 대부분은 정적 HTML로 서버 렌더링하고, 인터랙티브한 부분만 JavaScript를 로드하는 패턴.
[Static HTML] [Static HTML] [Island: JS] [Static HTML]
장점: 초기 로딩 속도, 작은 번들 크기, SEO 친화적.
API 핸들러를 체이닝으로 작성하는 API. Express의 미들웨어와 유사하지만 타입 안전.
Mandu.filling().guard(authCheck).get(handler).post(handler)
아키텍처 규칙을 코드 레벨에서 강제하는 시스템. import 방향, 파일 위치, 금지된 의존성을 검사.
bunx mandu guard arch # 전체 프로젝트 검사
Zod 스키마 기반 API 계약. 클라이언트-서버 간 타입을 공유하고 런타임 validation을 수행.
// src/shared/contracts/user.contract.ts
export const CreateUser = z.object({ name: z.string(), email: z.string().email() });
서버에서 렌더링 전에 실행되는 데이터 로더. spec/slots/*.slot.ts에 위치.
// spec/slots/dashboard.slot.ts - page 렌더링 전에 데이터를 fetch
export default Mandu.filling().get(async (ctx) => ctx.ok({ stats: await getStats() }));
모든 페이지를 서버에서 HTML로 렌더링. app/layout.tsx에서 <html>/<head>/<body> 태그 불필요 (자동 생성).
서버에서 HTML을 청크 단위로 스트리밍. 첫 바이트 시간(TTFB)을 단축.
서버 렌더링된 HTML에 JavaScript 인터랙티비티를 부착하는 과정.
Priority: immediate > visible > idle > interaction
파일 시스템 기반 라우팅. app/ 폴더 구조가 URL이 됨.
app/page.tsx -> /app/users/[id]/page.tsx -> /users/:id페이지를 감싸는 공통 UI 래퍼. <html>/<head>/<body> 사용 금지.
export default function Layout({ children }) {
return <div className="min-h-screen">{children}</div>;
}
(name) 괄호로 감싼 폴더는 URL에 영향 없이 라우트를 그룹화.
app/(auth)/login/page.tsx -> /login
app/(auth)/signup/page.tsx -> /signup
AI 에이전트가 프레임워크 도구를 직접 호출하는 인터페이스.
@mandujs/mcp가 50+ 도구를 제공: negotiate, generate, guard, brain 등.
API 엔드포인트의 테스트를 자동 생성하는 엔진.
코드 분석 및 진단 시스템. 프로젝트 구조, 의존성, 성능 이슈를 분석.
Guard가 사용하는 아키텍처 템플릿: mandu, fsd, clean, hexagonal, atomic, cqrs
프로젝트 설정의 무결성을 보장하는 해시 기반 잠금 파일.
Island에서 서버 Slot이 주입한 데이터를 읽는 클라이언트 훅.
const data = useServerData<UserData>("user-profile");
Island 간 통신을 위한 이벤트 시스템.
const { emit, on } = useIslandEvent();
emit("cart:updated", { count: 5 });
app/ UI (pages, layouts, islands)
src/client/ Client-side code
src/server/ Server-side business logic
src/shared/ Shared types, contracts, utils
spec/ Slots, tests
| From | Import |
|---|---|
| Island files | @mandujs/core/client |
| Server files | @mandujs/core |
| Shared code | @/shared/* |
mandu-mcp-index — MCP 도구 108개의 계층 구조 / 상황별 workflow skill 매핑