[georgewrmarshall]

Description

This brings the MetaMask Mobile UI skills up to date with the latest published MetaMask Design System (MMDS) release. It also removes their dependency on Storybook MCP, which goes down whenever Context Forge does. Extension is handled in #213. Neither PR depends on the other, and the two merge cleanly in either order.

Synced to

Package	Version	Mobile main pin
@metamask/design-system-react-native	0.54.0	^0.54.0
@metamask/design-system-twrnc-preset	0.13.0	^0.13.0
@metamask/design-tokens	12.0.0	^12.0.0
@metamask/design-system-shared	0.43.0	transitive

MMDS release/tag: v77.0.0 (2026-10-28, commit 697dc5dc). Every fact was checked against the published npm tarballs (dist/*.d.cts) and the source at that tag, not against main. Stable doc links point at blob/v77.0.0/....

Release notes I was asked to verify, checked against the code

Claim	What the code says
MM Sans and FontFamily.Accent were removed	Not in a published release yet. Removed on MMDS main in #1645 (merged after v77.0.0). In 0.54.0 / shared 0.43.0, FontFamily.Accent and the twrnc font-accent-* classes still exist. The skills treat Accent as "do not use; it breaks on the next upgrade".
Grotzec Cond Bold was added as FontFamily.Hero	Mostly right. FontFamily.Hero already existed (MM Poly) and was switched to Grotzec Cond Bold in RN 0.52.0 (#1586). Text forces font-hero-bold for Hero whatever fontWeight says, and font-hero-regular was removed.
Hero/amount variants such as TextVariant.AmountDisplayLg	AmountDisplayLg predates Grotzec. It is a size variant, not hero-only. 0.52.0 changed it to 48/56 and added TextVariant.DisplayXl (60/75). Hero comes from fontFamily, not the variant.
System font fallback for el, hi, ja, ko, ru, vi, zh	Confirmed, for marketing titles only. Mobile's MarketingMomentTitle.utils.ts allowlists de, en, es, fr, id, pt, tl, tr. Mobile ships 15 languages, and the other seven are exactly el, hi, ja, ko, ru, vi, zh. Those get the iOS System / Android Roboto face at weight 700, one Display size down. Formatted numbers are not gated.

Changes per skill

ui/ui-development, repos/metamask-mobile.md

• Adds a "Where current guidance comes from" order: installed package types, then the README at the release tag, then the pinned reference, then Mobile usage. Storybook MCP is optional and never blocks.
• Removes the deprecated ButtonHero and ButtonFilter from the "required imports" list and adds them, plus FontFamily.Accent, to the conversion table and review checklist.
• Fixes the pressed-state pattern. In 0.54.0, ButtonBase.style is StyleProp<ViewStyle>, so style={({ pressed }) => ...} fails type-checking. Pressed styles now use twClassName={(pressed) => ...}.
• Adds a Typography section: all 15 variants, Hero rules (one per view, no weight, AmountDisplayLg for the primary amount, MarketingMomentTitle for translated headlines), and the Latin-only locale fallback.
• Adds the breaking changes agents get wrong: TextFieldSearch requires inputAccessibilityLabel (0.54.0), and Card requires isInteractive to be pressable (0.50.0). Also adds toast() usage (Mobile mounts <Toaster /> once) and notes that the sheet surface is bg-elevated1 by default.
• Notes that Box has no borderRadius prop, even though its README documents one.

ui/ui-development, new references/mmds-react-native.md

• A pinned quick reference: synced versions, the export inventory by area, deprecations, recent breaking changes, key props for the ~25 most-used components, twrnc preset classes and tokens, the type scale with weights, and hero typography (decision rules, locale and glyph caveats, code sample). Each fact links to its stable GitHub URL.

ui/component-scaffold, repos/metamask-mobile.md

• Removes the required useElevatedSurface() step. That helper no longer exists in Mobile (app/util/theme/themeUtils is gone), and MMDS BottomSheetDialog applies bg-elevated1 itself.
• Fixes the Foo.tsx template and the pressed-state snippet so they use the ButtonBase twClassName function. Also drops the unused Box/useTailwind imports.
• Points component docs at the release-tag README and lists deprecated MMDS APIs.
• Fixes two Mobile paths: English strings live in locales/languages/en.json at the repo root (there is no app/locales), and the AccessRestrictedModal import example no longer imports the removed helper.

ui/content-guidelines, skill.md and repos/metamask-mobile.md

• Replaces "read the component README via Storybook MCP" with the stable README URL (#content-guidelines anchor).
• Inlines the copy rules for the ~15 most-used components (Button, BottomSheetHeader/Footer, BannerAlert, Toast, TextField, HelpText, Label, ListItem, TabEmptyState, ...), taken from their READMEs at v77.0.0.

CHANGELOG.md: one entry under Unreleased / Changed.

Things I wasn't sure about

1. FontFamily.Accent: I documented it as "exported in 0.54.0 but removed on main; do not use". Once the next MMDS release ships #1645, the reference needs a version bump.
2. Hero rules come from the attached draft guideline (v0.1). I included only rules backed by code or tokens, plus the clear-cut ones (one hero per view, no weight, variant sizing, skeleton height). Rules still open in that draft are left out or marked "ask design": amount inputs, tabular-nums, a number glyph gate, and DisplayMd hero titles.
3. MMDS README drift: the RN Box README documents a nonexistent borderRadius prop, the RN Text README lists 10 of 15 variants, and the shared fontFamily JSDoc still says "Hero: MM Poly". The skill says "types win". These look worth fixing upstream.
4. Inline inventory vs "thin gateway": the previous strategy said not to keep component inventories in skills. Because MCP is down, I added a release-pinned reference. It has to be refreshed each MMDS release. #213 updates the strategy doc to say so.
5. #125 (open since August) edits the same Mobile overlay. This PR probably supersedes it.
6. The ScrollView-in-BottomSheet gotcha and the other non-MMDS Mobile rules were kept as they were. I did not re-verify them beyond the paths above.

Related: Extension and Storybook MCP changes are in #213.

Type of Change

• New skill
• Skill improvement/update
• Bug fix
• Documentation update
• Other (please describe):

Skill Details (if adding a new skill)

N/A. This updates existing skills (ui/ui-development, ui/component-scaffold, ui/content-guidelines) and their Mobile overlays.

Provider Name: N/A
Skill Name: N/A
Brief Description: N/A

Checklist

• I have read the CONTRIBUTING.md guidelines
• My skill follows the SKILL_TEMPLATE.md format
• I have tested this skill with an AI agent
• My skill does not contain any secrets, private keys, or sensitive data
• I have added appropriate documentation
• My changes don't break existing skills

Testing

• yarn test: 73/73 pass
• yarn lint (changelog): passes
• node .github/scripts/lint-skill-entry.mjs <changed files> (what CI runs): 0 errors. The 5 "missing recommended section" warnings were already on main. A full yarn audit:skills still reports 1 error in the unrelated typescript/tsc-blindspots skill, which is also on main and not touched here.
• ./tools/install --repo metamask-mobile --domain ui into a scratch repo installs mms-ui-development (with references/mmds-react-native.md next to SKILL.md), mms-component-scaffold, and mms-content-guidelines. The relative references/... links resolve after install.
• Every non-template URL returns 200, except npmjs.com, which returns 403 to scripted requests.
• I merged this branch with the Extension branch locally: no conflicts, and lint passes.
• I have not run a live agent session against Mobile with these skills.

Additional Context

Sources: the published npm tarballs (npm pack), the MMDS repo at v77.0.0, and MetaMask Mobile main at e9688c9 (2026-11-02) for MarketingMomentTitle, locales, the Toaster mount, and the removed useElevatedSurface.