sukirman1901sukirman1901/frontend-expert/skills/responsive/SKILL.md

responsive

Skill9 starsChanged 2 months agoMITView on GitHub

Mobile-first responsive UI for all devices (320–1440+): no horizontal scroll, 44px tap targets, drawer nav, full-width primary buttons on phone, adaptive tables/forms. REQUIRED on every user-facing page/layout build — including "mobile", "responsive", "tablet", burger menu, or /ui /polish. Report Responsive in Conventions check.

In this repository36 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- .cursor/rules/design-system-enforcer.mdcCursor rule
- frontend-expertSkill
- accessibilitySkill
- anti-slop-codeSkill
- anti-slop-designSkill
- app-shellSkill
- architectureSkill
- componentsSkill
- content-designSkill
- data-fetchingSkill
- design-colorSkill
- design-directionSkill
- design-foundationsSkill
- design-surfacesSkill
- design-typographySkill
- design-vocabularySkill
- devtoolsSkill
- engineering-vocabularySkill
- fidelitySkill
- formsSkill
- frontend-expertSkill
- marketingSkill
- monitoringSkill
- motion-inspectionSkill
- motionSkill
- performanceSkill
- polishSkill
- prototypeSkill
- quality-loopSkill
- seoSkill
- skill-authoringSkill
- testingSkill
- tokensSkill
- webglSkill

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.

≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Very specific:
Every /ui / polish build that touches layout
line 19

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

Responsive UI

Overview

Ship layouts that work on all devices — phone floor through desktop. Not React Native: responsive web.

When to use

Every /ui / polish build that touches layout
“Mobile”, “responsive”, “tablet”, “semua device”, burger / sidebar
Tables, dashboards, nav, forms, marketing pages

When to skip

Pure token/color tweak with no layout change (still keep existing responsive behavior)
Explicit waiver: desktop-only internal tool (must state in Conventions)

Workflow

Mobile-first — base styles for ~320px; enhance at 768 / 1024 / 1440
Tap targets — pack recommendation ≥44×44px for primary touch controls; WCAG 2.5.8 AA is 24×24 (accessibility)
Adapt content — tables → cards/stack; side nav → overlay drawer + backdrop; don’t hide profile/account without alternative
Mobile controls — primary CTAs / form submit / destructive row actions → width: 100% below 768; stack button rows vertically
Breakpoint cleanup — on resize past mobile, close drawer / clear is-open / unlock body scroll
Report — Conventions: Responsive: 320/768/1024/1440 checked

Figma Auto Layout → CSS (quick)

Figma	CSS
Fill	`width: 100%` / `flex: 1` / `align-self: stretch`
Hug	`width: fit-content` / `flex: 0 0 auto`
Fixed	Explicit width/height
Gap / Padding	`gap` / `padding` (tokens)
Primary CTA on phone	Fill → `width: 100%` below 768

Full table: references/responsive.md → Figma Auto Layout ↔ CSS.

Mobile controls (MUST <768)

Control	Mobile rule	Don’t
Primary button	Full width (`width: 100%`) in forms, toolbars, plan/row actions	Tiny desktop-width CTA floating left
Secondary in same row	Stack under primary, also full width when it’s the only action column	Side-by-side cramped pair
Form inputs	Full width; `font-size ≥ 16px` (prevents iOS zoom)	`14px` inputs that zoom the page
Icon utilities in topbar	Keep essentials (e.g. theme + bell + avatar); hide secondary (search) if crowded	4–5 icon buttons + label Menu
Profile	Avatar-only → account menu; name/email inside menu	Always-on name/email in chrome, or `display: none` on whole profile
Theme	Topbar icon toggle	Sidebar footer “Dark mode” button

Example:

@media (max-width: 767px) {
  .form__actions { flex-direction: column; align-items: stretch; }
  .form__actions .btn--primary,
  .toolbar .btn--primary,
  .row .btn { width: 100%; }
  .field input { font-size: 1rem; min-height: 2.75rem; }
}

Mobile nav (MUST for dashboard/shell)

Do	Don’t
Fixed/overlay drawer + dimmed backdrop	`display:block` nav that pushes page down
Icon-only burger that swaps to close (X); close also inside drawer	Labeled “Menu” still visible beside open panel
Close on backdrop, Escape, nav select	Leave drawer open across breakpoint changes
`aria-expanded` + focus management	Focus trap ignored

Checklist

Verified (or reasoned) at 320 / 768 / 1024 / 1440
No page-level horizontal overflow
Touch targets ≥44px for primary controls (recommendation; 2.5.8 is 24px)
Primary buttons full-width on mobile (forms / toolbars / action rows)
Figma Fill/Hug mapped correctly when a design file exists
Inputs ≥16px font on mobile
Drawer + backdrop for side nav on small screens
Account/profile control not deleted on mobile
Conventions Responsive line filled

Depth

Full rules + patterns: references/responsive.md.
Shell chrome: app-shell.
Optional local sandbox: test/ (gitignored; not shipped).
Ship gate: references/compliance-gates.md.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free