docs: turn Extension UI skill into an MMDS gateway - #138
Conversation
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Reframe the overlay as a consumer router for Create and Review workflows, with Storybook MCP as the primary source and package or Tailwind fallbacks when the broker is unavailable. Co-authored-by: Cursor <cursoragent@cursor.com>
georgewrmarshall
changed the title
| This is a consumer gateway, not a second MMDS knowledge base. Do not add static | ||
| component inventories, release-specific API lists, or copied component | ||
| documentation here. Storybook MCP and the installed package provide current | ||
| knowledge; this skill provides the Extension workflow and durable constraints. |
There was a problem hiding this comment.
This opening frames the skill as the Extension consumer gateway from the agentic design system strategy: MMDS is the default, Storybook MCP supplies current knowledge, and the overlay only carries durable workflow constraints rather than a copied component catalog.
| This skill owns MMDS alignment for product UI. Generic TypeScript and React | ||
| quality, component file scaffolding, and PR process remain separate concerns and | ||
| may be used alongside it. If a repository-specific scaffolding skill is | ||
| available, use it for file and test setup; do not duplicate its templates here. |
There was a problem hiding this comment.
The skill boundary is intentionally narrow: MMDS alignment for product UI lives here, while coding guidelines, scaffolding, and PR workflow stay orthogonal. That keeps this overlay stable across MMDS releases without duplicating repo-specific templates or review etiquette.
|
|
||
| When reviewing a UI diff, perform an MMDS-specific sub-review. Do not duplicate | ||
| general code-review etiquette or decide PR status; report the design-system | ||
| evidence and leave PR mechanics to the relevant workflow. |
There was a problem hiding this comment.
Review coverage is limited to MMDS-specific evidence on the diff. The skill tells agents to report component, pattern, token, and custom-UI findings with file-level proof, but explicitly avoids owning PR status or generic review mechanics.
| 5. Check for new use of APIs or components marked `@deprecated` in current | ||
| package metadata or documentation. Do not maintain a deprecated-name list in | ||
| this skill; read the current replacement guidance and report a finding when | ||
| no replacement is documented. |
There was a problem hiding this comment.
Deprecated usage is checked against the installed package and current documentation instead of a hardcoded name list in the skill. That keeps deprecation guidance current as MMDS React catches up without another stale inventory to maintain.
| the installed component or token. Treat examples as usage evidence, not as | ||
| a replacement for the installed package contract. | ||
| 5. A generated MMDS release manifest or repository-provided release guidance. | ||
| 6. The MMDS source repository as a last resort. |
There was a problem hiding this comment.
The fallback chain covers the Extension-facing MMDS packages and the consumer Tailwind setup, including the v3 preset versus v4 theme.css split. Repository examples are evidence only; installed package types and generated class availability remain the contract when Storybook MCP is down.
| preconfigured by the agent environment. Do not install, configure, authenticate, | ||
| or invent an endpoint for it from this skill. If the server or a required tool | ||
| is unavailable, or a call fails, state that the broker could not be reached and | ||
| use the fallback below. |
There was a problem hiding this comment.
Storybook MCP is treated as environment-provided infrastructure from Context Forge, not something agents configure inside the skill. When the broker is missing or unreachable, the workflow requires stating that explicitly and switching to the ordered fallback rather than guessing APIs.
| - Preserve accessibility, localization, and keyboard interaction requirements | ||
| shown in the relevant Storybook documentation and stories. | ||
| - Use repository-approved exception documentation when custom UI is necessary; | ||
| do not invent a new annotation format in this skill. |
There was a problem hiding this comment.
Custom UI exceptions defer to repository-approved annotation practice instead of inventing a new @mmds-exception format here. That leaves room for the strategy’s proposed exception model to land in Extension code or a future skill without this gateway getting ahead of product conventions.
Give agents a discoverable strategy entry point in the skills repo that links to the canonical Google Doc, FigJam board, and related tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
3 participants
Description
Refines the MetaMask Extension overlay for
ui-developmentto match the MetaMask Agentic Design System strategy: the skill becomes a thin, stable consumer gateway rather than a hand-written MMDS knowledge copy that goes stale after each release.The overlay now:
storybook-broker-mcp(list-all-documentation,get-documentation,get-documentation-for-story).@metamask/design-system-reacttypes, Extension-facing styling packages (@metamask/design-system-tailwind-preset,@metamask/design-tokens), the consumer Tailwind configuration, repository usage examples, release guidance, and the MMDS source repo.ui/pages/design-system/design-system.stories.tsxreference and avoids static component inventories, deprecated-name lists, or MCP setup instructions in the skill itself.This implements the Foundation “refine MetaMask Skills into a thin router” work from the agentic design system strategy. Storybook MCP remains the preferred delivery mechanism for current MMDS guidance; the skill encodes the Extension workflow and boundaries.
Strategy context:
Related MMDS work: MetaMask/metamask-design-system#1465
Tracking:
Type of Change
Skill Details (if adding a new skill)
Provider Name:
Skill Name:
Brief Description:
Checklist
Testing
node .github/scripts/lint-skill-entry.mjs— 0 errorsnode --test test/*.test.mjs— 65 passedgit diff --checkAdditional Context
Follow-up work deferred from this PR:
design-systemdomain andmetamask-design-systemmaintainer overlay for MMDS authoring workflowscoding-guidelinesExtension overlay