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

0•

디자인 도구

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.

주요 기능

01Standardized breakpoint definitions for mobile, tablet, and desktop

02Mobile-first and desktop-first architectural planning

03Touch vs. Mouse interaction optimization (hover states, target sizes)

04Content prioritization and visibility logic across different screen sizes

05Component-level adaptation specs for navigation, grids, and forms

060 GitHub stars

사용 사례

01Refactoring an existing desktop-only web application to be fully responsive

02Defining touch-friendly interaction guidelines for hybrid mobile-web applications

03Planning the layout architecture for a new complex dashboard or SaaS landing page

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lexicalninja/my-little-scrum-team responsive-design-planner

For use in Claude.ai and ChatGPT

Download Skill