State and stores

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# State and stores (frontend-skills)

Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go.

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.claude/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go.
globs: **/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte
alwaysApply: false
---

# State and stores (frontend-skills)

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.agents/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
applyTo: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
description: "Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go."
---

# State and stores (frontend-skills)

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.agents/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
trigger: glob
globs: "**/*.js, **/*.jsx, **/*.ts, **/*.tsx, **/*.vue, **/*.svelte"
description: "Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go."
---

# State and stores (frontend-skills)

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.agents/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
trigger: glob
globs: "**/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte"
---

# State and stores (frontend-skills)

Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go.

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.agents/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
paths:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
---

# State and stores (frontend-skills)

Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go.

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.claude/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
inclusion: fileMatch
fileMatchPattern: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
---

# State and stores (frontend-skills)

Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go.

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.kiro/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

---
description: "Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go."
globs: **/*.js,**/*.jsx,**/*.ts,**/*.tsx,**/*.vue,**/*.svelte
alwaysApply: false
---

# State and stores (frontend-skills)

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.trae/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

---
name: "State and stores"
description: "Decides where front-end state lives and writes stores that stay correct - component state, URL, context, Pinia, Zustand, Redux Toolkit, Svelte runes, Angular signals - with stable selectors and no server data copied into stores. Use when adding or reviewing a store, a selector or shared state, fixing stale or looping UI, or asked where some state should go."
globs: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.vue", "**/*.svelte"]
alwaysApply: false
---

# State and stores (frontend-skills)

- Put each value in the narrowest home: derived (computed in render), component, URL, shared parent, context, store; a store only for client state many distant parts share.
- Never copy server data into a store; use the framework loader or a query cache (state/no-server-state-in-store).
- Filters, sort, page, tab and search live in the URL (state/url-state).
- Selectors return existing values, never a new object or array per call; use `useShallow` or `shallowEqual` (state/selector-stable-result).
- In Redux Toolkit or Immer reducers, mutate the draft or return a new state, never both (state/immer-mutate-or-return).
- Use `configureStore` and `createSlice`, not `createStore` (state/redux-toolkit).
- Take Pinia state and getters out with `storeToRefs()`; destructure only actions (state/pinia-store-to-refs).
- Update state immutably outside Immer: new arrays and objects, `signal.update()`, never `push` on a value a framework compares by reference.
- Never keep per-user state in module-level variables of server-rendered code; create stores per request (Pinia, `useState` in Nuxt, context in SvelteKit).

Before larger changes, read the full skill: `.frontend-skills/skills/fe-state/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-state` (State and stores): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-state/SKILL.md`.

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-state` (State and stores): when editing `**/*.js`, `**/*.jsx`, `**/*.ts`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, first read `.frontend-skills/skills/fe-state/SKILL.md`.