Claude-skill-registry applying-responsive-standards

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/applying-responsive-standards" ~/.claude/skills/majiayu000-claude-skill-registry-applying-responsive-standards && rm -rf "$T"

manifest: 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

<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
```
).