mandu-hydration

Implement Mandu island hydration patterns for partial client-side interactivity.

46|4|Updated Jan 21, 2026

Search Tags:#hydration #client #islands #mandu #island-pattern #partial-hydration

Ready to run

npx skills add https://github.com/konamgil/mandu --skill mandu-hydration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mandu-hydration
Source: https://github.com/konamgil/mandu/tree/main/packages/mcp/src/resources/skills/mandu-hydration
Command: npx skills add https://github.com/konamgil/mandu --skill mandu-hydration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Island Hydration enables parts of a Mandu page to become interactive client components while keeping the rest statically rendered. This Skill provides patterns to structure islands, manage client state, and coordinate data flow without compromising accessibility or performance.

Core Features & Use Cases

Partial hydration with Mandu.island() to separate setup and render logic.
Guidelines for using "use client" and proper file naming to enable client components.
Patterns for inter-Island communication and prioritized hydration to optimize load.

Quick Start

Follow the rule set to implement Mandu island hydration in a client-enabled component and verify inter-Island communication.

Frequently Asked Questions about mandu-hydration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is partial hydration in Mandu and how does it work?▼

Use Mandu.island() to separate setup and render logic, apply 'use client' directives, and follow proper file naming conventions to enable client components for partial hydration.

How do I set up inter-island communication in Mandu?▼

Inter-island communication in Mandu coordinates data flow across interactive client components throughout the full lifecycle, from server rendering to interactive rendering, without compromising accessibility or performance.

How do I manage hydration priorities to optimize page load?▼

Hydration priorities in Mandu allow you to optimize load by controlling the order in which interactive islands hydrate, ensuring critical client-side interactivity is established first.

Do I need 'use client' for all Mandu island components?▼

No, 'use client' is specifically for client-enabled components. Guidelines dictate using 'use client' and proper file naming to separate interactive islands from statically rendered Mandu components.

What are the limitations of using Mandu island patterns?▼

Mandu island patterns require managing client state and coordinating data flow carefully. You must enforce YAML frontmatter with name and description, and define optional resources for on-demand support.