Responsive Design

This is a routing-first responsive troubleshooter that turns vague "breaks on mobile" reports into concrete strategy packets. It classifies the failure surface (page shell, component slot, dense data, responsive media, or reflow verification), picks one primary adaptation approach, then hands off adjacent work to ui-component-patterns for reusable APIs, web-accessibility for remediation, or design-system for breakpoint governance. The meat is in the intake classifier and the six-step strategy packet that keeps viewport versus container ownership explicit and separates dense-data edge cases from generic layout advice. Worth using when the responsive surface is still unclear and you need a bounded decision before adding more breakpoints, not when the strategy is already obvious and you just need to ship CSS.

skills.sh installs: 187
GitHub stars: 22
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add akillness/oh-my-skills --skill responsive-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Responsive Design

Use this skill when the job is to name the failing responsive surface, choose the smallest viable adaptation packet, and leave behind a short strategy + verification brief.

The job is not to dump generic CSS recipes, paste framework snippets, or absorb every neighboring frontend concern.

This skill should: