mobile-responsive

Name: mobile-responsive
Author: ominou5

68stars15forks

How to install mobile-responsive?

ominou5/funnel-architect-plugin/mobile-responsive

$npx -y skills add ominou5/funnel-architect-plugin --skill mobile-responsive

Installs into the current project.

Summary

Mobile-first responsive design patterns for sales funnels. Ensures every page works flawlessly on all screen sizes with proper touch targets, readable typography, and fast load times.

Files · 1

View on GitHub

SKILL.md

1	# Mobile-Responsive Design
2
3	Over 60% of funnel traffic comes from mobile. Build mobile-first, always.
4
5	## Breakpoint System
6
7	```css
8	/* Mobile-first: base styles are for mobile */
9
10	/* Tablet */
11	@media (min-width: 768px) { /* ... */ }
12
13	/* Desktop */
14	@media (min-width: 1024px) { /* ... */ }
15
16	/* Large desktop */
17	@media (min-width: 1280px) { /* ... */ }
18	```
19
20	## Required Meta Tag
21
22	Every HTML page must include:
23
24	```html
25	<meta name="viewport" content="width=device-width, initial-scale=1.0">
26	```
27
28	## Layout Patterns
29
30	### Single-Column Mobile Layout
31	```css
32	.container {
33	width: 100%;
34	max-width: 1200px;
35	margin: 0 auto;
36	padding: 0 16px;
37	}
38
39	/* Stack everything on mobile */
40	.grid {
41	display: grid;
42	grid-template-columns: 1fr;
43	gap: 24px;
44	}
45
46	@media (min-width: 768px) {
47	.grid { grid-template-columns: repeat(2, 1fr); }
48	}
49
50	@media (min-width: 1024px) {
51	.grid { grid-template-columns: repeat(3, 1fr); }
52	}
53	```
54
55	### Sticky Mobile CTA
56	```css
57	.mobile-cta-bar {
58	display: none;
59	}
60
61	@media (max-width: 767px) {
62	.mobile-cta-bar {
63	display: flex;
64	position: fixed;
65	bottom: 0;
66	left: 0;
67	right: 0;
68	padding: 12px 16px;
69	background: rgba(255, 255, 255, 0.95);
70	backdrop-filter: blur(10px);
71	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
72	z-index: 100;
73	}
74
75	.mobile-cta-bar .cta-primary {
76	width: 100%;
77	min-height: 48px;
78	font-size: 16px;
79	}
80
81	/* Prevent content overlap with sticky bar */
82	body { padding-bottom: 80px; }
83	}
84	```
85
86	## Typography Scale
87
88	```css
89	:root {
90	/* Mobile-first sizes */
91	--text-xs: 0.75rem; /* 12px */
92	--text-sm: 0.875rem; /* 14px */
93	--text-base: 1rem; /* 16px — minimum for body */
94	--text-lg: 1.125rem; /* 18px */
95	--text-xl: 1.25rem; /* 20px */
96	--text-2xl: 1.5rem; /* 24px */
97	--text-3xl: 1.875rem; /* 30px */
98	--text-4xl: 2.25rem; /* 36px */
99	}
100
101	h1 {
102	font-size: var(--text-3xl);
103	line-height: 1.2;
104	}
105
106	@media (min-width: 768px) {
107	h1 { font-size: var(--text-4xl); }
108	}
109
110	@media (min-width: 1024px) {
111	h1 { font-size: 3rem; /* 48px */ }
112	}
113
114	body {
115	font-size: var(--text-base); /* Never below 16px — prevents iOS zoom */
116	line-height: 1.6;
117	}
118	```
119
120	## Touch Target Requirements
121
122	```css
123	/* Minimum 44x44px for all interactive elements */
124	button, a, input, select, textarea {
125	min-height: 44px;
126	min-width: 44px;
127	}
128
129	/* Adequate spacing between tap targets */
130	.nav-links a {
131	padding: 12px 16px;
132	}
133
134	.form-group + .form-group {
135	margin-top: 16px;
136	}
137	```
138
139	## Responsive Images
140
141	```css
142	img {
143	max-width: 100%;
144	height: auto;
145	display: block;
146	}
147	```
148
149	## Mobile Testing Checklist
150
151	- [ ] Viewport meta tag present
152	- [ ] No horizontal scroll at any viewport width
153	- [ ] All text readable without zooming (min 16px)
154	- [ ] All touch targets at least 44x44px
155	- [ ] Forms usable with thumb (single column, large inputs)
156	- [ ] CTA visible without scrolling OR sticky bar present
157	- [ ] Images scale proportionally
158	- [ ] No fixed-width elements wider than viewport
159	- [ ] Modals/popups fit within mobile viewport
160	- [ ] Page loads in < 3s on 3G connection

People who liked this also viewed

6 picks

Type

mobile-responsive

68stars15forks

View on GitHub

How to install mobile-responsive?

ominou5/funnel-architect-plugin/mobile-responsive

$npx -y skills add ominou5/funnel-architect-plugin --skill mobile-responsive

Installs into the current project.

Summary

Mobile-first responsive design patterns for sales funnels. Ensures every page works flawlessly on all screen sizes with proper touch targets, readable typography, and fast load times.

Files · 1

View on GitHub

SKILL.md

1	# Mobile-Responsive Design
2
3	Over 60% of funnel traffic comes from mobile. Build mobile-first, always.
4
5	## Breakpoint System
6
7	```css
8	/* Mobile-first: base styles are for mobile */
9
10	/* Tablet */
11	@media (min-width: 768px) { /* ... */ }
12
13	/* Desktop */
14	@media (min-width: 1024px) { /* ... */ }
15
16	/* Large desktop */
17	@media (min-width: 1280px) { /* ... */ }
18	```
19
20	## Required Meta Tag
21
22	Every HTML page must include:
23
24	```html
25	<meta name="viewport" content="width=device-width, initial-scale=1.0">
26	```
27
28	## Layout Patterns
29
30	### Single-Column Mobile Layout
31	```css
32	.container {
33	width: 100%;
34	max-width: 1200px;
35	margin: 0 auto;
36	padding: 0 16px;
37	}
38
39	/* Stack everything on mobile */
40	.grid {
41	display: grid;
42	grid-template-columns: 1fr;
43	gap: 24px;
44	}
45
46	@media (min-width: 768px) {
47	.grid { grid-template-columns: repeat(2, 1fr); }
48	}
49
50	@media (min-width: 1024px) {
51	.grid { grid-template-columns: repeat(3, 1fr); }
52	}
53	```
54
55	### Sticky Mobile CTA
56	```css
57	.mobile-cta-bar {
58	display: none;
59	}
60
61	@media (max-width: 767px) {
62	.mobile-cta-bar {
63	display: flex;
64	position: fixed;
65	bottom: 0;
66	left: 0;
67	right: 0;
68	padding: 12px 16px;
69	background: rgba(255, 255, 255, 0.95);
70	backdrop-filter: blur(10px);
71	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
72	z-index: 100;
73	}
74
75	.mobile-cta-bar .cta-primary {
76	width: 100%;
77	min-height: 48px;
78	font-size: 16px;
79	}
80
81	/* Prevent content overlap with sticky bar */
82	body { padding-bottom: 80px; }
83	}
84	```
85
86	## Typography Scale
87
88	```css
89	:root {
90	/* Mobile-first sizes */
91	--text-xs: 0.75rem; /* 12px */
92	--text-sm: 0.875rem; /* 14px */
93	--text-base: 1rem; /* 16px — minimum for body */
94	--text-lg: 1.125rem; /* 18px */
95	--text-xl: 1.25rem; /* 20px */
96	--text-2xl: 1.5rem; /* 24px */
97	--text-3xl: 1.875rem; /* 30px */
98	--text-4xl: 2.25rem; /* 36px */
99	}
100
101	h1 {
102	font-size: var(--text-3xl);
103	line-height: 1.2;
104	}
105
106	@media (min-width: 768px) {
107	h1 { font-size: var(--text-4xl); }
108	}
109
110	@media (min-width: 1024px) {
111	h1 { font-size: 3rem; /* 48px */ }
112	}
113
114	body {
115	font-size: var(--text-base); /* Never below 16px — prevents iOS zoom */
116	line-height: 1.6;
117	}
118	```
119
120	## Touch Target Requirements
121
122	```css
123	/* Minimum 44x44px for all interactive elements */
124	button, a, input, select, textarea {
125	min-height: 44px;
126	min-width: 44px;
127	}
128
129	/* Adequate spacing between tap targets */
130	.nav-links a {
131	padding: 12px 16px;
132	}
133
134	.form-group + .form-group {
135	margin-top: 16px;
136	}
137	```
138
139	## Responsive Images
140
141	```css
142	img {
143	max-width: 100%;
144	height: auto;
145	display: block;
146	}
147	```
148
149	## Mobile Testing Checklist
150
151	- [ ] Viewport meta tag present
152	- [ ] No horizontal scroll at any viewport width
153	- [ ] All text readable without zooming (min 16px)
154	- [ ] All touch targets at least 44x44px
155	- [ ] Forms usable with thumb (single column, large inputs)
156	- [ ] CTA visible without scrolling OR sticky bar present
157	- [ ] Images scale proportionally
158	- [ ] No fixed-width elements wider than viewport
159	- [ ] Modals/popups fit within mobile viewport
160	- [ ] Page loads in < 3s on 3G connection

People who liked this also viewed

6 picks

Type