Skills
.Work. You
Rest

mobile-responsive-ui

Official

Flawless mobile-first UI, every time.

Design & Creative#accessibility#web development#frontend#responsive design#UI/UX#mobile-first#CSS#HTML
AuthorCodeTonight-SA
Version1.0.0
Installs0

System Documentation

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."

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: mobile-responsive-ui
Download link: https://github.com/CodeTonight-SA/claude-optim/archive/main.zip#mobile-responsive-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository