Oda/managing-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e6880c9b1826d65dc9e7c8065b642f325d96db52
managing-apps/.cursor/commands/responsive.md
cryptooda 7dba29c66f Add jobs
2025-11-09 02:08:31 +07:00

19 KiB
Raw Blame History

responsive

When to Use

Use this command when you want to:

  • Implement responsive/mobile design using DaisyUI components
  • Make existing components mobile-friendly with DaisyUI patterns
  • Create beautiful, modern responsive layouts following DaisyUI documentation
  • Optimize UI for different screen sizes using DaisyUI's responsive features

Prerequisites

  • Component or page file open or specified
  • Tailwind CSS configured
  • DaisyUI installed and configured
  • Reference to DaisyUI documentation: https://daisyui.com/components/
  • Understanding of the component's current structure

Execution Steps

Step 1: Analyze Current Component

Read the component file to understand its structure:

If file is open in editor:

  • Use the currently open file

If file path provided:

  • Read the file: cat [file-path]

Analyze:

  • Current layout structure (grid, flex, etc.)
  • Existing responsive classes (if any)
  • Component complexity and nesting
  • Content that needs to be responsive (tables, forms, charts, cards)

Step 2: Identify Responsive Requirements

Determine what needs to be responsive:

Common responsive patterns:

  • Navigation: Mobile hamburger menu, desktop horizontal nav
  • Tables: Horizontal scroll on mobile, full table on desktop
  • Forms: Stacked inputs on mobile, side-by-side on desktop
  • Cards/Grids: Single column on mobile, multi-column on desktop
  • Charts: Smaller on mobile, larger on desktop
  • Modals: Full screen on mobile, centered on desktop
  • Text: Smaller on mobile, larger on desktop
  • Spacing: Tighter on mobile, more spacious on desktop

Identify:

  • Which elements need responsive behavior
  • Breakpoints where layout should change
  • Mobile vs desktop content differences

Step 3: Apply Mobile-First Responsive Design

Implement responsive design using Tailwind's mobile-first approach:

3.1: Breakpoint Strategy

Tailwind breakpoints (mobile-first):

  • Base (default): Mobile (< 640px)
  • sm: - Small devices (≥ 640px)
  • md: - Medium devices (≥ 768px)
  • lg: - Large devices (≥ 1024px)
  • xl: - Extra large (≥ 1280px)
  • 2xl: - 2X Extra large (≥ 1536px)

Pattern: Start with mobile styles, then add larger breakpoints:

// Mobile first: base styles are for mobile
<div className="w-full p-4 md:p-6 lg:p-8">
  // Mobile: full width, padding 4
  // md+: padding 6
  // lg+: padding 8
</div>

3.2: Layout Patterns

Grid Layouts:

// Single column mobile, multi-column desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards */}
</div>

// Responsive grid with auto-fit
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">

Flexbox Layouts:

// Stack on mobile, row on desktop
<div className="flex flex-col md:flex-row gap-4">
  {/* Items */}
</div>

// Center on mobile, space-between on desktop
<div className="flex flex-col items-center md:flex-row md:justify-between">

Container Patterns:

// Use layout utility class or custom container
<div className="layout">
  {/* Content with responsive margins */}
</div>

// Or custom responsive container
<div className="w-full px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">

3.3: Navigation Patterns (DaisyUI Navbar)

DaisyUI Navbar Pattern (https://daisyui.com/components/navbar/):

// DaisyUI navbar with responsive menu
<div className="navbar bg-base-300">
  {/* Mobile menu button */}
  <div className="navbar-start">
    <button className="btn btn-ghost lg:hidden" onClick={toggleMenu}>
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
    <a className="btn btn-ghost text-xl">Logo</a>
  </div>
  
  {/* Desktop navigation */}
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </div>
  
  {/* Navbar end */}
  <div className="navbar-end">
    <button className="btn btn-primary">Action</button>
  </div>
</div>

// Mobile drawer/sidebar (DaisyUI Drawer pattern)
<div className={`drawer lg:drawer-open`}>
  <input id="drawer-toggle" type="checkbox" className="drawer-toggle" checked={isOpen} onChange={toggleMenu} />
  <div className="drawer-side">
    <label htmlFor="drawer-toggle" className="drawer-overlay"></label>
    <ul className="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
      {/* Mobile menu items */}
    </ul>
  </div>
</div>

3.4: Table Patterns (DaisyUI Table)

DaisyUI Table Patterns (https://daisyui.com/components/table/):

// Option 1: Horizontal scroll on mobile (recommended)
<div className="overflow-x-auto">
  <table className="table table-zebra w-full">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      {/* Table rows */}
    </tbody>
  </table>
</div>

// Option 2: Responsive table size (mobile: table-xs, desktop: table)
<div className="overflow-x-auto">
  <table className="table table-xs md:table table-zebra w-full">
    {/* Table content */}
  </table>
</div>

// Option 3: Card layout on mobile, table on desktop
<div className="block md:hidden space-y-4">
  {/* DaisyUI cards for mobile */}
  <div className="card bg-base-100 shadow">
    <div className="card-body">
      {/* Card content matching table data */}
    </div>
  </div>
</div>
<div className="hidden md:block overflow-x-auto">
  <table className="table table-zebra w-full">
    {/* Table for desktop */}
  </table>
</div>

3.5: Form Patterns (DaisyUI Form)

DaisyUI Form Patterns (https://daisyui.com/components/form/):

// DaisyUI form-control with responsive grid
<form className="w-full max-w-2xl mx-auto space-y-4">
  {/* Stacked on mobile, side-by-side on desktop */}
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div className="form-control">
      <label className="label">
        <span className="label-text">First Name</span>
      </label>
      <input type="text" className="input input-bordered w-full" />
    </div>
    <div className="form-control">
      <label className="label">
        <span className="label-text">Last Name</span>
      </label>
      <input type="text" className="input input-bordered w-full" />
    </div>
  </div>
  
  {/* Full width field */}
  <div className="form-control">
    <label className="label">
      <span className="label-text">Email</span>
    </label>
    <input type="email" className="input input-bordered w-full" />
  </div>
  
  {/* Responsive button */}
  <div className="form-control mt-6">
    <button className="btn btn-primary w-full md:w-auto">Submit</button>
  </div>
</form>

3.6: Typography Patterns

Responsive Text:

// Smaller on mobile, larger on desktop
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">
  Title
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Content
</p>

3.7: Spacing Patterns

Responsive Spacing:

// Tighter on mobile, more spacious on desktop
<div className="p-4 md:p-6 lg:p-8">
  {/* Content */}
</div>

// Responsive gaps
<div className="flex flex-col gap-2 md:gap-4 lg:gap-6">
  {/* Items */}
</div>

3.8: Modal/Dialog Patterns (DaisyUI Modal)

DaisyUI Modal Patterns (https://daisyui.com/components/modal/):

// Full screen on mobile, centered on desktop
<dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
  <div className="modal-box w-full max-w-none md:max-w-2xl mx-auto">
    <h3 className="font-bold text-lg">Modal Title</h3>
    <p className="py-4">Modal content</p>
    <div className="modal-action">
      <button className="btn" onClick={closeModal}>Close</button>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop" onClick={closeModal}>
    <button>close</button>
  </form>
</dialog>

// Responsive modal with different sizes
<dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
  <div className="modal-box w-11/12 max-w-none md:max-w-lg lg:max-w-2xl">
    {/* Modal content */}
  </div>
</dialog>

3.9: Chart/Visualization Patterns

Responsive Charts:

// Responsive chart container
<div ref={containerRef} className="w-full h-auto">
  <Chart 
    width={containerWidth} 
    height={containerWidth * (isMobile ? 0.8 : 0.6)}
  />
</div>

// Or use aspect ratio
<div className="w-full aspect-[4/3] md:aspect-[16/9]">
  <Chart />
</div>

Step 4: Reference DaisyUI Documentation

Before implementing any component, check DaisyUI documentation:

  • Open or reference: https://daisyui.com/components/
  • Find the component you need (navbar, card, table, modal, etc.)
  • Review the component's responsive examples and classes
  • Use the exact DaisyUI classes and patterns from the docs

DaisyUI Documentation Structure:

  • Each component page shows examples
  • Copy the exact class names and structure
  • Adapt the examples to your use case with responsive breakpoints

Step 5: Apply DaisyUI Responsive Components

Use DaisyUI components following official documentation: https://daisyui.com/components/

DaisyUI Responsive Components (from docs):

  1. Navbar (https://daisyui.com/components/navbar/):

    • Use navbar with navbar-start, navbar-center, navbar-end
    • Mobile hamburger: btn btn-ghost lg:hidden
    • Desktop nav: hidden lg:flex
    <div className="navbar bg-base-300">
  <div className="navbar-start">
    <button className="btn btn-ghost lg:hidden">☰</button>
  </div>
  <div className="navbar-center hidden lg:flex">
    {/* Desktop nav items */}
  </div>
</div>

  2. Drawer (https://daisyui.com/components/drawer/):

    • Use drawer with drawer-side for mobile sidebar
    • Toggle with drawer-open class
    <div className="drawer lg:drawer-open">
  <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
  <div className="drawer-side">
    <label htmlFor="drawer-toggle" className="drawer-overlay"></label>
    <ul className="menu p-4 w-80 min-h-full bg-base-200">
      {/* Sidebar content */}
    </ul>
  </div>
</div>

  3. Card (https://daisyui.com/components/card/):

    • Use card with card-body for responsive cards
    • Responsive grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
    <div className="card bg-base-100 shadow-xl">
  <div className="card-body p-4 md:p-6">
    <h2 className="card-title text-lg md:text-xl">Title</h2>
    <p className="text-sm md:text-base">Content</p>
  </div>
</div>

  4. Table (https://daisyui.com/components/table/):

    • Wrap in overflow-x-auto for mobile scroll
    • Use table-xs for mobile, table for desktop
    <div className="overflow-x-auto">
  <table className="table table-zebra w-full">
    {/* Table content */}
  </table>
</div>

  5. Modal (https://daisyui.com/components/modal/):

    • Use modal with modal-box for responsive modals
    • Full screen mobile: w-full max-w-none md:max-w-2xl
    <dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
  <div className="modal-box w-full max-w-none md:max-w-2xl">
    {/* Modal content */}
  </div>
</dialog>

  6. Form (https://daisyui.com/components/form/):

    • Use form-control with responsive grid
    • Inputs: input input-bordered w-full
    <div className="form-control">
  <label className="label">
    <span className="label-text">Label</span>
  </label>
  <input type="text" className="input input-bordered w-full" />
</div>

  7. Bottom Navigation (https://daisyui.com/components/bottom-navigation/):

    • Use btm-nav for mobile bottom navigation
    <div className="btm-nav lg:hidden fixed bottom-0">
  <button className="active">Home</button>
  <button>Settings</button>
</div>

  8. Tabs (https://daisyui.com/components/tabs/):

    • Use tabs with responsive layout
    • Mobile: tabs tabs-boxed, Desktop: tabs tabs-lifted
    <div className="tabs tabs-boxed md:tabs-lifted">
  <a className="tab">Tab 1</a>
  <a className="tab tab-active">Tab 2</a>
</div>

  9. Dropdown (https://daisyui.com/components/dropdown/):

    • Use dropdown with responsive positioning
    <div className="dropdown dropdown-end">
  <label tabIndex={0} className="btn btn-ghost">Menu</label>
  <ul className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
    {/* Dropdown items */}
  </ul>
</div>

  10. Stats (https://daisyui.com/components/stats/):

    • Use stats with responsive grid
    <div className="stats stats-vertical md:stats-horizontal shadow w-full">
  <div className="stat">...</div>
</div>

Step 6: Implement Beautiful Mobile UX

Mobile UX Best Practices:

  1. Touch Targets:

    • Minimum 44x44px touch targets
    • Adequate spacing between interactive elements
    <button className="btn btn-primary min-h-[44px] min-w-[44px]">
  Action
</button>

  2. Swipe Gestures:

    • Consider swipeable cards/carousels
    • Use libraries like react-swipeable if needed

  3. Bottom Navigation (DaisyUI Bottom Nav - https://daisyui.com/components/bottom-navigation/):

    • Use DaisyUI btm-nav for mobile bottom navigation
    <div className="btm-nav lg:hidden fixed bottom-0 z-50 bg-base-300">
  <button className="active text-primary">
    <svg>...</svg>
    <span className="btm-nav-label">Home</span>
  </button>
  <button>
    <svg>...</svg>
    <span className="btm-nav-label">Settings</span>
  </button>
</div>

  4. Sticky Headers:

    • Keep important actions accessible
    <div className="sticky top-0 z-50 bg-base-100">
  {/* Header content */}
</div>

  5. Loading States (DaisyUI Loading - https://daisyui.com/components/loading/):

    • Use DaisyUI loading spinners appropriately sized for mobile
    <div className="flex justify-center items-center min-h-[200px]">
  <span className="loading loading-spinner loading-sm md:loading-md lg:loading-lg"></span>
</div>

// Or use loading text
<div className="flex flex-col items-center gap-4">
  <span className="loading loading-spinner loading-lg"></span>
  <span className="text-sm md:text-base">Loading...</span>
</div>

Step 7: Test Responsive Breakpoints

Verify the implementation works at different breakpoints:

Test breakpoints:

  • Mobile: 375px, 414px (iPhone sizes)
  • Tablet: 768px, 1024px (iPad sizes)
  • Desktop: 1280px, 1536px+

Check:

  • Layout doesn't break at any breakpoint
  • Text is readable at all sizes
  • Interactive elements are easily tappable
  • Content doesn't overflow horizontally
  • Images scale appropriately

Step 8: Optimize Performance

Mobile Performance:

  1. Lazy Loading:

    • Lazy load images and heavy components
    <img 
  src={imageSrc} 
  loading="lazy" 
  className="w-full h-auto"
  alt="..."
/>

  2. Conditional Rendering:

    • Render mobile/desktop versions conditionally if needed
    {isMobile ? <MobileComponent /> : <DesktopComponent />}

  3. Reduce Animations on Mobile:

    • Consider prefers-reduced-motion
    <div className="transition-transform motion-reduce:transition-none">

Error Handling

If component file not found:

  • Check file path
  • Verify file exists
  • STOP: Cannot proceed without component

If Tailwind classes not working:

  • Verify Tailwind config includes the file
  • Check if classes are in content paths
  • Rebuild Tailwind: npm run build or check build process

If layout breaks at breakpoints:

  • Check for conflicting classes
  • Verify breakpoint order (mobile-first)
  • Test with browser dev tools
  • Fix overflow issues with overflow-x-hidden on body

If DaisyUI components not responsive:

  • Check DaisyUI version: npm list daisyui
  • Verify Tailwind config includes DaisyUI plugin
  • Reference DaisyUI docs: https://daisyui.com/components/
  • Use DaisyUI's responsive utilities from documentation
  • Ensure you're using the correct DaisyUI class names

Example Execution

User input: /responsive (with component file open)

AI execution:

  1. Analyze component: Read UnifiedTradingModal.tsx
    • Found: Large form with multiple sections
    • Found: Tables and cards
    • Found: Some responsive classes already present
  2. Identify requirements:
    • Form inputs need stacking on mobile
    • Tables need horizontal scroll
    • Modal needs full-screen on mobile
    • Cards need single column on mobile
  3. Reference DaisyUI docs:
  4. Implement responsive using DaisyUI:
    • Update form: Use form-control with grid grid-cols-1 md:grid-cols-2 gap-4
    • Update tables: Wrap in overflow-x-auto with table table-zebra
    • Update modal: Use DaisyUI modal with modal-box w-full max-w-none md:max-w-2xl
    • Update cards: Use DaisyUI card with grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  5. Apply mobile UX:
    • Use DaisyUI buttons (already meet 44px touch target)
    • Add responsive spacing: p-4 md:p-6
    • Update typography: text-sm md:text-base
  6. Test: Verify at 375px, 768px, 1024px breakpoints
  7. Success: "✅ Component is now fully responsive using DaisyUI components!"

If table component:

  1. Analyze: Read table component
  2. Identify: Table needs mobile-friendly layout
  3. Implement:
    • Option 1: Horizontal scroll wrapper
    • Option 2: Card layout for mobile, table for desktop
  4. Choose best approach based on data complexity
  5. Implement chosen pattern
  6. Success: "✅ Table is now responsive with [chosen pattern]!"

Important Notes

  • ✅ Mobile-first approach - Base styles for mobile, then add larger breakpoints
  • ✅ Use Tailwind breakpoints - sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
  • ✅ DaisyUI components - Always use DaisyUI components from https://daisyui.com/components/
  • ✅ Follow DaisyUI docs - Reference official documentation for component usage
  • ✅ Touch targets - Minimum 44x44px for mobile (DaisyUI buttons meet this)
  • ✅ No horizontal scroll - Prevent horizontal overflow on mobile
  • ✅ Test all breakpoints - Verify at 375px, 768px, 1024px, 1280px
  • ✅ Performance - Lazy load images, optimize for mobile
  • ⚠️ Breakpoint order - Always mobile-first: base → sm → md → lg → xl → 2xl
  • ⚠️ Content priority - Show most important content first on mobile
  • ⚠️ Spacing - Tighter on mobile, more spacious on desktop
  • ⚠️ DaisyUI classes - Use DaisyUI utility classes (btn, card, input, etc.)
  • 📱 Mobile breakpoints: < 640px (base), ≥ 640px (sm), ≥ 768px (md)
  • 💻 Desktop breakpoints: ≥ 1024px (lg), ≥ 1280px (xl), ≥ 1536px (2xl)
  • 🎨 DaisyUI Components: navbar, drawer, card, table, modal, form, btm-nav, tabs, dropdown, stats
  • 📚 DaisyUI Docs: https://daisyui.com/components/ - Always reference for component patterns
  • 🔧 Layout utility: Use .layout class or custom responsive containers
Reference in New Issue View Git Blame Copy Permalink