responsive-design (wshobson)
- Web
Make one layout work across screen sizes — fluid grids, breakpoints, and sensible touch targets — so a page reads well on phone, tablet, and desktop without a separate mobile site.
A situation it fits
On desktop the homepage looks fine, but on phones images overlap the header and buttons are tiny so people miss taps — the client wants one build that behaves across devices.
5 scenarios in the bank answer to responsive-design (wshobson). The rest are in the game.
Skills it gets confused with
These share a family with responsive-design (wshobson), which is another way of saying they are the ones you might reach for by mistake.
- Frontend DesignDeciding how a UI should look and feel before you build it: typography, colour, hierarchy, and escaping the default templated appearance.
- Theme FactoryPut a consistent look on something already built: pick or generate a colour-and-font theme and apply it across slides, docs, or a page.
- Web Artifacts BuilderAmbitious claude.ai artifacts with many moving parts: React, Tailwind, component libraries, real state and routing rather than a single static page.
- Webapp TestingDrive a running web app with a real browser to check it works: click through a flow, grab a screenshot, read the console when it breaks.
Knowing what responsive-design (wshobson) does is the easy half. Telling it apart from the others under time pressure is the game.
Today's sessionresponsive-design (wshobson) is part of wshobson/agents. Licence: MIT. The description above was written for this game, not taken from the skill.