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.
Installs into .claude/skills of the current project.
Are you the author of Metamask Official Ui Development?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/jiayaoqijia-metamask-official-ui-development)
---
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
---
Strategy context: [Agentic Design System Strategy](../../knowledge/agentic-design-system-strategy.md)
