Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add OneKeyHQ/app-monorepo --skill "1k-state-management"
Install specific skill from multi-skill repository
# Description
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.
# SKILL.md
name: 1k-state-management
description: 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.
allowed-tools: Read, Grep, Glob, Write, Edit
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
globalAtomandEAtomNamesfor 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
contextAtomfromcreateJotaiContextfor 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
globalAtomandcontextAtompatterns 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);
}
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.