responsive-paradigms

Name: responsive-paradigms
Author: dembrandt

276installs5forks

How to install responsive-paradigms?

dembrandt/dembrandt-skills/responsive-paradigms

$npx -y skills add dembrandt/dembrandt-skills --skill responsive-paradigms

Installs into the current project.

Summary

Mobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down. Sections can be hidden, repositioned, or made sticky on mobile. Navigation and primary actions move. Use when designing responsive layouts, adapting desktop UI for mobile, or

Files · 1

View on GitHub

SKILL.md

1	# Responsive Paradigms
2
3	Mobile, tablet, and desktop are fundamentally different interaction contexts. The input method, screen real estate, viewing distance, and session intent all differ. Responsive design is not the same layout at different widths — it is a different design decision at each breakpoint.
4
5	## The Three Paradigms
6
7	### Mobile (< 768px)
8	- Input: Touch — fingers, not a cursor. Tap targets ≥ 44×44px.
9	- Navigation: Bottom tab bar (thumb reachable) or hamburger drawer. Top navigation is hard to reach.
10	- Session: Often interrupted, task-focused, shorter. Show the most important thing first.
11	- Content: Single column. Vertical scroll only. No hover states.
12	- Primary action: Floating action button (FAB) or full-width button at the bottom of the screen.
13
14	### Tablet (768px–1024px)
15	- Input: Touch and sometimes keyboard/trackpad. Hybrid paradigm.
16	- Navigation: Can support a persistent sidebar at landscape orientation; collapses to drawer at portrait.
17	- Content: Two-column layouts work. Master-detail patterns (list + detail side by side) are natural.
18	- Primary action: Can be in-line with content, not necessarily floating.
19
20	### Desktop (> 1024px)
21	- Input: Mouse with hover states, keyboard shortcuts, precise clicking.
22	- Navigation: Persistent sidebar or top navigation. Both visible simultaneously.
23	- Content: Multi-column, dense information, toolbars, context menus.
24	- Primary action: In-context with content, supported by keyboard shortcuts for power users.
25
26	---
27
28	## Section Behaviour Across Breakpoints
29
30	Not every section needs to appear on every breakpoint at the same position — or at all.
31
32	### Sections can be hidden on mobile
33	Secondary content (related articles, supplementary sidebars, decorative illustrations) can be hidden below a breakpoint. Ask: does a mobile user need this? If no, `display: none` at mobile is correct.
34
35	### Stacking is the default; repositioning is allowed within the same container
36	The default responsive move is simply to stack — a horizontal row of blocks becomes a vertical column as the viewport narrows. This preserves order and grouping, so the user's mental model of the page survives the breakpoint unchanged. Reach for it first.
37
38	Repositioning an element is also allowed — but only if it stays within roughly the same container area / region. A sidebar that sits to the left on desktop can move below the main content on mobile, or collapse into an expandable section: it's still "the stuff next to / around the main content", just re-flowed. That's fine.
39
40	What to avoid: repositioning that moves an element into a different container or scope — a control lifted from its card into the global header reads as a different UI, not a reflow. Keep the parent region stable; change only how it flows within it.
41
42	```
43	Desktop: Mobile:
44	[Main] [Sidebar] → [Main]
45	[▼ Related] ← collapsed accordion, still "around the main content"
46	```
47
48	### Sticky behaviour can change per breakpoint
49	An element that is `position: sticky` on desktop may need to become a fixed bottom bar on mobile, or be removed from sticky positioning entirely to free up screen space.
50
51	```css
52	.toolbar {
53	position: static; /* mobile: inline, not sticky */
54	}
55
56	@media (min-width: 1024px) {
57	.toolbar {
58	position: sticky;
59	top: var(--header-height);
60	}
61	}
62	```
63
64	### Navigation transforms completely
65	\| Desktop \| Mobile \|
66	\|---\|---\|
67	\| Persistent top nav or sidebar \| Bottom tab bar or hamburger drawer \|
68	\| Visible labels + icons \| Icons only (bottom nav) or full list (drawer) \|
69	\| Hover states on nav items \| None — touch only \|
70	\|

People who liked this also viewed

6 picks

Type

responsive-paradigms

276installs5forks

View on GitHub

How to install responsive-paradigms?

dembrandt/dembrandt-skills/responsive-paradigms

$npx -y skills add dembrandt/dembrandt-skills --skill responsive-paradigms

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Responsive Paradigms
2
3	Mobile, tablet, and desktop are fundamentally different interaction contexts. The input method, screen real estate, viewing distance, and session intent all differ. Responsive design is not the same layout at different widths — it is a different design decision at each breakpoint.
4
5	## The Three Paradigms
6
7	### Mobile (< 768px)
8	- Input: Touch — fingers, not a cursor. Tap targets ≥ 44×44px.
9	- Navigation: Bottom tab bar (thumb reachable) or hamburger drawer. Top navigation is hard to reach.
10	- Session: Often interrupted, task-focused, shorter. Show the most important thing first.
11	- Content: Single column. Vertical scroll only. No hover states.
12	- Primary action: Floating action button (FAB) or full-width button at the bottom of the screen.
13
14	### Tablet (768px–1024px)
15	- Input: Touch and sometimes keyboard/trackpad. Hybrid paradigm.
16	- Navigation: Can support a persistent sidebar at landscape orientation; collapses to drawer at portrait.
17	- Content: Two-column layouts work. Master-detail patterns (list + detail side by side) are natural.
18	- Primary action: Can be in-line with content, not necessarily floating.
19
20	### Desktop (> 1024px)
21	- Input: Mouse with hover states, keyboard shortcuts, precise clicking.
22	- Navigation: Persistent sidebar or top navigation. Both visible simultaneously.
23	- Content: Multi-column, dense information, toolbars, context menus.
24	- Primary action: In-context with content, supported by keyboard shortcuts for power users.
25
26	---
27
28	## Section Behaviour Across Breakpoints
29
30	Not every section needs to appear on every breakpoint at the same position — or at all.
31
32	### Sections can be hidden on mobile
33	Secondary content (related articles, supplementary sidebars, decorative illustrations) can be hidden below a breakpoint. Ask: does a mobile user need this? If no, `display: none` at mobile is correct.
34
35	### Stacking is the default; repositioning is allowed within the same container
36	The default responsive move is simply to stack — a horizontal row of blocks becomes a vertical column as the viewport narrows. This preserves order and grouping, so the user's mental model of the page survives the breakpoint unchanged. Reach for it first.
37
38	Repositioning an element is also allowed — but only if it stays within roughly the same container area / region. A sidebar that sits to the left on desktop can move below the main content on mobile, or collapse into an expandable section: it's still "the stuff next to / around the main content", just re-flowed. That's fine.
39
40	What to avoid: repositioning that moves an element into a different container or scope — a control lifted from its card into the global header reads as a different UI, not a reflow. Keep the parent region stable; change only how it flows within it.
41
42	```
43	Desktop: Mobile:
44	[Main] [Sidebar] → [Main]
45	[▼ Related] ← collapsed accordion, still "around the main content"
46	```
47
48	### Sticky behaviour can change per breakpoint
49	An element that is `position: sticky` on desktop may need to become a fixed bottom bar on mobile, or be removed from sticky positioning entirely to free up screen space.
50
51	```css
52	.toolbar {
53	position: static; /* mobile: inline, not sticky */
54	}
55
56	@media (min-width: 1024px) {
57	.toolbar {
58	position: sticky;
59	top: var(--header-height);
60	}
61	}
62	```
63
64	### Navigation transforms completely
65	\| Desktop \| Mobile \|
66	\|---\|---\|
67	\| Persistent top nav or sidebar \| Bottom tab bar or hamburger drawer \|
68	\| Visible labels + icons \| Icons only (bottom nav) or full list (drawer) \|
69	\| Hover states on nav items \| None — touch only \|
70	\|

People who liked this also viewed

6 picks

Type