ai-agent

Observable-Store

Name: Observable-Store
Author: DanWahlin

Observable Store provides a simple way to manage state in Angular, React, Vue.js and other front-end applications.

631 stars119 forksTypeScriptUpdated 2/6/2026100% free · open source

What it does

Observable Store provides a simple way to manage state in front-end applications such as Angular, React, and Vue.js

When to use it

•When building complex front-end applications with multiple interacting components
•When needing to share state between different parts of the application
•When wanting to simplify state management and reduce boilerplate code

Ready-to-paste prompt

store.setState({ counter: store.getState().counter + 1 }) to increment a counter in the store

Heads up: Make sure to import the correct ObservableStore module for your front-end framework (e.g. @observable-store/angular for Angular) to avoid import errors

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/observable-store && curl -fsSL https://workflowstacks.com/api/skills/observable-store/claude-skill -o ~/.claude/skills/observable-store/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Observable-Store works

Codeflow

Free to inspect

Observable-Store is a medium TypeScript project (~3.6k lines across 77 code files, plus 2 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 9 months ago, MIT license, has a test suite.

Size

Medium codebase

~3.6k lines · 77 code files · 30 min skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

TypeScript 100%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
samples/angular-simple-store/.gitignore
A worked example — copy this to get going

What's in each folder

modules/Sub-packages / plugins22 files

samples/Examples you can copy144 files

.vscode/Editor / agent settings2 files

images/Images & static assets2 files

.github/CI / automation (GitHub Actions)1 files

READMEHas testsDocumentedCI checksExamples includedMIT licenseLast update 9 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/observable-store && curl -fsSL https://workflowstacks.com/api/skills/observable-store/claude-skill -o ~/.claude/skills/observable-store/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

DanWahlin

Language

TypeScript