fec-state-management

Organize frontend state ownership across React, Vue, Next.js, and Nuxt projects.

21|3|Updated Mar 17, 2026

Search Tags:#frontend #react #vue #forms #persistence #state-management #server-state

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-state-management

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-state-management
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-state-management
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-state-management

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

为前端状态确定清晰归属，避免全局 store 膨胀、重复缓存和派生状态同步错误。

Core Features & Use Cases

分类状态来源以确保每个状态有唯一归属，例如本地UI、表单状态、服务端状态、URL状态、全局客户端状态与浏览器持久化状态等。
保持最小状态，将可由 props、服务器状态、URL 或现有状态推导的值尽量不重复持久化。
React 全局状态方案：优先本地化和按需全局，不跨页面时使用组件状态；跨页面/跨特性时再引入全局 store。
Vue 全局状态方案：使用 Pinia 或现有 store，必要时以提供/注入方式管理跨组件状态。
明确状态边界和迁移步骤，列出状态的所有归属和迁移路径，并在变更时保持行为可验证。

Quick Start

为一个前端应用的 page/feature 部署清晰的状态归属策略，并在初步迭代中实现最小状态和合适的全局状态方案。

Frequently Asked Questions about fec-state-management

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I prevent global store bloat in React and Vue applications?▼

To prevent global store bloat in React and Vue, classify state by origin—local UI, form, server data, URL, or persistence—and assign each a single owner. Use global stores only for cross-page or cross-feature state.

When should I use local component state instead of a global store?▼

Use local component state instead of a global store when state is confined to a single page or UI component. Introduce a global store in React or Pinia in Vue only when state needs to be shared across multiple features or pages.

What is the best way to manage server state and avoid duplicate caching?▼

The best way to avoid duplicate caching is to treat server data as a distinct state category with its own cache, rather than duplicating it in a global client store. Derive values from this server state instead of persisting them separately.

Does this frontend state management approach work with Next.js and Nuxt SSR?▼

Yes, this state management approach works with Next.js and Nuxt by specifying SSR considerations. It defines boundaries for server-side cache and URL state, ensuring hydration and persistence policies behave correctly during server-side rendering.

Why does derived state drift happen and how can I minimize it?▼

Derived state drift happens when calculated values are redundantly persisted and manually synced across stores. Minimize it by keeping state minimal: derive values from props, server state, or URL parameters on the fly instead of storing them.

How do I organize frontend state ownership across different state types?▼

Organize frontend state ownership by categorizing sources—local UI, forms, server data, URL, global client, and browser persistence. Define clear boundaries, derivation rules, and migration paths for each type to maintain a single source of truth.