OpenClaw LaunchOpenClaw Launch
📱

Responsive Breakpoint Planner

Verified

by Community

Defines responsive breakpoint strategies based on content needs rather than device sizes. Covers breakpoint selection, layout shifts, component behavior changes, and testing strategies for responsive designs.

responsivebreakpointsmobilelayout

Responsive Breakpoint Planner

Plan responsive breakpoints that serve content effectively across all devices.

Usage

Describe your layouts and content to get breakpoint recommendations.

Examples

  • "Define breakpoints for a content-heavy editorial site"
  • "Plan responsive behavior for a complex dashboard"
  • "Choose between mobile-first and desktop-first approaches"

Guidelines

  • Set breakpoints based on content, not specific devices
  • Design mobile-first for progressive enhancement
  • Test at breakpoint boundaries and mid-points
  • Define how each component adapts at each breakpoint
  • Use relative units for flexible intermediate states

More Design Tools Skills

🎨
Figma Auto Layout

Master Figma auto layout for responsive designs.

💎
Sketch Symbol Organizer

Organize Sketch symbols and shared styles efficiently.

🎯
Design Token Manager

Create and manage design tokens for consistency.

🔣
Icon Set Generator

Create consistent icon sets for your product.