skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

responsive-paradigms

Guide show, hide, and reposition decisions across mobile, tablet, and desktop breakpoints.

Updated May 24, 2026
Search Tags:#mobile-first#breakpoints#responsive-design#web-design#ui-architecture#layout-behavior
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill responsive-paradigms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-paradigms
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/responsive-paradigms
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill responsive-paradigms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mobile, tablet, and desktop contexts represent fundamentally different interaction paradigms, not just larger layouts; this skill codifies rules to decide what to show, hide, reposition, or fix in place at each breakpoint.

Core Features & Use Cases

  • Breakpoint-aware decisions: guidance on when to hide, reposition, or sticky elements across mobile, tablet, and desktop views.
  • Section behavior rules: clear templates for visibility, layout transitions, and navigation changes per breakpoint.
  • Use Case: design a dashboard that reveals a condensed mobile view while preserving full context on desktop with persistent navigation.

Quick Start

Apply mobile-first thinking to audit a UI at each breakpoint and produce a breakpoint behavior map.

Frequently Asked Questions about responsive-paradigms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I decide what UI elements to hide or reposition at different breakpoints?▼

You apply mobile-first thinking to audit your interface at each breakpoint and produce a breakpoint behavior map. This map dictates visibility, layout transitions, and navigation changes to ensure a consistent experience across devices.

What is mobile-first responsive design and when do I need it?▼

Mobile-first responsive design starts layout planning from the smallest screen and progressively enhances it for larger breakpoints. You need it when a web or app interface must adapt navigation and content visibility across fundamentally different device contexts.

How do I design a responsive dashboard that works on mobile and desktop?▼

Design a responsive dashboard by applying breakpoint-aware decisions to reveal a condensed mobile view while preserving full context on desktop. This involves setting explicit section behavior rules for visibility, layout transitions, and persistent navigation across screen sizes.

Does responsive design require specific frameworks or UI components to implement breakpoint rules?▼

No specific frameworks or UI components are required to implement responsive design breakpoint rules. The approach provides layout behavior logic and mobile-first guidance that you can apply to any modern web or app design architecture.

What's the best way to manage layout transitions between tablet and desktop breakpoints?▼

The best way to manage layout transitions is to define explicit section behavior rules that dictate visibility and navigation changes per breakpoint. This ensures elements are intentionally repositioned or fixed rather than simply scaling to fit larger screens.

Related Skills

Explore More Design & Creative Skills→
szeyuszeyu
5

flutter-adaptive-ui

Create Flutter layouts that adapt to screen sizes using MediaQuery and LayoutBuilder.

Community
Intermediate
kyamsSRLkyamsSRL

responsive-design

Implement responsive layouts with container queries, fluid typography, and CSS Grid.

Community
Intermediate
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate
voidrotvoidrot

responsive-design

Implement responsive web layouts using CSS Grid, Flexbox, and media queries.

Community
Intermediate