Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Keep a new public method or other contract change on the brief and spec path when the objection is that another package should own the edit. Put that objection in the brief.
- Skip a planning brief for an unkept spike or POC and for routine CI-only work, including a workflow edit that changes how jobs or E2E launch. A CI change that is a new design, a contract or API change, or multi-surface work still stops for a brief and a spec. For a revert of a merged pull request or commit, name the target and files, then ask one yes/no, and name the risk when security or privacy is involved. Recommend a spec for a new design, a contract or API change, or multi-surface work even when the ask is fully specified or single-file; any other fully specified ask gets one line of scope and one yes/no instead of a brief, unless it touches auth, secrets, logs or exports of state, permissions, keyring or vault, migrations, or persisted state, which still gets a brief. Always read the installed skill catalog, including for reverts and fully specified asks.
- Document confirmed Appium interaction-stability patterns in `testing/mobile-testing` (`references/appium-e2e.md`): child readiness, fresh interactive queries, shared open retries, virtualized-list proof, native control state, action postconditions, and single assertions for short-lived alerts.
- Make the MetaMask Extension `ui/ui-development` overlay and the agentic design system strategy work without Storybook MCP. Agents read the installed `@metamask/design-system-react` types and component READMEs at the MMDS release tag, with a pinned reference for `@metamask/design-system-react@0.49.0` and `@metamask/design-system-tailwind-preset@0.15.0` (MMDS release v77.0.0, `references/mmds-react.md`) covering exports, key props, Tailwind classes, the type scale, deprecations, and hero typography. Storybook MCP stays an optional extra. During an incremental migration, alias a legacy `ui/components/component-library` import with a `Legacy` prefix when its name clashes with `@metamask/design-system-react`, and keep the MMDS name plain.

## [0.3.1]

Expand Down
25 changes: 13 additions & 12 deletions domains/ui/knowledge/agentic-design-system-strategy.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,40 +25,41 @@ This applies wherever UI is built and reviewed: Cursor and other coding agents,

## Core model

One knowledge layer, three deliveries. MMDS holds tokens, components, and patterns. Tools are delivery mechanisms only — do not maintain separate copies of MMDS guidance inside each tool.
One knowledge layer, several deliveries. MMDS holds tokens, components, and patterns. Tools are delivery mechanisms only; skills keep a small, release-pinned summary and link to MMDS for everything else.

| Moment | What happens |
| :---- | :---- |
| **Create** | Agents read current MMDS guidance before building — through skills, Storybook MCP, Figma MCP, and Code Connect. |
| **Create** | Agents read current MMDS guidance before building — the installed package types, component READMEs at the release tag, and the skill's pinned reference; Figma MCP, Code Connect, and Storybook MCP when available. |
| **Review** | Deterministic checks (ESLint, fitness functions) plus agentic review for judgment calls. |
| **Audit** | Recurring queries across existing screens to find drift, custom UI, and documentation gaps. |

## Producer / consumer split

- **Consumer skills** (`ui-development` repo overlays) route agents to current MMDS guidance for product UI create and review workflows.
- **Consumer skills** (`ui-development` repo overlays) give agents the product UI create and review workflows, plus a release-pinned MMDS reference per platform (`references/mmds-react.md`, `references/mmds-react-native.md`).
- **Provider skills** (future `design-system` domain) support MMDS authoring, release, and documentation maintenance.
- **Storybook MCP** (`storybook-broker-mcp`) is the preferred delivery mechanism for current MMDS knowledge in coding agents. Package exports and consumer Tailwind configuration are the ordered fallback when the broker is unavailable.
- **Baseline delivery** needs no MCP server: the installed `@metamask/design-system-*` package (exports and `.d.cts` types), component READMEs on GitHub at the release tag (`https://github.com/MetaMask/metamask-design-system/blob/<tag>/packages/<package>/src/components/<Component>/README.md[x]`), and the consumer's Tailwind configuration.
- **Storybook MCP** (`storybook-broker-mcp`, served through Context Forge) is an optional extra. It depends on Context Forge being up, so no skill may require it. When it responds, agents may use it for pattern docs and story examples; when it does not, they carry on with the baseline sources without blocking.

## Foundation workstreams

1. **Thin consumer gateway skills** — Refine `ui-development` overlays into stable routers (Create + Review) instead of static component inventories.
2. **Storybook MCP integration** — Treat Context Forge's preconfigured `storybook-broker-mcp` as the primary source; document explicit fallback behavior without embedding setup instructions in skills.
3. **MMDS source and broker readiness** — Keep Storybook documentation, exports, and broker surfaces current for agent consumption.
1. **Consumer gateway skills** — Keep `ui-development` overlays as Create + Review routers with a small, release-pinned reference (versions, inventory, key props, deprecations, tokens), refreshed on each MMDS release.
2. **Storybook MCP integration** — Keep Context Forge's `storybook-broker-mcp` usable as an optional source; skills document it as optional and never embed setup instructions.
3. **MMDS source and broker readiness** — Keep component READMEs, exports, JSDoc, and Storybook current for agent consumption. README drift from the types (for example a documented prop that does not exist) is a documentation bug.
4. **Automated alignment checks** — Extend CI and review workflows to validate tokens, components, and patterns where feasible.
5. **Provider-side skills** — Add a `design-system` domain and `metamask-design-system` maintainer overlay in the skills repo.

## Horizon

| Horizon | Focus |
| :---- | :---- |
| **Now** | Build the shared knowledge path and establish quality baselines — point MetaMask Skills to Storybook MCP, begin Figma/React/React Native alignment, expand Code Connect, audit MMDS and product usage. |
| **Now** | Build the shared knowledge path and establish quality baselines — point MetaMask Skills at release-pinned MMDS docs that work without MCP, keep Storybook MCP as an optional extra, begin Figma/React/React Native alignment, expand Code Connect, audit MMDS and product usage. |
| **Next** | Operationalize Create, Review, and Audit in normal delivery — enable the gateway by default in Extension and Mobile, run MMDS-focused review, load relevant skills per UI PR, run recurring audits. |
| **Later** | Build a trusted feedback and remediation loop — agents create issues or PRs for alignment gaps, automate low-risk fixes, retain human approval for judgment calls. |

## Principles for skills

- MMDS is the default; intentional documented custom UI is allowed.
- Skills are gateways and durable constraints, not second copies of MMDS documentation.
- Do not maintain static component inventories, deprecated-name lists, or MCP setup instructions in consumer skills.
- Query current Storybook guidance before choosing components, APIs, tokens, or patterns.
- When Storybook MCP is unavailable, follow the ordered fallback defined in the relevant repo overlay.
- Skills are gateways and durable constraints. A skill may carry a small reference pinned to a named MMDS release (versions, inventory, key props, deprecations, tokens), but not copies of full component READMEs.
- Every pinned reference names the package versions and release tag it was synced to, and says that the installed package wins when they differ.
- Skills must work with no MCP server. Do not make Storybook MCP, Figma MCP, or any other server a precondition, and do not put MCP setup instructions in consumer skills.
- Read the installed package types and the README at the matching release tag before choosing components, APIs, tokens, or patterns. When a README and the types disagree, the types win.
Loading
Loading