nextclaw: Skill for Codex

.agents/skills/mvp-view-logic-decoupling/SKILL.md

mvp-view-logic-decoupling is a skill for Codex from Peiiii/nextclaw. It costs 57 tokens per session (953 once invoked), scanned A, original, MIT.

A guide for separating user-interface code from application logic in frontend apps. It explains where shared state, business actions, and display-only components should live.

In plain words
What is it for?
Use it when designing or refactoring stores, presenters, managers, hooks, Zustand state, streaming flows, or RxJS boundaries.
Why use it?
It helps prevent components and pages from becoming tangled with duplicated state, long prop chains, and complex event handling.

Skill for Codex

Written for Codex: agents/openai.yaml present. Also seen: installed under .agents/ (shared by several agents).

This is Peiiii/nextclaw's own configuration. It tells Codex how to work on nextclaw itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything nextclaw configures →

Reuse

Borrowing it

Nothing to install: this file belongs to Peiiii/nextclaw. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/Peiiii/nextclaw/master/.agents/skills/mvp-view-logic-decoupling/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/Peiiii/nextclaw

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for mvp-view-logic-decoupling

README.md
[![agentmods](https://agentmods.dev/badge/skills/peiiii/nextclaw/mvp-view-logic-decoupling/github.svg)](https://agentmods.dev/skills/peiiii/nextclaw/mvp-view-logic-decoupling)
Your own site
<a href="https://agentmods.dev/skills/peiiii/nextclaw/mvp-view-logic-decoupling"><img src="https://agentmods.dev/badge/skills/peiiii/nextclaw/mvp-view-logic-decoupling/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for mvp-view-logic-decoupling

Your own site · 80×15
<a href="https://agentmods.dev/skills/peiiii/nextclaw/mvp-view-logic-decoupling"><img src="https://agentmods.dev/badge/skills/peiiii/nextclaw/mvp-view-logic-decoupling.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 57 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 953 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00057 $0.00953
Opus 5 $0.00028 $0.00477
Sonnet 5 $0.00011 $0.00191
Haiku 4.5 $0.00006 $0.00095

Measured 9d ago against content hash 8ade02a01689, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

mvp-view-logic-decoupling scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/mvp-view-logic-decoupling/SKILL.md · 54 lines

How it starts

The opening of the file, as written. The whole thing — 54 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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、参数搬运和跳转。

Read the full file on GitHub · 54 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 54 lines · 57 tokens per session scan A 8ade02a01689

Subscribe to this mod's changes

mvp-view-logic-decoupling is a skill published in the GitHub repository Peiiii/nextclaw (256 stars, last pushed today), licensed MIT. It adds 57 tokens to every session and 953 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…

PM-Shawn/Abu-Cowork · 77 tokens

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

PM-Shawn/Abu-Cowork · 64 tokens

cache-components

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). PROACTIVE ACTIVATION: Use this skill automatically when working in Next.js projects that have cacheComponents: true in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best…

sangrokjung/claude-forge · 183 tokens

frontend-code-review

Trigger when the user requests a review of frontend files (e.g., .tsx, .ts, .js). Support both pending-change reviews and focused file reviews while applying the checklist rules.

sangrokjung/claude-forge · 42 tokens

visual-verify-ui

Wraps the browser tool into a dedicated visual QA testing skill for frontend work.

winstonkoh87/Athena-Public · 21 tokens

openclaw-github-dedupe

Investigate a cluster of GitHub issues and PRs, determine canonical candidates, post duplicate/related status, preserve contributor credit, and execute cleanup actions. Supports autonomous mode for provided-link-only closeout, merge/fix follow-through, changelog, and post-merge issue/PR cleanup.

vincentkoc/dotskills · 68 tokens