skills.rest
konamgil
konamgilCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/konamgil/mandu --skill mandu-hydration
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
konamgilkonamgil
46

mandu-testing

Standardize unit, integration, and end-to-end tests for Mandu applications.

Community
Intermediate
lucasfthlucasfth

skill-creator

Design, validate, and iteratively improve Claude Skills with SKILL.md and eval loops.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate
jcsoftdevjcsoftdev

islands-architecture

Implement partial hydration by marking interactive islands on static pages.

Community
Intermediate