New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Create Store

by ryokun6 in 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…

AGPL-3.0Auto-check passedFrontend & Design

Install Create Store

skills CLI
$ npx skills add ryokun6/ryos --skill create-store -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ryokun6/ryos create-store --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ryokun6/ryos.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/create-store .claude/skills/create-store && rm -rf skills-src

Use ~/.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/

Facts

Skill name
create-store
GitHub stars
1.3k
Token cost
~2.1k tokens
SKILL.md length
600 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
AGPL-3.0

At a glance

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…

  • Adding state management
  • SKILL.md covers Quick Start Checklist, Basic Store, Persisted Config Options and Debounced Storage Adapter…, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Creating a useStore

What it does

Create Store is an agent skill from 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 deletion tombstones. Use when adding state management, creating a useStore, persisting app state, or wiring a store into cloud sync.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering State management. It works with Zustand. The repository describes itself as: ryOS, made with Cursor. The licence is AGPL-3.0.

When your agent uses it

  • Adding state management
  • Creating a useStore
  • Persisting app state
  • Wiring a store into cloud sync

Example prompts

  • “/create-store”

What it can do on your machine

Read from SKILL.md and the folder at commit 4a6e61e. 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 (its code samples are typescript).

    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

Create Store loads about 2.1k tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 600 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~86
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

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

The full file from ryokun6/ryos at commit 4a6e61e, republished under its AGPL-3.0 licence (© ryokun6). 600 words, ~2,080 tokens.

Download SKILL.mdSave it as .claude/skills/create-store/SKILL.md (or your agent's skills folder).
name
create-store
description
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 deletion tombstones. Use when adding state management, creating a use*Store, persisting app state, or wiring a store into cloud sync.

Creating a ryOS Store

ryOS state lives in Zustand stores under src/stores/, named use<Name>Store.ts. Most persist to localStorage via the persist middleware. This skill covers the conventions: persistence, partialize, versioned migrations, the debounced storage adapter, and cloud-sync tombstones.

Quick Start Checklist

- [ ] 1. Create src/stores/use<Name>Store.ts
- [ ] 2. Define State interface (data + actions together)
- [ ] 3. create<State>()(persist((set, get) => ({...}), { name: "ryos:<name>" }))
- [ ] 4. Add version + migrate if the shape may evolve
- [ ] 5. Use the debounced storage adapter for large/hot slices
- [ ] 6. partialize to persist only what's needed
- [ ] 7. If synced: mark deletions as tombstones via useCloudSyncStore
- [ ] 8. Read in non-React code with useXStore.getState()

Basic Store

Keep data and actions in one interface. Actions use set/get. Generate IDs with crypto.randomUUID().

typescript
import { create } from "zustand";
import { persist } from "zustand/middleware";

export interface Item {
  id: string;
  content: string;
  createdAt: number;
  updatedAt: number;
}

interface MyState {
  items: Item[];
  addItem: (content: string) => string;
  updateItem: (id: string, updates: Partial<Omit<Item, "id" | "createdAt">>) => void;
  deleteItem: (id: string) => void;
  clearAll: () => void;
}

export const useMyStore = create<MyState>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (content) => {
        const id = crypto.randomUUID();
        const now = Date.now();
        set((s) => ({ items: [...s.items, { id, content, createdAt: now, updatedAt: now }] }));
        return id;
      },
      updateItem: (id, updates) =>
        set((s) => ({
          items: s.items.map((it) =>
            it.id === id ? { ...it, ...updates, updatedAt: Date.now() } : it
          ),
        })),
      deleteItem: (id) => set((s) => ({ items: s.items.filter((it) => it.id !== id) })),
      clearAll: () => set({ items: [] }),
    }),
    {
      name: "ryos:my-feature", // every app-owned storage key uses `ryos:`
    }
  )
);
Accessing stores
  • In React: const items = useMyStore((s) => s.items); (selector — avoid subscribing to the whole store).
  • Outside React (tool handlers, utils, other stores): useMyStore.getState() / useMyStore.getState().addItem(...).

Persisted Config Options

Inside the second persist argument:

OptionUse
nameRequired. Namespaced storage key, "ryos:<feature>".
partializePersist only the needed fields (omit transient UI/derived state).
version + migrateRequired when the persisted shape can change over time.
storageUse the debounced adapter for large/hot slices (see below).
partialize
typescript
partialize: (state) => ({
  items: state.items,
  // omit transient fields like isLoading, selectedId, etc.
}),
Versioned migrations

Bump version whenever the persisted shape changes; handle older payloads in migrate. Reference: useChatsStore.ts.

typescript
const STORE_VERSION = 2;

// ...inside persist config:
version: STORE_VERSION,
migrate: (persistedState, version) => {
  if (version < 2) {
    // transform old shape → new shape
  }
  return persistedState as MyState;
},

Debounced Storage Adapter (large / hot slices)

createJSONStorage(() => localStorage) re-serializes the entire partialized slice synchronously on every mutation. For large or frequently-written slices (chat history, Files VFS, iPod library), use the write-behind adapter from src/utils/debouncedPersistStorage.ts:

typescript
import { createDebouncedPersistStorage } from "@/utils/debouncedPersistStorage";

// ...inside persist config:
storage: createDebouncedPersistStorage(),

It keeps localStorage authoritative but batches writes per quiet window and flushes on pagehide/tab-hidden. Flows that read raw localStorage keys directly (system reset, manual backup) must call flushDebouncedPersistWrites() first. Small slices (settings, a handful of notes) don't need this — plain name is fine.

IndexedDB Storage Adapter (slices that overflow the localStorage quota)

localStorage has a hard ~5–10MB per-origin quota; a slice that inlines large binary-ish data (e.g. Soundboard recordings store base64 audio in boards) will silently throw QuotaExceededError and lose writes (historically crashing on mobile Safari). For those, persist to IndexedDB via src/utils/indexedDBPersistStorage.ts:

typescript
import { createIndexedDBPersistStorage } from "@/utils/indexedDBPersistStorage";

// ...inside persist config:
storage: createIndexedDBPersistStorage(),

It mirrors the debounced localStorage adapter (write-behind, read-your-writes, shared flushDebouncedPersistWrites()/haltDebouncedPersistWrites() hooks) but hydrates asynchronously. Two consequences:

  • Records live in the persisted_state IndexedDB object store, keyed by the persist name. On first read it transparently migrates the slice's legacy localStorage value, then drops the localStorage key.
  • Because hydration is async, gate any "seed defaults if empty" logic on useXStore.persist.hasHydrated() / onFinishHydration so you don't clobber restored data. Avoid for boot-critical stores read synchronously via getState() before hydration completes.

Manual backup must await settlePersistWrites() (not just the sync flush) before reading the raw persisted_state records, and the store name must be listed in the backup's IndexedDB store set.

Show full SKILL.md (223 more words)Show less
Normalized IndexedDB persistence

If a slice contains a large entity collection or binary payloads, use createSplitIndexedDBPersistStorage from src/utils/splitIndexedDBPersistStorage.ts. It keeps scalar metadata in persisted_state, migrates old monolithic snapshots on hydration, and writes changed entities to dedicated object stores. Add each object store to STORES, bump DB_VERSION, include it in MANUAL_BACKUP_INDEXEDDB_STORES, and cover migration + row deletion in tests. Soundboard, Chats, TextEdit, and Files are the reference implementations.

Cloud Sync: Deletion Tombstones

If the store's data participates in cloud sync, a plain local delete isn't enough — the deletion must be recorded as a tombstone so other devices remove it too. Call useCloudSyncStore.getState().markDeletedKeys(bucket, ids) when deleting (pattern from useStickiesStore.ts):

typescript
import { useCloudSyncStore } from "@/stores/useCloudSyncStore";

deleteItem: (id) => {
  set((s) => ({ items: s.items.filter((it) => it.id !== id) }));
  useCloudSyncStore.getState().markDeletedKeys("stickyNoteIds", [id]);
},

clearAll: () => {
  const ids = get().items.map((it) => it.id);
  useCloudSyncStore.getState().markDeletedKeys("stickyNoteIds", ids);
  set({ items: [] });
},

Use an existing CloudSyncDeletionBucket value (see useCloudSyncStore.ts); only introduce a new bucket when adding a genuinely new synced collection, and wire it through the sync engine. Stores that don't sync skip this entirely.

Conventions Summary

  • One interface holding both state and actions; export use<Name>Store.
  • name: "ryos:<feature>"; partialize to the minimum needed.
  • Add version + migrate for any shape that can evolve.
  • Debounced storage for large/hot slices; plain otherwise.
  • Synced collections must tombstone deletions via useCloudSyncStore.
  • crypto.randomUUID() for ids; track createdAt/updatedAt where useful.
  • Read outside React with getState().

Testing

Store logic (reducers, migrations, tombstone calls) is unit-testable without a server — see the write-tests skill and examples like tests/unit/apps/test-stickies-tool-reducer.test.ts and tests/unit/sync/test-debounced-persist-storage.test.ts. Place new unit suites under tests/unit/<domain>/ (auto-discovered by test:unit).

© ryokun6, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .cursor/skills/create-store of ryokun6/ryos.

Open the folder on GitHubat commit 4a6e61e

Compare with similar skills

Create Store 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.

Create Store compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Create Store this skillryokun6/ryos1.3k—~2.1kAutomated safety check: PassAGPL-3.0
React State Managementinvolvex/youtube-music-cli45613 repos~3kAutomated safety check: PassMIT
LobeHub Data Fetching Layerslobehub/lobehub83k—~1.7kAutomated safety check: PassCustom licence
LobeHub Zustand Store Patternslobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Nextjs15 Initbear2u/my-skills933—~2.4kAutomated safety check: PassNone
Xray UI Devbropines/xray-config-ui-editor119—~942Automated safety check: PassMIT

Similar skills

  • React State Management

    involvex/youtube-music-cli

    Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

    456 GitHub starsUsed in 13 repos~3k tokens
    Frontend & DesignAuto-check passed

  • 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.

    83k GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • LobeHub Zustand Store Patterns

    lobehub/lobehub

    Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • 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

    933 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • 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.

    119 GitHub stars~942 tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • 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.

    22k GitHub stars~1.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from ryokun6/ryos

All 10 skills in this repo

  • Add AI Chat Tool

    ryokun6/ryos

    Add or modify an AI chat tool ("Ask Ryo" capability) in ryOS.

    1.3k GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Create Ryos App

    ryokun6/ryos

    Create new applications for ryOS following established patterns and conventions.

    1.3k GitHub stars~3.7k tokensUpdated today
    Auto-check passed

  • Desktop Release

    ryokun6/ryos

    Cut and publish ryOS Electron desktop releases on GitHub. An agent skill from ryokun6/ryos.

    1.3k GitHub stars~1k tokensUpdated today
    Auto-check: notes

  • Localize

    ryokun6/ryos

    Localize ryOS apps and components by extracting hardcoded strings, replacing with translation keys, and syncing across languages.

    1.3k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • UI Design Styling

    ryokun6/ryos

    Design and style ryOS UI using the current OS theme token system, Tailwind variants, shared primitives, Aqua Glass, dark mode, and accent conventions.

    1.3k GitHub stars~3.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Create Store

What does Create Store do?

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…. Create Store is an agent skill from 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 deletion tombstones.

When should I use Create Store?

Create Store fits situations like: adding state management; creating a useStore; persisting app state; wiring a store into cloud sync.

How do I install Create Store in Claude Code?

Run `npx skills add ryokun6/ryos --skill create-store -a claude-code`. Or copy the skill folder (.cursor/skills/create-store in ryokun6/ryos) into .claude/skills/create-store in your project. Claude Code loads it when a task matches its description.

How do I install Create Store in Codex?

Run `npx skills add ryokun6/ryos --skill create-store -a codex`. Or copy the skill folder (.cursor/skills/create-store in ryokun6/ryos) into .agents/skills/create-store in your project. Codex loads it when a task matches its description.

Can I use Create Store 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 ryokun6/ryos --skill create-store -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/create-store, .gemini/skills/create-store, .github/skills/create-store and .opencode/skills/create-store in your project.

What does Create Store need to run?

SKILL.md names no scripts, command-line tools or credentials: Create Store is instructions for the agent only.

Does Create Store 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 Create Store 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 Create Store use?

Create Store is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Create Store use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Create Store?

Skills that share tags, products or a category with Create Store: React State Management (involvex/youtube-music-cli, 456 stars), LobeHub Data Fetching Layers (lobehub/lobehub, 83k stars), LobeHub Zustand Store Patterns (lobehub/lobehub, 83k stars) and Nextjs15 Init (bear2u/my-skills, 933 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Create Store?

ryokun6 (a GitHub user) maintains it in ryokun6/ryos, which has 1,264 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.

Source: ryokun6/ryos on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.