Agent skill

applying-responsive-standards

Rules for mobile-first responsive design using Tailwind CSS. Use on every UI component to ensure cross-device compatibility.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/applying-responsive-standards

SKILL.md

Responsive Design Standards

When to use this skill

  • Adding any new UI element or layout.
  • Fixing layout bugs on mobile or tablet.

Coding Style

  • Mobile First: Write base styles for mobile, then use md:, lg:, xl: to upgrade for larger screens.
  • Stacking: Use flex-col on mobile and flex-row on desktop (md:flex-row).
  • Grid: Default to 1 column on mobile, 2 on tablet, and 3+ on desktop.

Example

html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Tour Cards -->
</div>

Instructions

  • Testing: Frequently resize the browser or use DevTools device emulator.
  • Padding: Increase horizontal padding on desktop (px-4 vs md:px-20).

Didn't find tool you were looking for?

Be as detailed as possible for better results