c3f43d8b61
- Add 60 new agents across all 10 categories (75 -> 135) - Add 95 new plugins with command files (25 -> 120) - Update all agents to use model: opus - Update README with complete plugin/agent tables - Update marketplace.json with all 120 plugins
1.4 KiB
1.4 KiB
/add-breakpoints - Add Responsive Breakpoints
Implement responsive design breakpoints for a component or page.
Steps
- Identify the target component or page to make responsive
- Define breakpoints aligned with the design system: mobile (< 640px), tablet (640-1024px), desktop (> 1024px)
- Analyze the current layout and identify elements that need responsive behavior
- Implement mobile-first styles as the base layout
- Add tablet breakpoint styles: adjust grid columns, spacing, font sizes
- Add desktop breakpoint styles: wider containers, side-by-side layouts
- Handle images responsively: srcset, sizes, object-fit, aspect-ratio
- Adjust typography scale across breakpoints for readability
- Handle navigation: mobile hamburger menu, tablet condensed, desktop full nav
- Test touch targets: minimum 44x44px on mobile devices
- Add container queries for component-level responsiveness if supported
- Verify layout at all breakpoints and in-between sizes
Rules
- Always design mobile-first and add complexity for larger screens
- Use relative units (rem, em, %) instead of fixed pixels for layout
- Minimum touch target size of 44x44px on mobile
- Do not hide critical content at any breakpoint; rearrange instead
- Test at exact breakpoint boundaries and between breakpoints
- Use CSS Grid or Flexbox for responsive layouts, not floats
- Ensure text remains readable (16px minimum) at all breakpoints