# Naporin0624 Claude Plugin Hono Electron Suspense Boundary Design

> ---

- Skill: `tomevault-io/naporin0624-claude-plugin-hono-electron-suspense-boundary-de` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/naporin0624-claude-plugin-hono-electron-suspense-boundary-de`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/naporin0624-claude-plugin-hono-electron-suspense-boundary-de/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/naporin0624-claude-plugin-hono-electron-suspense-boundary-de

---

---
name: suspense-boundary-design
description: Design React Suspense boundaries interactively. Use when planning loading states, configuring boundary granularity, or combining with ErrorBoundary.
allowed-tools: Read, Write, Edit, Grep, Glob
---

# Suspense Boundary Design

## Interview Questions

1. **Loading units** - Which components load independently?
2. **Error handling** - Show error UI, retry button, or bubble up?
3. **Loading UI** - Skeleton, spinner, or shimmer?

## Pattern

```tsx
import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary FallbackComponent={ErrorFallback}>
  <Suspense fallback={<Skeleton />}>
    <AsyncComponent />
  </Suspense>
</ErrorBoundary>
```

**Rule: ErrorBoundary wraps Suspense (outside).**

## Best Practices

1. Match skeleton to content size (prevents layout shifts)
2. Avoid nested Suspense unless intentional waterfall
3. Group components sharing data under same boundary

## Related

- [jotai-reactive-atoms/HYBRID-ATOM.md](../jotai-reactive-atoms/HYBRID-ATOM.md) - Suspense with async atoms

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/naporin0624) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->