OneKey State Management

1k-state-management

Jotai state management patterns for OneKey. Use when working with atoms, global state, feature state, or context atoms. Triggers on jotai, atom, state, globalAtom, contextAtom, store, persistence, settings.

diegosouzapw/awesome-omni-skill·0installs62stars

SKILL.md

Full skill instructions

OneKey State Management

Jotai Atom Organization - MANDATORY STRUCTURE

Global State Atoms (for app-wide, persistent state)

Location: packages/kit-bg/src/states/jotai/atoms/
Usage: Global settings, account state, hardware state, currency, etc.
Pattern: Use globalAtom and EAtomNames for standardization
Examples: settings.ts, account.ts, hardware.ts, currency.ts

Feature-Specific State Atoms (for localized functionality)

Location: packages/kit/src/states/jotai/contexts/[feature_name]/atoms.ts
Usage: Feature-specific state that may be shared across components within that feature
Pattern: Use contextAtom from createJotaiContext for consistency

Structure:

contexts/
├── marketV2/
│   ├── atoms.ts     - State definitions
│   ├── actions.ts   - State operations
│   └── index.ts     - Exports
├── swap/
│   ├── atoms.ts
│   ├── actions.ts
│   └── index.ts

FORBIDDEN Atom Patterns

❌ NEVER create atom directories under packages/kit/src/views/
❌ NEVER create standalone atom files in component directories
❌ NEVER mix globalAtom and contextAtom patterns without architectural justification

Atom Selection Guidelines

Use globalAtom when:

State needs persistence across app restarts
State is used across multiple major features
State affects the entire application (settings, authentication, etc.)
Located in packages/kit-bg/src/states/jotai/atoms/

Use contextAtom when:

State is specific to a feature or module
State is temporary/session-based
State is shared within related components of a feature
Located in packages/kit/src/states/jotai/contexts/[name]/atoms.ts

IMPORTANT: These are the ONLY two atom patterns used in the project. Do not create custom atom patterns or use plain Jotai atoms outside of these established structures.

Common Patterns

Creating a Global Atom

// packages/kit-bg/src/states/jotai/atoms/myFeature.ts
import { globalAtom } from '../utils';
import { EAtomNames } from '../atomNames';

export const myFeatureAtom = globalAtom<MyFeatureState>({
  name: EAtomNames.myFeature,
  initialValue: { /* initial state */ },
  persist: true, // if persistence needed
});

Creating a Context Atom

// packages/kit/src/states/jotai/contexts/myFeature/atoms.ts
import { createJotaiContext } from '../../utils';

const { contextAtom, useContextAtom } = createJotaiContext();

export const myFeatureDataAtom = contextAtom<MyData | null>(null);

// Export hook for components
export { useContextAtom };

Using Atoms in Components

import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { myFeatureAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';

function MyComponent() {
  // Read and write
  const [value, setValue] = useAtom(myFeatureAtom);

  // Read only
  const value = useAtomValue(myFeatureAtom);

  // Write only
  const setValue = useSetAtom(myFeatureAtom);
}

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/diegosouzapw/awesome-omni-skill --skill 1k-state-management-majiayu000

View on GitHub

skills/data-ai/1k-state-management-majiayu000/SKILL.md

ui-ux-design-system
Expert in building premium, accessible UI/UX design systems for SaaS apps. Covers design tokens, component architecture with shadcn/ui and Radix, dark mode, glassmorphism, micro-animations, responsive layouts, and accessibility. Use when: ui, ux, design system, shadcn, radix, tailwind, dark mode,...
1 installs
frontend
Defines frontend standards for Next.js App Router, React 19, React Query, shadcn/ui. Use when building components, pages, hooks, or frontend state management.
1 installs
design-ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projec...
1 installs
sql-and-database
SQL writing and database engineering patterns, standards, and procedures. Use for designing database schemas, writing performant SQL queries, normalisation strategies, indexing, joins optimisation, locking mechanics, transactions, query debugging with EXPLAIN, and ORM integration. Applies to Post...
1 installs