responsive-design
Responsive Design
This skill covers responsive design principles — mobile-first development, appropriate breakpoints, touch-friendly targets, and adaptive layout patterns.
Use-When
This skill activates when:
- Agent builds page layouts or components
- Agent adds responsive breakpoints
- Agent designs for mobile devices
- Agent creates touch-friendly interactions
- Agent converts desktop-only designs to responsive
Core Rules
- ALWAYS use mobile-first approach (base styles for mobile, media queries for larger)
- ALWAYS ensure touch targets are at least 44x44px
- ALWAYS design for smallest screen first, then enhance
- NEVER rely solely on device detection (use feature detection)
More from moderndegree/agent-skills
design-systems
Design tokens, spacing scales, color systems, and typography for building consistent UIs. Use when creating design systems, theming, or establishing UI foundations.
8motion-animation
Motion design principles, when to animate, transitions, and accessibility. Use when adding animations, micro-interactions, or ensuring accessibility for motion.
6dialogs-modals
Modal and dialog patterns, confirmations, destructive actions, and focus management. Use when building modals, dialogs, or confirmation dialogs.
6form-design
Form UX patterns, field types, multi-step wizards, and layout. Use when building forms, registration flows, or any data collection interfaces.
5a11y-best-practices
Comprehensive accessibility patterns for building, testing, and fixing accessible interfaces. Use when building UI components, forms, pages, or auditing code for accessibility issues.
5notifications-feedback
Toast notifications, alerts, feedback messages, and their timing. Use when adding user feedback, success messages, or alerts.
5