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

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？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

このリポジトリのすべてを見る

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