responsive-system_skill

Overview

This skill helps implement responsive layouts, mobile-first design, and adaptive components using well-defined breakpoints, container queries, and fluid typography. It codifies a practical breakpoint system and patterns to avoid common pitfalls like horizontal scroll and poor touch targets. Use it to standardize responsive behavior across components and projects.

How this skill works

The skill inspects layout needs and applies a mobile-first pattern: start at the smallest screen and layer upward with breakpoint utilities. It recommends container queries for component-level adaptation, clamp() for fluid typography, and a validation checklist to catch touch-target and overflow issues. It also provides Tailwind-style breakpoint tokens and common show/hide patterns for implementation.

When to use it

• Building new UI where consistent responsive behavior is required
• Converting a desktop-first codebase to mobile-first patterns
• Creating adaptive components that must react to container size
• Implementing fluid typography and scalable spacing
• Validating touch targets and mobile overflow issues

Best practices

• Start mobile-first and enhance progressively for larger breakpoints
• Use container queries for component-scoped layout changes instead of global breakpoints
• Apply clamp() for fluid font sizes and avoid abrupt jumps
• Ensure touch targets are at least 44x44px and test on real devices
• Avoid rigid fixed breakpoints for every element; favor responsive utilities and container queries

Example use cases

• Creating a responsive card grid that moves from 1 to 3 columns across breakpoints
• Building a header where the logo and nav adapt via container queries inside a constrained container
• Implementing a hero title with clamp() to keep typography readable across viewports
• Hiding and showing UI pieces with breakpoint utilities (mobile-only drawer vs. desktop sidebar)
• Validating a layout with a checklist to prevent horizontal scroll on small devices