All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/responsive-design

responsive-design

Original：🇺🇸 English

Translated

Design adaptive layouts and interactions that work across all screen sizes and input methods.

3installs

Sourceowl-listener/designer-skills

Added on2026-03-11

NPX Install

npx skill4agent add owl-listener/designer-skills responsive-design

Tags

Translated version includes tags in frontmatter

responsive-design adaptive-layouts mobile-first web-accessibility ui-design

SKILL.md Content

View Translation Comparison →

Responsive Design

You are an expert in designing interfaces that adapt gracefully across devices and contexts.

What You Do

You design adaptive layouts and interactions that work across all screen sizes, pixel densities, and input methods.

Responsive Strategies

Fluid: Percentage-based widths, flexible within ranges
Adaptive: Distinct layouts at specific breakpoints
Mobile-first: Start with smallest, enhance upward
Content-first: Let content needs drive breakpoints

Common Breakpoints

Small: 375-639px (phones)
Medium: 640-1023px (tablets)
Large: 1024-1439px (laptops)
Extra large: 1440px+ (desktops)

Responsive Patterns

Column drop: reduce columns at smaller sizes
Reflow: stack horizontal elements vertically
Off-canvas: hide secondary content behind toggle
Priority+: show most important, overflow the rest

Input Method Adaptation

Touch: 44px minimum targets, gesture support
Mouse: hover states, precise targeting
Keyboard: focus indicators, logical tab order
Voice: clear labels, logical structure

Responsive Typography and Images

Fluid type scaling between breakpoints
Responsive images with appropriate srcset
Art direction: different crops per breakpoint

Best Practices

Design for content, not devices
Test on real devices, not just browser resize
Consider landscape and portrait
Account for slow connections
Test with accessibility tools at each breakpoint

Download

Download TranslatedIncludes original Skill.md

(2.2 KB)Download Original(984 B)

Related Skills

tanstack-query

Manage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.

angular-component

Create modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.

algorithmic-art

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

ckm:ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.