Agent skill

Mvp View Logic Decoupling

当设计或重构前端 presenter/manager/store、Zustand 持久化、状态归属、view logic、业务组件内聚、prop drilling、复杂 hook/state-flow 或 RxJS 边界时使用。

Install Mvp View Logic Decoupling

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .claude/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .claude/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .agents/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .agents/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .cursor/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .cursor/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/Peiiii/nextclaw.git --path .agents/wiki/skills/frontend/mvp-view-logic-decoupling

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .gemini/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .gemini/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .github/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .github/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install Peiiii/nextclaw mvp-view-logic-decoupling --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/Peiiii/nextclaw.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/wiki/skills/frontend/mvp-view-logic-decoupling .opencode/skills/mvp-view-logic-decoupling && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "mvp-view-logic-decoupling" agent skill from https://github.com/Peiiii/nextclaw/tree/master/.agents/wiki/skills/frontend/mvp-view-logic-decoupling into .opencode/skills/mvp-view-logic-decoupling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mvp-view-logic-decoupling", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: mvp-view-logic-decoupling
GitHub stars: 260
Token cost: ~608 tokens
SKILL.md length: 222 words
Files: 2
Skills in repo: 70
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

当设计或重构前端 presenter/manager/store、Zustand 持久化、状态归属、view logic、业务组件内聚、prop drilling、复杂 hook/state-flow 或 RxJS 边界时使用。

Tasks that involve State management
SKILL.md covers Owner 模型, 状态与装配, 组件内聚 and Effect 边界, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Mvp View Logic Decoupling is an agent skill from Peiiii/nextclaw. 当设计或重构前端 presenter/manager/store、Zustand 持久化、状态归属、view logic、业务组件内聚、prop drilling、复杂 hook/state-flow 或 RxJS 边界时使用。

Its SKILL.md is about 610 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).

It sits in Frontend & Design, covering State management. It works with RxJS and Zustand. The repository describes itself as: A human-centered long-term AI partner—not a task-centered assistant. The licence is MIT.

When your agent uses it

Tasks that involve State management

Example prompts

“/mvp-view-logic-decoupling”

What it can do on your machine

Read from SKILL.md and the folder at commit 297cf0e. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mvp View Logic Decoupling loads about 608 tokens when it runs. Until then it costs about 35 tokens; SKILL.md has 222 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~35
When it runs · the whole SKILL.md, loaded when a task matches: ~608

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Peiiii/nextclaw at commit 297cf0e, republished under its MIT licence (© Peiiii). 222 words, ~608 tokens.

Download SKILL.mdSave it as .claude/skills/mvp-view-logic-decoupling/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: mvp-view-logic-decoupling
description: 当设计或重构前端 presenter/manager/store、Zustand 持久化、状态归属、view logic、业务组件内聚、prop drilling、复杂 hook/state-flow 或 RxJS 边界时使用。

MVP View-Logic Decoupling

Owner 模型

store：状态形状、校验、持久化和原子 setter。
manager/presenter：业务动作、状态转移、跨模块编排、长期协作者和意图级方法。
business component：连接 owner/query，派生 view props。
UI component：纯展示、业务无关、可复用。

页面和 hook 只连接 owner，不自行读取多份状态后拼业务流程。复杂状态机、streaming、跨事件顺序、取消、缓冲、fan-in/out、terminal event 和 retry 优先进入 manager；只有这些复杂性真实存在时才评估 RxJS。

状态与装配

跨导航、刷新或多组件复用的状态进入 singleton Zustand store；需要持久化时使用 persist，payload 小、可序列化、versioned，rehydrate 时校验。不要在组件/provider 手写 storage effect。
每个 store/业务能力有清晰 action owner。store 存状态，manager/presenter 负责业务转移。
app-level presenter 是长期 manager composition root；只有产品 surface 真正独立或根 presenter 过大时才增加少数 top-level presenter。
manager class 由文件导出，实例归 presenter 字段；实例方法使用箭头 class field。
manager 是 presenter 下的平级 owner。稳定 manager 依赖由 presenter constructor 一次装配，并直接 typed 为 manager；不得互相创建或 lifecycle-manage，也不用 bind/install/setXxxManager、callback、handler object 或 local port 做二阶段 wiring。
presenter 不做普通能力的一跳 facade；只有 top-level orchestration、跨 manager workflow 或 app-shell action 才由 presenter 暴露。

组件内聚

业务组件在最接近语义的位置订阅 store、访问 manager、派生 props；页面/layout 只负责区域组合、挂载条件和布局，不组装宽 snapshot/action prop bag。
同组业务状态或动作跨两层传递时，优先让最近业务 container 直接连接 owner。不要把 page selectors 机械搬进 page-owned aggregate hook。
真正可复用的是纯 UI 骨架；不要为“可复用”把业务组件变成宽 props API。
UI component 不读业务 store/query、不调用 manager、不理解领域状态；business component 继续复用 UI primitive。
是否拆展示组件先证明变化原因、复用或主流程可见性收益大于 props、命名和跳转成本，再由本合同确定拆后职责。

Effect 边界

effect 只同步 DOM/browser API、订阅和 runtime resource 等外部系统，不在 render 后触发业务动作。
不把 query 结果镜像进 local state 或业务 store。若确有 query store，只保存 API/SDK 的原始外部事实；selected/current/filtered/label/options 等衍生值在最终组件、manager query 或纯函数现场计算。
语义相等的 no-op 属于写入 owner/manager；字段类别显式建模，不以字段名后缀和超长依赖数组伪装稳定。
effect 若重置多个业务状态，把 transition 收敛为 manager 意图方法；保留的 effect body 只把外部事件交给 owner，不拼 payload 和业务分支。

实现与检查

按 识别领域/状态 -> 决定 store/persist -> 决定 action owner -> presenter 装配 -> 业务组件直连 -> 收缩 effect -> 删除 plumbing 实施。

收尾核对：

UI component 是否仍导入业务 owner；business component/page 是否仍 relay 宽 props；
一个事实或 store 是否有多个 action owner；
manager 是否导出 singleton、创建另一 manager、使用 prototype method 或二阶段 wiring；
presenter 是否只做一跳转发；
effect 是否镜像数据或执行业务动作；
可恢复状态是否 persist，query store 是否保存了派生 view model；
拆分是否只增加 props、参数搬运和跳转。

Files

SKILL.md and 1 other file in .agents/wiki/skills/frontend/mvp-view-logic-decoupling of Peiiii/nextclaw.

SKILL.md
agents/openai.yaml

Open the folder on GitHubat commit 297cf0e

Compare with similar skills

Mvp View Logic Decoupling next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mvp View Logic Decoupling compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Mvp View Logic Decoupling this skillPeiiii/nextclaw	260	—	~608	Automated safety check: Pass	MIT	yesterday
React State Managementinvolvex/youtube-music-cli	456	13 repos	~3k	Automated safety check: Pass	MIT	yesterday
LobeHub Data Fetching Layerslobehub/lobehub	83k	—	~1.7k	Automated safety check: Pass	Custom licence	today
Create Storeryokun6/ryos	1.3k	—	~2.1k	Automated safety check: Pass	AGPL-3.0	today
Nextjs15 Initbear2u/my-skills	933	—	~2.4k	Automated safety check: Pass	None	3 mo ago
LobeHub Zustand Store Patternslobehub/lobehub	83k	—	~1.6k	Automated safety check: Pass	Custom licence	today

Similar skills

React State Management
involvex/youtube-music-cli
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.
456 GitHub starsUsed in 13 repos~3k tokens
Frontend & DesignAuto-check passed
LobeHub Data Fetching Layers
lobehub/lobehub
Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.
83k GitHub stars~1.7k tokensUpdated today
Frontend & DesignAuto-check passed
Create Store
ryokun6/ryos
Create or modify ryOS Zustand stores following repo conventions — persist middleware, partialize, versioned migrations, the debounced write-behind storage adapter for large slices, and cloud-sync…
1.3k GitHub stars~2.1k tokensUpdated today
Frontend & DesignAuto-check passed
Nextjs15 Init
bear2u/my-skills
A skill your agent uses when user wants to create a new Next.js 15 project (Todo/Blog/Dashboard/E-commerce/Custom domain) with App Router, ShadCN, Zustand, Tanstack Query, and modern Next.js stack
933 GitHub stars~2.4k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed
LobeHub Zustand Store Patterns
lobehub/lobehub
Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules.
83k GitHub stars~1.6k tokensUpdated today
Frontend & DesignAuto-check passed
Xray UI Dev
bropines/xray-config-ui-editor
Development and maintenance of Xray Config UI Editor. An agent skill from bropines/xray-config-ui-editor.
119 GitHub stars~942 tokensUpdated 8 days ago
Frontend & DesignAuto-check passed

More from Peiiii/nextclaw

All 70 skills in this repo

Nextclaw Skin Studio
Peiiii/nextclaw
A skill your agent uses when a user wants to browse, apply, inspect, create, refine, switch, or remove a NextClaw skin; wants a personal skin with arbitrary CSS, JavaScript, images, SVG, DOM…
260 GitHub stars~1.8k tokensUpdated yesterday
Auto-check passed
Development Task Telemetry
Peiiii/nextclaw
A skill your agent uses when a development task needs visible phase tracing, task-level or phase-level Token measurement, model/effort comparison, or a deterministic usage report or local dashboard…
260 GitHub stars~802 tokensUpdated yesterday
Auto-check passed
Nextclaw Product Visual Assets
Peiiii/nextclaw
当 NextClaw 产品更新后需要生成、替换、挑毛病或检查官网、GitHub README、用户文档或社交传播中的真实截图、AI 宣传视觉、整页 HTML 宣传预览、社区二维码等对外视觉资产时使用；也用于“更新截图”“重新截一批图”“做宣传页”“生成 campaign 页面”“视觉审稿”“五星挑刺法”或发布前检查视觉资产。普通站点布局开发或只写文章不触发。
260 GitHub stars~801 tokensUpdated yesterday
Auto-check passed
UI UX Pro Max
Peiiii/nextclaw
A skill your agent uses when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset…
260 GitHub stars~2k tokensUpdated yesterday
Auto-check passed
Impeccable
Peiiii/nextclaw
A skill your agent uses when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable…
260 GitHub stars~2.5k tokensUpdated yesterday
Auto-check passed
Nextclaw Skill Resource Hub
Peiiii/nextclaw
Curate NextClaw skill resources, including OpenClaw and community sources.
260 GitHub stars~479 tokensUpdated yesterday
Auto-check passed

Works with

Questions about Mvp View Logic Decoupling

What does Mvp View Logic Decoupling do?

当设计或重构前端 presenter/manager/store、Zustand 持久化、状态归属、view logic、业务组件内聚、prop drilling、复杂 hook/state-flow 或 RxJS 边界时使用。. Mvp View Logic Decoupling is an agent skill from Peiiii/nextclaw.

When should I use Mvp View Logic Decoupling?

Mvp View Logic Decoupling fits situations like: tasks that involve State management.

How do I install Mvp View Logic Decoupling in Claude Code?

Run `npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a claude-code`. Or copy the skill folder (.agents/wiki/skills/frontend/mvp-view-logic-decoupling in Peiiii/nextclaw) into .claude/skills/mvp-view-logic-decoupling in your project. Claude Code loads it when a task matches its description.

How do I install Mvp View Logic Decoupling in Codex?

Run `npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a codex`. Or copy the skill folder (.agents/wiki/skills/frontend/mvp-view-logic-decoupling in Peiiii/nextclaw) into .agents/skills/mvp-view-logic-decoupling in your project. Codex loads it when a task matches its description.

Can I use Mvp View Logic Decoupling in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Peiiii/nextclaw --skill mvp-view-logic-decoupling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mvp-view-logic-decoupling, .gemini/skills/mvp-view-logic-decoupling, .github/skills/mvp-view-logic-decoupling and .opencode/skills/mvp-view-logic-decoupling in your project.

What does Mvp View Logic Decoupling need to run?

SKILL.md names no scripts, command-line tools or credentials: Mvp View Logic Decoupling is instructions for the agent only.

Does Mvp View Logic Decoupling access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Mvp View Logic Decoupling safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mvp View Logic Decoupling use?

Mvp View Logic Decoupling is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mvp View Logic Decoupling use?

About 608 tokens (SKILL.md is roughly 2.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mvp View Logic Decoupling?

Skills that share tags, products or a category with Mvp View Logic Decoupling: React State Management (involvex/youtube-music-cli, 456 stars), LobeHub Data Fetching Layers (lobehub/lobehub, 83k stars), Create Store (ryokun6/ryos, 1.3k stars) and Nextjs15 Init (bear2u/my-skills, 933 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mvp View Logic Decoupling?

Peiiii (a GitHub user) maintains it in Peiiii/nextclaw, which has 260 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on October 8, 2026.

Source: Peiiii/nextclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Mvp View Logic Decoupling

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

MVP View-Logic Decoupling

Owner 模型

状态与装配

组件内聚

Effect 边界

实现与检查

Files

Compare with similar skills

Similar skills

More from Peiiii/nextclaw

Related

Questions about Mvp View Logic Decoupling