## **Description**

Extracts and documents the React Native `tw.style()` array pattern from
the BannerAlert migration (PR #966) into the styling cursor rule. This
pattern is essential for components that need to apply Tailwind classes
while accepting a custom `style` prop.

**What is the reason for the change?**
- The BannerAlert component migration introduced an important pattern
for merging `tw.style()` with style props using arrays
- This pattern ensures type safety and proper merge order (tw classes →
twClassName → style prop)
- The pattern needs to be documented in the styling rule so it's
available as a reference for all future components

**What is the improvement/solution?**
- Adds comprehensive documentation of the array pattern to
`.cursor/rules/styling.md`
- Includes correct ✅ and incorrect ❌ examples
- Explains why the array pattern is preferred (type safety, merge order,
consistency with Box)
- Provides real-world example from BannerAlert component
- Ensures AI agents and developers follow this pattern consistently

This documentation was originally added as part of PR #966 but is being
extracted into a standalone documentation update for better visibility
and reusability.

## **Related issues**

Related to:
- #966
(BannerAlert migration)

## **Manual testing steps**

1. Review the updated `.cursor/rules/styling.md` file
2. Verify the array pattern documentation is clear and comprehensive
3. Confirm examples match the BannerAlert implementation

## **Screenshots/Recordings**

N/A - Documentation only change

### **Before**

No documentation for merging `tw.style()` with style props

### **After**

Comprehensive documentation including:
- ❌ Wrong pattern (passing style directly to tw.style)
- ✅ Correct pattern (array with tw.style and style)
- Why array pattern explanation
- Real-world BannerAlert example

## **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 only)
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable (N/A)
- [ ] 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**
> Low risk because this PR only updates documentation and adds no
runtime code changes.
> 
> **Overview**
> Documents a React Native **array-based merge pattern** for combining
component `tw.style()` classes with a passed-in `style` prop, while
keeping `twClassName` forwarded separately.
> 
> Adds do/don’t examples, rationale (type-safety and consistent merge
behavior), and a `BannerAlert` snippet illustrating the recommended
approach.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
de51983. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->