responsive design pro
Convert desktop-first layouts into fluid, touch-friendly responsive systems with professional breakpoint logic.
$5
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsresponsive design pro
Example session with this skill installed
Make this desktop navigation responsive. It has a logo, 6 links, a search bar, and a 'Get Started' button. On mobile it feels cramped and the button is hard to hit.
- Read your context and instructions
- Compiled the responsive design pro
- Generated the design tokens stylesheet
I have converted the navigation header into a responsive system that prioritizes the 'Get Started' action while moving secondary links into a mobile-friendly menu pattern.
Responsive Navigation Strategy
The strategy transitions from a horizontal spread to a focused mobile header using a trigger breakpoint at 768px.
Component Behavior Matrix
| Element | Desktop (>1024px) | Tablet (768px - 1023px) | Mobile (<767px) |
|---|---|---|---|
| Logo | Left-aligned, full size | Left-aligned | Centered or Left |
| Nav Links | Inline horizontal | Stored in Drawer | Stored in Drawer |
| Search | Expanded bar | Icon trigger | Icon trigger (top row) |
| CTA Button | Primary weight | Primary weight | Full-width bottom sticky |
Breakpoint Logic
/* Mobile First Pattern */
.nav-container {
display: flex;
justify-content: space-between;
padding: 1rem;
}
/* Hide links on mobile, show menu toggle */
.nav-links { display: none; }
.menu-toggle { display: block; }
@media (min-width: 768px) {
.nav-links {
display: flex;
gap: 1.5rem;
}
.menu-toggle { display: none; }
.search-bar { width: 200px; }
}
Mobile Interaction Rules
- Touch Targets: The 'Get Started' button and Menu toggle are assigned a minimum height of 48px.
- Drawer Navigation: Links are spaced with 12px vertical padding to prevent accidental clicks.
- Search: Tapping the search icon opens a full-screen overlay to prevent keyboard layout shifts.
Stress-Test Cases
- Long Usernames: If the nav displays a user profile, the name will truncate with ellipsis at 120px on mobile.
- Notification Badges: Badges will overlay icons rather than pushing layout width.
Next steps
- Implement the CSS media queries in your global stylesheet.
- Test the drawer menu transition on a physical device to verify thumb reachability.
- Decide if the search bar should remain visible or hide behind an icon on tablet viewports.
responsive-design-pro-tokens.css
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
What you get
About this skill
Desktop-first designs often break on mobile, leading to horizontal scrolling and unreachable buttons. This skill converts static or desktop-only layouts into fluid, responsive systems that maintain functionality across all viewports. It moves beyond simple media queries by defining how components actually behave when space is tight.
What it does
- Breakpoint logic defines specific triggers where layouts shift based on content pressure rather than arbitrary device widths.
- Component behavior mapping creates a matrix of how complex elements like navigation, tables, and grids transform for smaller screens.
- Touch ergonomics ensures all interactive elements meet accessibility standards for mobile users, including minimum tap targets.
- Stress-test planning identifies edge cases like long text strings or localized content that might break fluid layouts.
How it works
- Layout analysis identifies current desktop constraints, critical actions, and content hierarchy.
- Strategy definition establishes whether the system uses fluid grids, stacking, or progressive disclosure for mobile views.
- Logic generation provides the specific CSS or design tokens needed for tablet and mobile breakpoints.
- QA validation checks for horizontal overflow, text clipping, and reachable actions before delivery.
Frameworks & tools
This tool works with any frontend stack including React, Vue, Tailwind CSS, Bootstrap, or vanilla CSS. It focuses on platform-agnostic design logic and semantic accessibility patterns.
Why this beats prompting it yourself
Generic prompts often result in "shrunk" desktop UIs that are impossible to use on phones. This skill enforces professional standards like touch-target sizing and content-driven breakpoints, ensuring mobile versions are functional, not just visible.
Use cases
- Converting a complex SaaS dashboard for use on tablets and phones.
- Fixing "broken" mobile layouts that suffer from horizontal scrolling issues.
- Documenting responsive behavior for a new design system or component library.
- Refactoring fixed-width landing pages into modern, fluid layouts.
Known limitations
Does not perform direct image optimization or asset compression. It focuses on layout logic and interaction design rather than visual asset production.
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean today
- Passed all security checks, Safe to install