skills/itsjavi/vani/vani-global-store

vani-global-store

SKILL.md

Global Store with Subscriptions

Instructions for implementing a small store and wiring components to it.

When to Use

Use this when multiple components need shared state without implicit reactivity by default.

Steps

  1. Implement a store with getState, setState, and subscribe.
  2. In components, call handle.onBeforeMount() to subscribe once.
  3. On store updates, call handle.update() from the subscription.
  4. Keep mutations behind store commands to avoid stale views.

Arguments

  • stateShape - description of the state object (defaults to {})
  • storeFile - path to the store module (defaults to src/store.ts)
  • featureName - feature identifier for naming (defaults to App)

Examples

Example 1 usage pattern:

Create a counter store and a component that reads getState() during render.

Example 2 usage pattern:

Expose a setState command and update UI through subscriptions only.

Output

Example output:

Created: src/store.ts
Updated: src/counter.ts
Notes: handle.onBeforeMount() subscribes once and updates explicitly.

Present Results to User

Summarize store API, subscription wiring, and files changed.

Weekly Installs
6
Repository
itsjavi/vani
First Seen
Jan 24, 2026
Installed on
claude-code4
opencode3
antigravity3
windsurf3
github-copilot3
gemini-cli3