Description

Enhanced the UI development guidelines in .cursor/rules/ui-development-guidelines.mdc to provide comprehensive guidance for component selection, reuse, and organization. This update addresses critical issues with the glob pattern matching and adds extensive documentation for working with the design system, component library, and feature-specific components.

Key improvements:

1. Fixed critical glob pattern - Changed from app/*.{tsx,ts,jsx,js} (matched 0 files) to app/**/*.{tsx,jsx} (now matches 2,893 UI component files)
2. Enhanced component hierarchy - Added 4-tier decision tree with clear rules for when to use design system, component library, feature components, or custom implementations
3. Added feature component organization - Guidance on checking for and reusing existing feature-specific components (e.g., PerpsTradingCard, PredictionMarketOrderPanel) before building new ones
4. Component documentation access - Instructions for accessing TypeScript type definitions and JSDoc comments
5. Legacy code migration guidelines - Clear path for migrating StyleSheet-based code to design system primitives
6. Box component best practices - When to use props vs twClassName, spacing system, color tokens
7. Enhanced code review checklist - 8-point checklist and AI agent guidelines

Changelog

CHANGELOG entry: null

Related issues

Fixes: N/A (Internal documentation improvement)

Manual testing steps

Feature: UI Development Guidelines Application

  Scenario: AI agent implements a feature-specific component
    Given an AI agent needs to implement a new Perps trading card
    
    When the agent reads the UI development guidelines
    Then the guidelines should instruct to check app/features/perps/components/ first
    And the guidelines should direct to reuse existing PerpsTradingCard if found
    And the guidelines should require using Box/Text primitives if building new component

  Scenario: Developer verifies glob pattern matches their component files
    Given a developer working on files in app/component-library/
    
    When they check if guidelines apply to their components
    Then the glob pattern app/**/*.{tsx,jsx} should match their files
    And they should receive guidance on using design system components

Screenshots/Recordings

N/A - Documentation only change

Before

• Glob pattern matched 0 files
• Basic 3-tier component hierarchy
• No guidance on feature-specific component reuse
• Missing migration guidelines
• No Box component best practices

After

• Glob pattern matches 2,893 UI component files
• Comprehensive 4-tier hierarchy with decision tree
• Clear workflow for checking/reusing feature components
• Complete migration guidelines with examples
• Detailed Box component best practices
• Enhanced AI agent guidelines

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.