- Remove Box/Button examples (align with PR #943 - these components don't follow ADR-0003/0004 yet)
- Add Step 11: Verify Coverage section with critical warning about duplicate exports
- Add coverage check to verification checklist
- Clarify type vs interface rule with composition/intersection rationale
- Reference BadgeCount PR #942 coverage issue as real-world example

Addresses review feedback from PR #944 code review

Added coverage threshold verification to Build & Tests checklist for
consistency with component-creation.md (PR #944). Uses correct 100%
thresholds for branches, functions, lines, and statements.

## **Description**

Adds `component-creation.md` cursor rule providing step-by-step
technical guidance for creating design system components. This HOW-TO
guide ensures AI agents follow ADR-0003 (const objects) and ADR-0004
(centralized types) patterns when scaffolding new components.

**Key guidance provided:**
- Using `create-component:react` and `create-component:react-native`
scripts
- Two-file export structure: `.types.ts` imports only, `index.ts`
exports only
- Creating shared types in `@metamask/design-system-shared` package
- Transforming generated templates to use Box/Text primitives and design
tokens generated tailwind classnames
- Cross-platform consistency between React and React Native
implementations

**Critical anti-patterns documented:**
- Using TypeScript enums instead of const objects with `as const`
- Not creating shared types (violates ADR-0004 layered architecture)
- Including platform-specific props in shared types
- Leaving template code unchanged (raw div/View elements)

**Why this matters:**
We need to ensure our components are consistent across platforms and use
the most up to date typescript conventions

**Relationship to other rules:**
- Depends on: `component-architecture.md` (foundational patterns)
- Used by: `component-migration.md` (references this for scaffolding
steps)

**References:**
- Golden path: BadgeStatus component (complete implementation)
- Validation: BadgeCount PR #942 (demonstrated coverage issue and fix)
- Scripts: `create-component:react` and `create-component:react-native`

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-341

## **Manual testing steps**

1. Review the cursor rule file: `.cursor/rules/component-creation.md`
2. Verify changes in BadgeCount PR #942 align with most up to date
coventions
3. Verify golden path examples reference BadgeStatus implementation
4. Check that CLAUDE.md includes reference to this new rule

## **Screenshots/Recordings**

N/A - Documentation only

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable (N/A - documentation)
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable (N/A - markdown)
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Documentation-only changes that affect developer/agent guidance, not
runtime behavior. Risk is limited to potential confusion if guidance is
inaccurate or drifts from actual scripts/architecture.
> 
> **Overview**
> Adds a new Cursor rule `component-creation.md` that standardizes the
step-by-step process for creating cross-platform design-system
components, including shared-types-first (ADR-0003/0004), Box/Text +
token usage, and a strict export pattern (`.types.ts` imports only;
`index.ts` is the single const-object export point to avoid coverage
gaps).
> 
> Updates existing AI-agent docs to reference this new rule, expands
Storybook story naming guidance with concrete examples, and documents
the `create-component:react-native` scaffolding command alongside the
React one.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3d3ae57. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Claude <noreply@anthropic.com>