skills.rest
Samaara-Das
Samaara-DasCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive

Define five device classes and verify UI layouts across viewports.

Updated Aug 27, 2026
Search Tags:#accessibility#mobile-first#ui-ux#breakpoints#responsive-design#table-to-card
One-click install
npx skills add https://github.com/Samaara-Das/money-hungry-games --skill responsive-samaara-das
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive
Source: https://github.com/Samaara-Das/money-hungry-games/tree/main/.claude/skills/responsive
Command: npx skills add https://github.com/Samaara-Das/money-hungry-games --skill responsive-samaara-das

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guideline ensures every UI surface works across five breakpoints (phone, tablet, small laptop, large laptop, and desktop) and lays out consistent, accessible patterns for responsive design.

Core Features & Use Cases

  • Explicit five-device class strategy with target widths and Tailwind breakpoint mappings.
  • Table-to-Card pattern to preserve data parity and readability across viewports.
  • Touch-friendly interactions and modal containment guidelines to ensure usability on mobile.
  • Navigation and workflow recommendations to maintain consistency across devices.

Quick Start

Audit the current UI against the five breakpoints and adapt layouts to preserve the same data accessibility across viewports.

Frequently Asked Questions about responsive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make data tables responsive across phone and tablet viewports?▼

Use a Table-to-Card pattern to transform wide data tables into stacked card layouts on smaller viewports, preserving data parity and readability while ensuring mobile-first usability across phone and tablet screens.

What is mobile-first responsive design and how many breakpoints do I need?▼

Mobile-first responsive design starts styling from the smallest screen upward using five device class breakpoints—phone, tablet, small laptop, large laptop, and desktop—to ensure UI surfaces adapt correctly across all viewports.

How do I ensure touch-friendly interactions and modal containment on mobile UI?▼

Apply touch-target sizing rules and modal containment guidelines to prevent interactive elements and overlays from breaking outside the viewport, ensuring dashboards and forms remain usable on phone and tablet layouts.

Does this responsive design guideline support Tailwind breakpoint mappings?▼

Yes, the responsive design strategy includes explicit target widths mapped to Tailwind breakpoints, allowing you to align five device classes with existing utility classes for consistent UI adaptation across viewports.

What is the best way to audit a UI dashboard for responsive design compliance?▼

Audit a dashboard by validating it against five device breakpoints using a dedicated verification workflow, checking that data accessibility, navigation, and forms maintain usability and parity across phone, tablet, laptop, and desktop layouts.

Related Skills

Explore More Design & Creative Skills→
SChannarongSChannarong

frontend-design

Generate frontend code with accessibility, theming, and responsive behavior.

Community
Advanced
CatsofsufferingCatsofsuffering
5

adapt

Adapt designs across screen sizes with responsive layouts, breakpoints, and touch targets.

Community
Intermediate
ramunasnognysramunasnognys
1

mobile-ux-improver

Enforce mobile-first UX best practices for web application components.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate