skills.rest
CodeTonight-SA
CodeTonight-SAOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-responsive-ui

Enforce mobile-first design and testing protocols for UI changes.

Updated Aug 23, 2026
Search Tags:#accessibility#web development#frontend#responsive design#UI/UX#mobile-first#CSS#HTML
One-click install
npx skills add https://github.com/CodeTonight-SA/claude-optim --skill mobile-responsive-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-responsive-ui
Source: https://github.com/CodeTonight-SA/claude-optim/tree/main/skills/mobile-responsive-ui
Command: npx skills add https://github.com/CodeTonight-SA/claude-optim --skill mobile-responsive-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend development often overlooks mobile responsiveness, leading to broken layouts, poor user experience, and costly rework. This skill enforces a mobile-first design protocol for all UI changes, ensuring consistent and accessible interfaces across devices.

Core Features & Use Cases

  • Mobile-First Enforcement: Guides design and implementation starting from the smallest screen, progressively enhancing for larger viewports.
  • Mandatory Testing Protocol: Requires verification across multiple device viewports (e.g., iPhone SE, iPad, Desktop) using Chrome DevTools.
  • Touch Optimization: Ensures tap targets are adequately sized and interactions are touch-friendly.
  • Use Case: You're implementing a new UI component or modifying an existing page, and you need to guarantee it's fully responsive and touch-optimized.

Quick Start

"Ensure this new navigation bar is fully mobile-responsive." "Verify the mobile responsiveness of the login page across different devices."