React State Management
involvex/youtube-music-cli
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.
Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules.
Install LobeHub Zustand Store Patterns
$ npx skills add lobehub/lobehub --skill zustand -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lobehub/lobehub zustand --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/zustand .claude/skills/zustand && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .claude/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustandType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add lobehub/lobehub --skill zustand -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lobehub/lobehub zustand --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/zustand .agents/skills/zustand && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .agents/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lobehub/lobehub --skill zustand -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lobehub/lobehub zustand --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/zustand .cursor/skills/zustand && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .cursor/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/lobehub/lobehub.git --path .agents/skills/zustand--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lobehub/lobehub --skill zustand -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lobehub/lobehub zustand --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/zustand .gemini/skills/zustand && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .gemini/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install lobehub/lobehub zustandInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add lobehub/lobehub --skill zustand -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/zustand .github/skills/zustand && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .github/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lobehub/lobehub --skill zustand -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lobehub/lobehub zustand --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lobehub/lobehub.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/zustand .opencode/skills/zustand && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "zustand" agent skill from https://github.com/lobehub/lobehub/tree/canary/.agents/skills/zustand into .opencode/skills/zustand/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zustand", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
zustand- GitHub stars
- 83k
- Token cost
- ~1.2k tokens
- SKILL.md length
- 511 words
- Files
- 5 (incl. references)
- Skills in repo
- 50
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules.
- Works in 6 steps: Define the resource (defineReplica /… → Add two state fields per replica: the… → Bind it in the private class:… → …
- Adding a new Zustand slice with public and internal actions
- SKILL.md covers State Shapes and Types, State-Only Stores (default for…, Replica-Backed Server Data and Legacy Stores
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
The skill sets how state is shaped and updated. Shared store types come from `@lobechat/types`, not `@lobechat/database`; list-item types stay light and never extend heavy detail types; whole lists are arrays while cached details are id-keyed maps with per-item loading state. Actions are split into public ones that the UI calls, named with verbs, `internal_*` ones that hold business logic such as optimistic updates, service calls and error handling, and `internal_dispatch*` handlers that call reducers.
A reducer fits object lists and maps, optimistic updates and complex transitions, while a plain `set` is for toggling booleans or updating single values. Delete operations are not made optimistic because recovery is complex. Naming rules cover ID arrays, maps, active ids and init flags. Reference files go deeper on action patterns, data structures with reducer and type guides, and slice organization.
When your agent uses it
- Adding a new Zustand slice with public and internal actions
- Choosing list versus detail state shapes and id-keyed maps
- Implementing an optimistic update with a reducer
Example prompts
- “Add a topic list and detail store with an optimistic create using the reducer pattern.”
- “Split this store's heavy detail type from the list item type.”
- “Rename these actions to follow the internal and dispatch naming convention.”
Requirements
- A LobeHub-style codebase that uses Zustand and `@lobechat/types`
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Define the resource (defineReplica / definePagedReplica) in the store's projection.ts, converting server rows at the boundary.
- Add two state fields per replica: the view (xxxMap: Record) and its bookkeeping (xxxReplica: createReplicaState()).
- Bind it in the private class: createReplicaSlice(resource, { get, set, stateKey: 'xxxReplica', view: recordLens('xxxMap'), … }). When the…
- Read: slice.useSync(params) returns only fetch flags (isHydrated, isValidating, error, revalidate). Data comes from selectors over xxxMap…
- Cold start without a skeleton: useSync hydrates only after the component mounts. For a list that must paint from the local copy, add a…
- Write: slice.optimistic(key, apply, serverCall) or entity.optimistic(id, fn | 'remove', serverCall). A failed call rolls back to the…
What it can do on your machine
Read from SKILL.md and the folder at commit 1e86647. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
LobeHub Zustand Store Patterns loads about 1.2k tokens when it runs, and up to ~4.7k if it reads all its reference files. Until then it costs about 59 tokens; SKILL.md has 511 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 511 words (~1,217 tokens).
“Actions stay out of the Zustand state. Reference: src/store/page.”
- name
- zustand
- user-invocable
- false
Files
SKILL.md and 4 other files (references) in .agents/skills/zustand of lobehub/lobehub.
- SKILL.md
- references/data-structures.md
- references/data-structures/reducer.md
- references/data-structures/types.md
- references/legacy-slices.md
Open the folder on GitHubat commit 1e86647
Compare with similar skills
LobeHub Zustand Store Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| LobeHub Zustand Store Patterns this skilllobehub/lobehub | 83k | — | ~1.2k | Automated safety check: Pass | Custom licence | |
| React State Managementinvolvex/youtube-music-cli | 456 | 13 repos | ~3k | Automated safety check: Pass | MIT | |
| Create Storeryokun6/ryos | 1.3k | — | ~2.1k | Automated safety check: Pass | AGPL-3.0 | |
| Nextjs15 Initbear2u/my-skills | 932 | — | ~2.4k | Automated safety check: Pass | None | |
| Xray UI Devbropines/xray-config-ui-editor | 117 | — | ~942 | Automated safety check: Pass | MIT | |
| Opik Frontend Patternscomet-ml/opik | 22k | — | ~1.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Create Store
ryokun6/ryos
Create or modify ryOS Zustand stores following repo conventions — persist middleware, partialize, versioned migrations, the debounced write-behind storage adapter for large slices, and cloud-sync…
Nextjs15 Init
bear2u/my-skills
A skill your agent uses when user wants to create a new Next.js 15 project (Todo/Blog/Dashboard/E-commerce/Custom domain) with App Router, ShadCN, Zustand, Tanstack Query, and modern Next.js stack
Xray UI Dev
bropines/xray-config-ui-editor
Development and maintenance of Xray Config UI Editor. An agent skill from bropines/xray-config-ui-editor.
Opik Frontend Patterns
comet-ml/opik
Sets the conventions for the Opik React frontend: TanStack Query for data, Zustand for shared state, one-way layer imports and a fix for Google Translate crashes.
Map Editor
webdevcody/survive-the-night-game
Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling.
More from lobehub/lobehub
All 50 skills in this repoLobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Acceptance Evidence for Deliveries
lobehub/lobehub
Verifies a delivery end to end by driving the real product on a CLI, web, desktop or iOS Simulator surface, capturing evidence and publishing a round with the lh CLI.
Git Worktree Cleanup
lobehub/lobehub
Audits stale Git worktrees and branches with a bundled script, classifies each one, and deletes only after you approve the exact candidates.
LobeHub Alint Rule Set Maintenance
lobehub/lobehub
Maintains LobeHub's model-backed alint rule set: writing rules, removing false positives against real code, deciding warn versus error and tracking token cost.
LobeHub Builtin Tool Authoring
lobehub/lobehub
Guides building LobeHub builtin agent tools, from the manifest and execution runtime to executors, chat UI renders and registry wiring.
LobeHub Data Fetching Layers
lobehub/lobehub
Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.
Related
Works with
Categories
Questions about LobeHub Zustand Store Patterns
What does LobeHub Zustand Store Patterns do?
Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules. The skill sets how state is shaped and updated. Shared store types come from `@lobechat/types`, not `@lobechat/database`; list-item types stay light and never extend heavy detail types; whole lists are arrays while cached details are id-keyed maps with per-item loading state.
When should I use LobeHub Zustand Store Patterns?
LobeHub Zustand Store Patterns fits situations like: adding a new Zustand slice with public and internal actions; choosing list versus detail state shapes and id-keyed maps; implementing an optimistic update with a reducer.
How do I install LobeHub Zustand Store Patterns in Claude Code?
Run `npx skills add lobehub/lobehub --skill zustand -a claude-code`. Or copy the skill folder (.agents/skills/zustand in lobehub/lobehub) into .claude/skills/zustand in your project. Claude Code loads it when a task matches its description.
How do I install LobeHub Zustand Store Patterns in Codex?
Run `npx skills add lobehub/lobehub --skill zustand -a codex`. Or copy the skill folder (.agents/skills/zustand in lobehub/lobehub) into .agents/skills/zustand in your project. Codex loads it when a task matches its description.
Can I use LobeHub Zustand Store Patterns in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lobehub/lobehub --skill zustand -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/zustand, .gemini/skills/zustand, .github/skills/zustand and .opencode/skills/zustand in your project.
What does LobeHub Zustand Store Patterns need to run?
SKILL.md names no scripts, command-line tools or credentials: LobeHub Zustand Store Patterns is instructions for the agent only. Our summary lists: A LobeHub-style codebase that uses Zustand and `@lobechat/types`.
Does LobeHub Zustand Store Patterns access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is LobeHub Zustand Store Patterns safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does LobeHub Zustand Store Patterns use?
LobeHub Zustand Store Patterns has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does LobeHub Zustand Store Patterns use?
About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.5k tokens, read only when the agent opens those files.
What are the alternatives to LobeHub Zustand Store Patterns?
Skills that share tags, products or a category with LobeHub Zustand Store Patterns: React State Management (involvex/youtube-music-cli, 456 stars), Create Store (ryokun6/ryos, 1.3k stars), Nextjs15 Init (bear2u/my-skills, 932 stars) and Xray UI Dev (bropines/xray-config-ui-editor, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains LobeHub Zustand Store Patterns?
lobehub (a GitHub organization) maintains it in lobehub/lobehub, which has 83,095 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 10, 2026.
Source: lobehub/lobehub on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.