Oda/managing-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add jobs

Browse Source
This commit is contained in:
cryptooda
2025-11-09 02:08:31 +07:00
parent 1ed58d1a98
commit 7dba29c66f
57 changed files with 8362 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

626
.cursor/commands/responsive.md Normal file
View File

@@ -0,0 +1,626 @@
# 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:
```tsx
// 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:**
```tsx
// 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:**
```tsx
// 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:**
```tsx
// 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/):
```tsx
// 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/):
```tsx
// 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/):
```tsx
// 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:**
```tsx
// 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:**
```tsx
// 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/):
```tsx
// 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:**
```tsx
// 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`
```tsx
<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
```tsx
<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`
```tsx
<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
```tsx
<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`
```tsx
<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`
```tsx
<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
```tsx
<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`
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<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
```tsx
<img
src={imageSrc}
loading="lazy"
className="w-full h-auto"
alt="..."
/>
```
2. **Conditional Rendering:**
- Render mobile/desktop versions conditionally if needed
```tsx
{isMobile ? <MobileComponent /> : <DesktopComponent />}
```
3. **Reduce Animations on Mobile:**
- Consider `prefers-reduced-motion`
```tsx
<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:
- Check https://daisyui.com/components/modal/ for modal patterns
- Check https://daisyui.com/components/form/ for form patterns
- Check https://daisyui.com/components/table/ for table patterns
- Check https://daisyui.com/components/card/ for card patterns
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