---

name: ui-ux-design description: Expert in NativeWind v4, financial UI patterns, and modern mobile aesthetics.

UI/UX Design Skill

This skill ensures that the application maintains a premium, consistent, and user-friendly interface following the "Modern Green" theme.

🎨 Design Principles

• Clarity First: Financial data must be easy to read at a glance.
• Premium Feel: Use soft shadows, rounded corners (2xl), and smooth transitions.
• Green Accent: Use #00A86B for primary actions and positive values.
• Dark Mode: Support high-contrast dark mode with slate-900/950 backgrounds.

🧱 Component Usage

Follow the standards defined in .agent/rules/component-library.md.

• Cards: Use the standard card wrapper for all list items.
• Typography: Use Axiforma font weights via NativeWind classes.
• Status Badges: Use the predefined colors for Paid, Pending, and Overdue states.

📱 Mobile Patterns

• Safe Areas: Always use useSafeAreaInsets or SafeAreaView to avoid notch/home-indicator overlaps.
• Micro-interactions: Add subtle feedback on press (e.g., active:scale-95).
• Lists: Use FlashList or FlatList for better performance with large datasets.

🛠️ Styling Pattern

Use the cn or clsx utility for conditional styling.

Copyimport { cn } from '~/utils/cn';

<View className={cn("p-4 rounded-xl", isPaid ? "bg-brand" : "bg-gray-100")}>