Responsive Design Skill
The responsive design skill gives Claude deep knowledge of responsive design — mobile-first breakpoints, fluid typography, container queries, and responsive images.
When It’s Active
Section titled “When It’s Active”Activated automatically when implementing responsive layouts, breakpoints, fluid sizing, or responsive images.
What It Teaches Claude
Section titled “What It Teaches Claude”- Mobile-first breakpoints (min-width: sm 640px, md 768px, lg 1024px, xl 1280px)
- Fluid typography with clamp()
- Container queries for component-level responsiveness
- Responsive images with srcset, sizes, and picture element
- Logical properties (margin-inline, padding-block, inline-size)