perf-rendering

Extension UI render performance: list keys, virtualization, `React.memo`, code splitting, Web Workers, debouncing. Use when a long list stutters, scrolling feels janky, a component re-renders more than it should, or a route loads slowly. Effects go to `perf-hooks-effects`; selectors to `perf-state-management`.

跳到安装

仓库: MetaMask/skills
最近来源活动: 2026年9月3日 18:04
检测到的 SKILL.md 语言: 英语
星标: 24
分支: 11

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/MetaMask/skills --skill perf-rendering

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

2 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

controller-guidelines

Authoring a MetaMask controller: BaseController or not, state metadata (`persist`, `anonymous`, `usedInUi`), `this.update`, the options-bag constructor, typed messenger actions. Use when writing or reviewing a controller, or changing what it persists or exposes to the UI. To wire one in, see `controller-integration`.

2026-09-03

controller-integration

Wire a new or existing controller — whether imported from a `@metamask/*-controller` npm package or defined locally in the repo — into the MetaMask Mobile Engine or the MetaMask Extension background. Use this skill when: adding a controller to Engine or to the extension's messenger-client init, creating a controller init function or messenger, delegating actions/events between controllers, adding a controller to EngineState/Engine.context or to MESSENGER_FACTORIES and the MessengerClient union, or debugging a controller whose state never reaches Redux/the UI or resets on restart.

2026-09-03

perf-hooks-effects

Extension UI hooks and effects: when not to use `useEffect`, dependency arrays, why `JSON.stringify` deps are never the fix, cascading effects, `AbortController` cleanup. Use when an effect loops or fires every render, deps are stringified to force equality, or state lands after unmount. Rendering goes to `perf-rendering`.

2026-09-03

查看这个仓库的全部 Skills

name	perf-rendering
description	Extension UI render performance: list keys, virtualization, `React.memo`, code splitting, Web Workers, debouncing. Use when a long list stutters, scrolling feels janky, a component re-renders more than it should, or a route loads slowly. Effects go to `perf-hooks-effects`; selectors to `perf-state-management`.
base	true

name	perf-rendering
description	Extension UI render performance: list keys, virtualization, `React.memo`, code splitting, Web Workers, debouncing. Use when a long list stutters, scrolling feels janky, a component re-renders more than it should, or a route loads slowly. Effects go to `perf-hooks-effects`; selectors to `perf-state-management`.
base	true

perf-rendering

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills