mobile-responsive

What This Skill Does

The mobile-responsive skill provides an expert-level, six-stage workflow for building, auditing, and optimizing web interfaces for mobile environments. It shifts the design mindset from 'making things smaller' to a 'fluid, touch-first' philosophy. This skill guides developers and designers through critical mobile challenges including viewport management, content prioritization, accessibility (touch targets), typography readability, and mobile-specific performance metrics (CLS, LCP). It helps resolve common issues like horizontal scrolling, inadequate tap targets, and poor loading performance on limited hardware.

Installation

To install this skill, run the following command in your terminal: clawhub install openclaw/skills/skills/clawkk/mobile-responsive

Use Cases

• Responsive Audits: Use this when a layout breaks on specific viewports (e.g., 320px-428px) to systematically identify CSS grid or overflow issues.
• Mobile Optimization: Engage the skill when your performance dashboard reports poor Core Web Vitals on mobile, such as layout shifts or slow interaction to paint.
• UX Refinement: Use this when your site features hover-only elements that are inaccessible on touch devices or when text sizes trigger automatic zoom on iOS.

Example Prompts

1. "Our landing page has a horizontal scroll issue on iPhone SE, and the primary CTA is pushed below the fold. Run the mobile-responsive workflow to audit our grid layout and reorder the content."
2. "My team is seeing accessibility failures regarding touch target sizes on our dashboard navigation. Guide me through stage 4 of the mobile-responsive skill to fix these targets."
3. "Audit our mobile performance. We are getting high LCP scores on 3G networks. Use the mobile-responsive skill to prioritize image optimization and resource loading for smaller devices."

Tips & Limitations

• Real Hardware: Always remember that Chrome DevTools device mode is an approximation. The skill emphasizes verifying against real devices or services like BrowserStack to catch rendering quirks unique to specific mobile browsers.
• Notch Handling: Be aware of environment variables and 'safe-area-inset' properties when building fixed headers or footers, especially for modern notch-equipped smartphones.
• Avoid Over-engineering: Do not use display: none as a crutch; always consider screen readers and semantic content order before hiding elements to 'fix' a layout.
• Design Tokens: Always align this workflow with your existing design system tokens to maintain consistency across desktop and mobile versions of your application.