feat(ui): add component-scaffold skill for MetaMask Mobile

[NicolasMassart]

Fixes https://consensyssoftware.atlassian.net/browse/MCWP-470

Description

Adds the component-scaffold skill for the MetaMask Mobile repository. The skill teaches agents how to scaffold a new React Native component following all repo conventions: directory placement, required file set, MMDS design-system layer, styling patterns (twClassName / Box enums), i18n, relative imports, testIds, test quality, barrel registration, and bottom-sheet specifics. Includes a full scaffold checklist and copy-paste file templates.

Type of Change

• New skill

Skill Details (if adding a new skill)

Provider Name: MetaMask Mobile
Skill Name: component-scaffold
Brief Description: Scaffolds a new React Native component for MetaMask Mobile following all repo conventions (file structure, MMDS design system, i18n, tests, testIds, barrel exports).

Note

Marked as stable (implicit default): the skill is grounded in existing codebase patterns and the evaluation shows ≥95% correctness across 4 models and 5 prompts, providing sufficient evidence to skip the experimental gate.

Checklist

• I have read the CONTRIBUTING.md guidelines
• My skill follows the SKILL_TEMPLATE.md format --> none of the skill in this repo is following the skill template, it's obsolete. But I checked.
• I have tested this skill with an AI agent --> yes, even better, see Testing
• 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

Evaluated with an automated harness: 4 models × 5 prompts, judged by claude-opus-4-8-thinking-high using an 11-criterion rubric derived directly from the skill.

Prompts (increasing difficulty)

ID	Task
p1	Simple presentational component
p2	Bottom sheet (exercises useElevatedSurface + gesture-handler ScrollView)
p3	List item with dynamic testID per item
p4	Redux-connected component (forces renderWithProvider)
p5	Vague prompt — robustness test

Results

Model	Avg Score%
gpt-5.3-codex	98.4%
composer-2.5	98.3%
claude-opus-4-8-thinking-high	98.1%
claude-4.6-sonnet-medium	95.7%

Attached evidence

• Archive out.zip contains:
• eval-explainer.md — methodology and how to read the results
• metrics.md — full scored matrix across all models and criteria
• dataset.md — generated code + judge rationale per run

Additional Context

The evaluation harness scripts are not published yet, only the result in the above archive.

Reference implementations in metamask-mobile:

• app/components/UI/Compliance/AccessRestrictedModal/AccessRestrictedModal.tsx — example of a bottom sheet component following all conventions
• app/components/UI/Earn/components/EarnHeaderSubtitle/EarnHeaderSubtitle.tsx — example of a simple presentational component
• app/component-library/components/design-system.stories.tsx — overview of available MMDS primitives

[Copilot]

Pull request overview

Adds a new component-scaffold UI skill scoped to the MetaMask Mobile repo, intended to guide agents in scaffolding new React Native components that follow repository conventions (file placement, MMDS usage, styling, i18n, testing, and exports).

Changes:

• Introduces the component-scaffold skill definition (name/description).
• Adds MetaMask Mobile–specific scaffolding guidance, checklist, and copy/paste templates.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
domains/ui/skills/component-scaffold/skill.md	Registers the new component-scaffold skill with frontmatter metadata.
domains/ui/skills/component-scaffold/repos/metamask-mobile.md	Provides MetaMask Mobile–specific scaffolding rules, templates, and checklist for new RN components.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.