md-viewer — Cursor Rules

• Mental Models • Match user expectations from similar applications. • Limit navigation menus to 5-7 items. • Group related actions within 8px-16px. • Limit choices to prevent decision paralysis. • Use progressive disclosure for complex flows. • Cognitive Patterns • Prioritize recognition over recall. • Provide clear affordances for interactive elements. • Maintain consistent patterns across similar actions. • Place common elements in predictable locations. • Offer visual hints for hidden functionality. • User Flow Efficiency • Ensure primary actions are accessible within 1-2 clicks. • Place critical information above the fold. • Provide clear escape routes from every screen. • Include an undo option for destructive actions. • Implement autosave for forms every 30 seconds.

• Quick Actions Flow • Group primary actions in easily scannable grids. • Display a maximum of 4-5 main actions at once. • Place the most used actions within thumb reach on mobile. • Highlight critical information (like balances) at the top. • Hide secondary actions in expandable menus. • Navigation Pattern • Eliminate unnecessary navigation elements. • Keep critical paths within 2-3 clicks. • Ensure main actions are visible without scrolling. • Make the back button always accessible. • Provide clear visual breadcrumbs. • Content Priority • Display key information (totals, balances) in the largest size. • Group action items by frequency of use. • Place critical notifications at the top of the viewport. • Collapse secondary information with expandable options. • Make error states immediately visible. • Interactive Feedback • Provide immediate response to user actions (<100ms). • Show loading states for actions longer than 300ms. • Display success/error messages within the viewport. • Use toast notifications lasting 3-5 seconds. • Include progress indicators for multi-step processes.

• Focus on Essential Features • Remove decorative elements that don't serve a purpose. • Assign a single clear function to each component. • Limit to a maximum of 3 primary actions per view. • Use only 2-3 font families throughout the design. • Keep navigation to a maximum of 7 main items. • Reduced Color Palette • Primary Color: Use for 60% of the interface. • Secondary Color: Use for 30% of the interface. • Accent Color: Use for 10% of the interface. • Limit to 3 primary colors. • Use 2-3 shades of gray for text hierarchy.

• Component Consistency • Border Radius: 4px-8px for small elements, 8px-12px for cards. • Button Grouping: 8px-12px between related actions. • Form Fields: 16px-24px vertical spacing. • Card Patterns: Consistent 16px-24px internal padding. • Related Items: Maximum 8px spacing between them. • Visual Grouping • Section Spacing: 32px-48px. • Related Content: Maximum 16px separation. • Element Grouping: Group similar elements within 8px proximity. • Unrelated Elements: Minimum 24px separation. • Content Blocks: 32px bottom margin.