Run any Skill in Manus with one click

responsive-design

Stars2

Forks0

UpdatedJune 27, 2026 at 09:12

Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

FilippoDeSilva

FilippoDeSilva/skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

5 files

SKILL.md

readonly

name	responsive-design
description	Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
license	MIT
version	1.0.0
author	[Filippo De Silva](https://github.com/FilippoDeSilva)
tags	["ui-ux-design","responsive-design","css","grid","flexbox"]

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

Implementing mobile-first responsive layouts
Using container queries for component-based responsiveness
Creating fluid typography and spacing scales
Building complex layouts with CSS Grid and Flexbox
Designing breakpoint strategies for design systems
Implementing responsive images and media
Creating adaptive navigation patterns
Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Mobile-First: Start with mobile styles, enhance for larger screens
Content Breakpoints: Set breakpoints based on content, not devices
Fluid Over Fixed: Use fluid values for typography and spacing
Container Queries: Use for component-level responsiveness
Test Real Devices: Simulators don't catch all issues
Performance: Optimize images, lazy load off-screen content
Touch Targets: Maintain 44x44px minimum on mobile
Logical Properties: Use inline/block for internationalization

Common Issues

Horizontal Overflow: Content breaking out of viewport
Fixed Widths: Using px instead of relative units
Viewport Height: 100vh issues on mobile browsers
Font Size: Text too small on mobile
Touch Targets: Buttons too small to tap accurately
Aspect Ratio: Images squishing or stretching
Z-Index Stacking: Overlays breaking on different screens

More from this repository

same repository

context7

FilippoDeSilva/skills

Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific library, framework, SDK, CLI tool, or cloud service -- even for well-known ones like React, Next.js, Prisma, Express, Tailwind, Django, or Spring Boot. Your training data may not reflect recent API changes or version updates. Always use for: API syntax questions, configuration options, version migration issues, "how do I" questions mentioning a library name, debugging that involves library-specific behavior, setup instructions, and CLI tool usage. Use even when you think you know the answer -- do not rely on training data for API details, signatures, or configuration options as they are frequently outdated. Always verify against current docs. Prefer this over web search for library documentation and API details.

2026-07-022

refactor-plan

FilippoDeSilva/skills

Create a concrete plan before starting a multi-file refactor. Use when the user asks to plan, sequence, scope, or safely execute a refactor across multiple files; always investigate first, output the plan, and wait for confirmation before making code changes.

2026-07-022

react-native-design

FilippoDeSilva/skills

Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.

2026-06-272

react-native-optimizations

FilippoDeSilva/skills

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

2026-06-272

flutter-app

FilippoDeSilva/skills

Design Flutter applications to scale by strictly adhering to architectural principles: enforce separation of concerns, maintain single source of truth, implement unidirectional data flow, and treat UI as a function of state. Use when structuring layers, implementing data layer with services and repositories, or following feature implementation workflow.

2026-06-272

shadcn-ui-flutter

FilippoDeSilva/skills

A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.

2026-06-272

name	responsive-design
description	Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
license	MIT
version	1.0.0
author	[Filippo De Silva](https://github.com/FilippoDeSilva)
tags	["ui-ux-design","responsive-design","css","grid","flexbox"]

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

Implementing mobile-first responsive layouts
Using container queries for component-based responsiveness
Creating fluid typography and spacing scales
Building complex layouts with CSS Grid and Flexbox
Designing breakpoint strategies for design systems
Implementing responsive images and media
Creating adaptive navigation patterns
Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

Best Practices

Mobile-First: Start with mobile styles, enhance for larger screens
Content Breakpoints: Set breakpoints based on content, not devices
Fluid Over Fixed: Use fluid values for typography and spacing
Container Queries: Use for component-level responsiveness
Test Real Devices: Simulators don't catch all issues
Performance: Optimize images, lazy load off-screen content
Touch Targets: Maintain 44x44px minimum on mobile
Logical Properties: Use inline/block for internationalization

Common Issues

Horizontal Overflow: Content breaking out of viewport
Fixed Widths: Using px instead of relative units
Viewport Height: 100vh issues on mobile browsers
Font Size: Text too small on mobile
Touch Targets: Buttons too small to tap accurately
Aspect Ratio: Images squishing or stretching
Z-Index Stacking: Overlays breaking on different screens