ui-development

UI component development standards for MetaMask clients: the strict design-system-first component hierarchy, availability checks before building custom components, styling with design tokens, and required imports. Use when building, restyling, or reviewing any UI component, or when choosing between a design-system, component-library, or custom component.

Aller à l'installation

Dépôt: MetaMask/skills
Dernière activité de la source: 3 septembre 2026 à 12:53
Langue détectée de SKILL.md: anglais
Étoiles: 24
Forks: 11

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/MetaMask/skills --skill ui-development

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers

3 fichiers

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

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

Tout voir dans ce dépôt

name	ui-development
description	UI component development standards for MetaMask clients: the strict design-system-first component hierarchy, availability checks before building custom components, styling with design tokens, and required imports. Use when building, restyling, or reviewing any UI component, or when choosing between a design-system, component-library, or custom component.
base	true

name	ui-development
description	UI component development standards for MetaMask clients: the strict design-system-first component hierarchy, availability checks before building custom components, styling with design tokens, and required imports. Use when building, restyling, or reviewing any UI component, or when choosing between a design-system, component-library, or custom component.
base	true

ui-development

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt