# 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.

- Skill: `metamask/ui-development` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add metamask/ui-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/metamask/ui-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: metamask (https://skillmd.com/u/metamask)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/metamask/ui-development

---


Strategy context: [Agentic Design System Strategy](../../knowledge/agentic-design-system-strategy.md)