store-data-structures
LobeHub Zustand store data-shape patterns. Use when designing store state, list/detail splits, normalized maps, reducers, messagesMap, topicsMap, or choosing shared type sources.
npx skills add lobehub/lobehub --skill store-data-structures --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# LobeHub Store Data Structures How to structure data in Zustand stores for fast list rendering, multi-detail caching, and ergonomic optimistic updates. ## Core Principles ### ✅ DO 1. **Separate List and Detail** — different structures for list pages and detail pages 2. **Use Map for Details** — cache multiple detail pages with `Record<string, Detail>` 3. **Use Array for Lists** — simple arrays for list display 4. **Types from `@lobechat/types`** — never use `@lobechat/database` types in stores 5. **Distinguish List and Detail types** — List types may have computed UI fields ### ❌ DON'T 1. **Don't use a single detail object** — can't cache multiple pages 2. **Don't mix List and Detail types** — they have different purposes 3. **Don't use database types** — use types from `@lobechat/types` 4. **Don't use Map for lists** — simple arrays are sufficient --- ## Type Definitions Each entity gets its own file under `@lobechat/types/`. Each file exports two types: - **Detail type** — full entity, including heavy fields (rubrics, content, editor state, …) - **List item type** — a **subset** that excludes heavy fields, may add computed UI fields (counts, timestamps formatted for display) **I
- Core Principles
- ✅ DO
- ❌ DON'T
- Type Definitions
- When to Use Map vs Array
- Use Map + Reducer — for Detail Data
- Use Simple Array — for List Data
- State Structure Pattern
- Reducer Pattern (for Detail Map)
- Data Structure Comparison
- ❌ WRONG — Single Detail Object
- ✅ CORRECT — Separate List and Detail
- Component Usage
- Accessing List Data
What does the store-data-structures skill do?
LobeHub Zustand store data-shape patterns. Use when designing store state, list/detail splits, normalized maps, reducers, messagesMap, topicsMap, or choosing shared type sources.
How do I install it?
Run `npx skills add lobehub/lobehub --skill store-data-structures --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.