letstri/seitu/seitu-overview

Claude Code and agent skill by letstri/seitu

Trust tier 2
  • community
  • ext:[{"type":"context","description":"Custom context provider definitions"}]
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

Module map, mental model, decision tree, SSR — read before other Seitu skills.

Install

npx vskill@latest install letstri/seitu/seitu-overview

Semi-extensibleMentions customization, but needs skill-specific knowledge. Read the extensible skills standard

SKILL.md

Seitu Overview

Seitu is a type-safe reactive primitives library. Framework-agnostic core with React, Vue, Solid, and Svelte bindings. Every primitive shares the same get() / subscribe() API — no actions, no reducers, no context providers.

Module map

Import pathPurpose
seituCore stores, computed, debounce/throttle
seitu/webBrowser persistence (localStorage, sessionStorage, cookies, IndexedDB) and DOM state
seitu/reactuseSubscription hook + Subscription component
seitu/vueuseSubscription composable
seitu/soliduseSubscription primitive (returns Accessor) + Subscription component
seitu/svelteuseSubscription (returns a Svelte Readable store)
seitu/utilsHelpers (repairValueObjectWithDefault)

ESM-only. Node >= 22. React >= 19, Vue >= 3.5, Solid >= 1.9, and Svelte >= 5 are optional peer deps.

Mental model

All primitives implement a consistent interface:

InterfaceMethods
Readable<T>get(): T
Subscribable<T>subscribe(cb, opts?) → unsub
Writable<T>`set(value \updater)`
Clearableclear()

subscribe accepts { immediate?: boolean } to fire the callback with the current value on subscribe.

Composition pattern

  1. Create the primitive at module level (singleton).
  2. Subscribe in a component via useSubscription (React/Vue).
  3. Mutate directly from event handlers with .set() — no dispatch layer.
ts
// stores/settings.ts
import { createWebStorage } from 'seitu/web'
import * as z from 'zod'
export const settings = createWebStorage({
  type: 'localStorage',
  schemas: { theme: z.enum(['light', 'dark']) },
  defaultValues: { theme: 'light' },
})
tsx
// components/Theme.tsx
'use client'
import { useSubscription } from 'seitu/react'
import { settings } from '../stores/settings'
export function Theme() {
  const { theme } = useSubscription(settings)
  return (
    <button onClick={() => settings.set({ theme: theme === 'light' ? 'dark' : 'light' })}>
      {theme}
    </button>
  )
}

Decision tree

What do you need?
│
├─ In-memory state
│  ├─ Simple value → createStore
│  ├─ Schema-validated → createSchemaStore
│  └─ Derived from other sources → createComputed
│
├─ Browser persistence
│  ├─ Single key → createWebStorageValue
│  ├─ SSR must render it (lang, theme) → createCookieValue
│  ├─ Multiple keys → createWebStorage
│  └─ Large/async data → createIndexedDbStorage
│
├─ DOM / browser APIs
│  ├─ CSS media query → createMediaQuery
│  ├─ Online/offline → createIsOnline
│  ├─ Scroll position → createScrollState
│  └─ Element size → createElementSize
│
├─ Rate limiting
│  ├─ On a subscribable → createDebounced / createThrottled
│  └─ On a function → createDebouncedFn / createThrottledFn
│
└─ Framework integration
   ├─ React → useSubscription (hook) or Subscription (component)
   ├─ Vue → useSubscription (composable)
   ├─ Solid → useSubscription (returns Accessor) or Subscription (component)
   └─ Svelte → useSubscription (returns a Readable store, read with $value)

Framework binding

One hook/composable works with any Seitu primitive — stores, web storage, computed, media queries, scroll state, etc.

tsx
const value = useSubscription(store)
const scroll = useSubscription(() => createScrollState({ element: el }), { deps: [el] })
const count = useSubscription(storage, { selector: v => v.count })
vue
const value = useSubscription(store)
const data = useSubscription(computed(() => createWebStorageValue({ ... })))
tsx
// Solid — instance or reactive getter; returns an Accessor, read with value()
const value = useSubscription(store)
const data = useSubscription(() => createWebStorageValue({ ... }))
svelte
<!-- Svelte — instance or factory; returns a Readable store, read with $value -->
<script lang="ts">
  const value = useSubscription(store)
  const data = useSubscription(() => createWebStorageValue({ ... }))
</script>
<div>{$value}</div>

SSR

All seitu/web primitives return defaults when window / navigator is undefined. Safe to create at module level in SSR frameworks (Next.js, Nuxt). Use defaultMatches on createMediaQuery for SSR-specific defaults. When the server must render a persisted value, use createCookieValue with getServerCookies.

Validation & repair

Storage primitives accept Standard Schema validators (Zod, Valibot, ArkType). On invalid stored data, they fall back to defaultValue. Use onValidationError to intercept and repair:

ts
import { repairValueObjectWithDefault } from 'seitu/utils'
const settings = createWebStorageValue({
  type: 'localStorage',
  key: 'settings',
  schema: z.object({ a: z.number(), b: z.string() }),
  defaultValue: { a: 0, b: 'default' },
  onValidationError: repairValueObjectWithDefault,
})

Per-function reference

The seitu skill has a reference file per primitive and framework binding in skills/seitu/references/<slug>.md (e.g. create-store.md). Read this overview first, then the specific reference for the function you need.

To move an existing project onto Seitu (replace storage hooks, matchMedia listeners, small global stores and similar code), follow the seitu-setup skill.

Common Mistakes

[HIGH] Using useState for shared module-level state

Wrong:

ts
function Counter() {
  const [count, setCount] = useState(0)
}

Correct:

ts
const count = createStore(0)
function Counter() {
  const value = useSubscription(count)
}

Seitu primitives are singletons at module scope; useState resets per component instance.

[MEDIUM] Importing seitu/react in non-React code

Wrong:

ts
import { useSubscription } from 'seitu/react'
count.subscribe(console.log)

Correct:

ts
import { createStore } from 'seitu'
const count = createStore(0)
count.subscribe(console.log)

React bindings are optional peer deps; core and web work without React.

[HIGH] Expecting actions or reducers

Wrong:

ts
store.dispatch({ type: 'increment' })

Correct:

ts
store.set(v => v + 1)

Seitu has no dispatch layer — mutate with .set() directly.

See also

Source

src/core/index.ts

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
56
Repository forks
1
7-day trend score
5

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Extension points

  • contextCustom context provider definitions

Learn the extensible skills standard

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/letstri/seitu/seitu-overview/badge)](https://verified-skill.com/skills/letstri/seitu/seitu-overview)

Something wrong with this skill or its page? Tell us.