How do I install the Responsive Design Planner skill?

Run npx skillmds@latest add tomevault-io/responsive-design-planner in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Responsive Design Planner safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Responsive Design Planner?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Responsive Design Planner free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Responsive Design Planner?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Responsive Design Planner by tomevault-io

Name: Responsive Design Planner
Author: tomevault-io

Responsive Design Planner

Plans responsive design breakpoints, mobile-first approaches, and adaptive layouts. Defines how designs adapt across different screen sizes and devices. Considers touch vs mouse interactions. Use when this capability is needed.

tomevault-io 0215b1a 2 files · 3.6 KB Updated Sep 17, 2026

File contents

Responsive Design Planner Skill

Instructions

Analyze responsive requirements from task
Define breakpoints (mobile, tablet, desktop)
Plan mobile-first design approach
Specify layout adaptations at each breakpoint
Define component variations for different screens
Consider touch vs mouse interactions
Return structured responsive design specifications with:
- Breakpoint definitions
- Layout adaptations
- Component variations
- Interaction differences
- Content prioritization

Examples

Input: "Plan responsive design for dashboard" Output:

### Responsive Design Plan

**Breakpoints:**
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px - 1919px
- Large Desktop: 1920px+

**Mobile (320px - 767px):**
- Single column layout
- Stack all components vertically
- Hamburger menu navigation
- Full-width buttons
- Larger touch targets (44px minimum)
- Simplified content
- Bottom navigation for key actions

**Tablet (768px - 1023px):**
- Two-column layout possible
- Sidebar collapses to drawer
- Touch-optimized interactions
- Medium-sized components
- Tab navigation

**Desktop (1024px+):**
- Multi-column layouts
- Sidebar visible
- Hover interactions enabled
- Smaller touch targets acceptable
- More content visible
- Keyboard shortcuts available

**Component Adaptations:**
- Navigation: Hamburger (mobile) → Sidebar (desktop)
- Cards: Single column (mobile) → Grid (desktop)
- Forms: Stacked (mobile) → Inline (desktop)
- Tables: Scrollable (mobile) → Full table (desktop)

**Interaction Differences:**
- Mobile: Touch gestures, swipe, tap
- Desktop: Hover, click, keyboard shortcuts

Breakpoint Strategies

Mobile First: Start with mobile, enhance for larger screens
Desktop First: Start with desktop, adapt for smaller screens
Common Breakpoints: 320px, 480px, 768px, 1024px, 1280px, 1920px
Content-Based: Breakpoints based on content needs
Device-Based: Breakpoints based on common device sizes

Layout Adaptations

Single Column → Multi-Column: Stack to side-by-side
Sidebar: Collapse to drawer/menu on mobile
Navigation: Horizontal to vertical, hamburger menu
Grids: Fewer columns on smaller screens
Content: Hide/show content based on screen size

Touch vs Mouse

Touch Targets: Minimum 44x44px for mobile
Hover States: Only on desktop (not mobile)
Gestures: Swipe, pinch, tap on mobile
Keyboard: More important on desktop
Click Areas: Larger on mobile for easier tapping

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: responsive-design-plannerdescription: Plans responsive design breakpoints, mobile-first approaches, and adaptive layouts. Defines how designs adapt across different screen sizes and devices. Considers touch vs mouse interactions. Use when this capability is needed.---# Responsive Design Planner Skill## Instructions1. Analyze responsive requirements from task2. Define breakpoints (mobile, tablet, desktop)3. Plan mobile-first design approach4. Specify layout adaptations at each breakpoint5. Define component variations for different screens6. Consider touch vs mouse interactions7. Return structured responsive design specifications with: - Breakpoint definitions - Layout adaptations - Component variations - Interaction differences - Content prioritization## Examples**Input:** "Plan responsive design for dashboard"**Output:**```markdown### Responsive Design Plan**Breakpoints:**- Mobile: 320px - 767px- Tablet: 768px - 1023px- Desktop: 1024px - 1919px- Large Desktop: 1920px+**Mobile (320px - 767px):**- Single column layout- Stack all components vertically- Hamburger menu navigation- Full-width buttons- Larger touch targets (44px minimum)- Simplified content- Bottom navigation for key actions**Tablet (768px - 1023px):**- Two-column layout possible- Sidebar collapses to drawer- Touch-optimized interactions- Medium-sized components- Tab navigation**Desktop (1024px+):**- Multi-column layouts- Sidebar visible- Hover interactions enabled- Smaller touch targets acceptable- More content visible- Keyboard shortcuts available**Component Adaptations:**- Navigation: Hamburger (mobile) → Sidebar (desktop)- Cards: Single column (mobile) → Grid (desktop)- Forms: Stacked (mobile) → Inline (desktop)- Tables: Scrollable (mobile) → Full table (desktop)**Interaction Differences:**- Mobile: Touch gestures, swipe, tap- Desktop: Hover, click, keyboard shortcuts```## Breakpoint Strategies- **Mobile First**: Start with mobile, enhance for larger screens- **Desktop First**: Start with desktop, adapt for smaller screens- **Common Breakpoints**: 320px, 480px, 768px, 1024px, 1280px, 1920px- **Content-Based**: Breakpoints based on content needs- **Device-Based**: Breakpoints based on common device sizes## Layout Adaptations- **Single Column → Multi-Column**: Stack to side-by-side- **Sidebar**: Collapse to drawer/menu on mobile- **Navigation**: Horizontal to vertical, hamburger menu- **Grids**: Fewer columns on smaller screens- **Content**: Hide/show content based on screen size## Touch vs Mouse- **Touch Targets**: Minimum 44x44px for mobile- **Hover States**: Only on desktop (not mobile)- **Gestures**: Swipe, pinch, tap on mobile- **Keyboard**: More important on desktop- **Click Areas**: Larger on mobile for easier tapping---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lexicalninja) — claim your Tome and manage your conversions.

Frequently asked questions