Does this skill write the actual CSS code?

While it focuses on planning and specifications, the output provides the exact logic, dimensions, and structural changes needed to implement the design in CSS or your preferred framework.

Is this compatible with Tailwind or Bootstrap?

The generated design plans are framework-agnostic, providing a roadmap that can be easily mapped to Tailwind utility classes, Bootstrap components, or custom CSS Modules.

Can I use custom breakpoints with this skill?

Yes, the skill can analyze your specific content and project requirements to recommend custom, content-based breakpoints rather than just following standard device sizes.

How does it handle mobile interactions?

The skill specifically defines interaction differences, such as replacing hover states with tap gestures and ensuring touch targets meet the minimum 44x44px standard.

Responsive Design Planner

Name: Responsive Design Planner
Author: lexicalninja

bylexicalninja

디자인 도구

Architects comprehensive responsive design strategies including breakpoints, mobile-first layouts, and device-specific interaction patterns.

소개

The Responsive Design Planner skill enables Claude to function as a senior UI/UX architect by creating detailed specifications for cross-platform web applications. It systematically outlines how interfaces should adapt across mobile, tablet, and desktop environments, ensuring optimal usability by defining breakpoint ranges, touch-target adjustments, and structural layout shifts. This skill is essential for developers who want to move beyond basic CSS media queries to implement professional, content-aware design systems that prioritize user experience on every device.

주요 기능

Standardized breakpoint definitions for mobile, tablet, and desktop
Mobile-first and desktop-first architectural planning
Touch vs. Mouse interaction optimization (hover states, target sizes)
Content prioritization and visibility logic across different screen sizes
Component-level adaptation specs for navigation, grids, and forms
0 GitHub stars

사용 사례

Refactoring an existing desktop-only web application to be fully responsive
Defining touch-friendly interaction guidelines for hybrid mobile-web applications
Planning the layout architecture for a new complex dashboard or SaaS landing page

소개

주요 기능

Standardized breakpoint definitions for mobile, tablet, and desktop
Mobile-first and desktop-first architectural planning
Touch vs. Mouse interaction optimization (hover states, target sizes)
Content prioritization and visibility logic across different screen sizes
Component-level adaptation specs for navigation, grids, and forms
0 GitHub stars

사용 사례

Refactoring an existing desktop-only web application to be fully responsive
Defining touch-friendly interaction guidelines for hybrid mobile-web applications
Planning the layout architecture for a new complex dashboard or SaaS landing page