designing-layouts

Name: designing-layouts
Author: ancoleman

80installs59forks

How to install designing-layouts?

ancoleman/ai-design-components/designing-layouts

$npx -y skills add ancoleman/ai-design-components --skill designing-layouts

Installs into the current project.

Summary

Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page structures.

Files · 1

View on GitHub

SKILL.md

1	# Layout Systems & Responsive Design
2
3	## Purpose
4
5	This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.
6
7	## When to Use
8
9	Invoke this skill when:
10	- Building responsive admin dashboards with sidebars and headers
11	- Creating grid-based layouts for content cards or galleries
12	- Implementing masonry or Pinterest-style layouts
13	- Designing split-pane interfaces with resizable panels
14	- Establishing responsive breakpoint systems
15	- Structuring application shells with navigation and content areas
16	- Building mobile-first responsive designs
17	- Creating flexible spacing and container systems
18
19	## Layout Patterns
20
21	### Grid Systems
22
23	For structured, two-dimensional layouts, use CSS Grid with design tokens.
24
25	12-Column Grid:
26	```css
27	.grid-container {
28	display: grid;
29	grid-template-columns: repeat(12, 1fr);
30	gap: var(--grid-gap);
31	max-width: var(--container-max-width);
32	margin: 0 auto;
33	padding: 0 var(--container-padding-x);
34	}
35
36	.col-span-6 { grid-column: span 6; }
37	.col-span-4 { grid-column: span 4; }
38	.col-span-3 { grid-column: span 3; }
39	```
40
41	Auto-Fit Responsive Grid:
42	```css
43	.auto-grid {
44	display: grid;
45	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
46	gap: var(--grid-gap);
47	}
48	```
49
50	For complex grid layouts and advanced patterns, see `references/layout-patterns.md`.
51
52	### Flexbox Patterns
53
54	For one-dimensional layouts and alignment control.
55
56	Holy Grail Layout:
57	```css
58	.holy-grail {
59	display: flex;
60	flex-direction: column;
61	min-height: 100vh;
62	}
63
64	.holy-grail__body {
65	flex: 1;
66	display: flex;
67	}
68
69	.holy-grail__nav {
70	width: var(--sidebar-width);
71	flex-shrink: 0;
72	}
73
74	.holy-grail__main {
75	flex: 1;
76	min-width: 0; /* Prevent overflow */
77	}
78
79	.holy-grail__aside {
80	width: var(--sidebar-width);
81	flex-shrink: 0;
82	}
83	```
84
85	For additional flexbox patterns including sticky footer and centering, see `references/css-techniques.md`.
86
87	### Container Queries
88
89	For component-responsive design that adapts based on container size, not viewport.
90
91	```css
92	.card-container {
93	container-type: inline-size;
94	container-name: card;
95	}
96
97	@container card (min-width: 400px) {
98	.card {
99	grid-template-columns: auto 1fr;
100	gap: var(--spacing-lg);
101	}
102	}
103
104	@container card (min-width: 600px) {
105	.card {
106	grid-template-columns: 200px 1fr auto;
107	}
108	}
109	```
110
111	Container queries are production-ready in all modern browsers (2025). For detailed usage and fallback strategies, see `references/responsive-strategies.md`.
112
113	## Responsive Breakpoints
114
115	Use mobile-first approach with semantic breakpoints.
116
117	```css
118	/* Mobile-first breakpoints using design tokens */
119	@media (min-width: 640px) { /* sm: Tablet portrait */
120	.container { max-width: 640px; }
121	}
122
123	@media (min-width: 768px) { /* md: Tablet landscape */
124	.container { max-width: 768px; }
125	}
126
127	@media (min-width: 1024px) { /* lg: Desktop */
128	.container { max-width: 1024px; }
129	}
130
131	@media (min-width: 1280px) { /* xl: Wide desktop */
132	.container { max-width: 1280px; }
133	}
134
135	@media (min-width: 1536px) { /* 2xl: Ultra-wide */
136	.container { max-width: 1536px; }
137	}
138	```
139
140	For fluid typography and advanced responsive techniques, see `references/responsive-strategies.md`.
141
142	## Spacing Systems
143
144	Implement consistent spacing using design tokens.
145
146	```css
147	/* Base unit: 4px or 8px */
148	:root {
149	--spacing-xs: 4px;
150	--spacing-sm: 8px;
151	--spacing-md: 16px;
152	--spacing-lg: 24px;
153	--spacing-xl: 32px;
154	--spacing-2xl: 48px;
155	--spacing-3xl: 64px;
156	}
157
158	/* Apply systematically */
159	.section { padding: var(--section-spacing) 0; }
160	.container { padding: 0 var(--container-padding-x); }
161	.card { padding: var(--spacing-lg); }
162	.stack > * + * { margin-top: var(--spacing-md); }
163	```
164
165	## CSS Framework Integration
166
167	### Tailwind CSS
168
169	For utility-first approach with custom configuration:
170
171	```javascript
172	// tailwind.config.js
173	module.exports = {
174	theme: {
175	extend: {
176	spacing: {
177	'xs': 'var(--spacing-xs)',
178	'sm': 'var(--spacing-sm)',
179	'md': 'var(--spacing-md)',
180	'lg': 'var(--spacing-lg)',
181	'xl': 'var(--spacing-xl)',
182	},
183	screens: {
184	'sm': '640px',
185	'md': '768px',
186	'lg': '1024px',
187	'xl': '1280px',
188	'2xl': '1536px',
189	}
190	}
191	}
192	}
193	```
194
195	For Tailwind patterns and optimization, see `references/library-guide.md`.
196
197	## How to Use
198
199	### 1. Define Layout Requirements
200
201	Determine layout type and responsive behavior needed.
202
203	### 2. Choose Layout Method
204
205	- CSS Grid: Two-dimensional layouts, complex grids
206	- Flexbox: One-dimensional lay

People who liked this also viewed

6 picks

Type

designing-layouts

80installs59forks

View on GitHub

How to install designing-layouts?

ancoleman/ai-design-components/designing-layouts

$npx -y skills add ancoleman/ai-design-components --skill designing-layouts

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Layout Systems & Responsive Design
2
3	## Purpose
4
5	This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.
6
7	## When to Use
8
9	Invoke this skill when:
10	- Building responsive admin dashboards with sidebars and headers
11	- Creating grid-based layouts for content cards or galleries
12	- Implementing masonry or Pinterest-style layouts
13	- Designing split-pane interfaces with resizable panels
14	- Establishing responsive breakpoint systems
15	- Structuring application shells with navigation and content areas
16	- Building mobile-first responsive designs
17	- Creating flexible spacing and container systems
18
19	## Layout Patterns
20
21	### Grid Systems
22
23	For structured, two-dimensional layouts, use CSS Grid with design tokens.
24
25	12-Column Grid:
26	```css
27	.grid-container {
28	display: grid;
29	grid-template-columns: repeat(12, 1fr);
30	gap: var(--grid-gap);
31	max-width: var(--container-max-width);
32	margin: 0 auto;
33	padding: 0 var(--container-padding-x);
34	}
35
36	.col-span-6 { grid-column: span 6; }
37	.col-span-4 { grid-column: span 4; }
38	.col-span-3 { grid-column: span 3; }
39	```
40
41	Auto-Fit Responsive Grid:
42	```css
43	.auto-grid {
44	display: grid;
45	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
46	gap: var(--grid-gap);
47	}
48	```
49
50	For complex grid layouts and advanced patterns, see `references/layout-patterns.md`.
51
52	### Flexbox Patterns
53
54	For one-dimensional layouts and alignment control.
55
56	Holy Grail Layout:
57	```css
58	.holy-grail {
59	display: flex;
60	flex-direction: column;
61	min-height: 100vh;
62	}
63
64	.holy-grail__body {
65	flex: 1;
66	display: flex;
67	}
68
69	.holy-grail__nav {
70	width: var(--sidebar-width);
71	flex-shrink: 0;
72	}
73
74	.holy-grail__main {
75	flex: 1;
76	min-width: 0; /* Prevent overflow */
77	}
78
79	.holy-grail__aside {
80	width: var(--sidebar-width);
81	flex-shrink: 0;
82	}
83	```
84
85	For additional flexbox patterns including sticky footer and centering, see `references/css-techniques.md`.
86
87	### Container Queries
88
89	For component-responsive design that adapts based on container size, not viewport.
90
91	```css
92	.card-container {
93	container-type: inline-size;
94	container-name: card;
95	}
96
97	@container card (min-width: 400px) {
98	.card {
99	grid-template-columns: auto 1fr;
100	gap: var(--spacing-lg);
101	}
102	}
103
104	@container card (min-width: 600px) {
105	.card {
106	grid-template-columns: 200px 1fr auto;
107	}
108	}
109	```
110
111	Container queries are production-ready in all modern browsers (2025). For detailed usage and fallback strategies, see `references/responsive-strategies.md`.
112
113	## Responsive Breakpoints
114
115	Use mobile-first approach with semantic breakpoints.
116
117	```css
118	/* Mobile-first breakpoints using design tokens */
119	@media (min-width: 640px) { /* sm: Tablet portrait */
120	.container { max-width: 640px; }
121	}
122
123	@media (min-width: 768px) { /* md: Tablet landscape */
124	.container { max-width: 768px; }
125	}
126
127	@media (min-width: 1024px) { /* lg: Desktop */
128	.container { max-width: 1024px; }
129	}
130
131	@media (min-width: 1280px) { /* xl: Wide desktop */
132	.container { max-width: 1280px; }
133	}
134
135	@media (min-width: 1536px) { /* 2xl: Ultra-wide */
136	.container { max-width: 1536px; }
137	}
138	```
139
140	For fluid typography and advanced responsive techniques, see `references/responsive-strategies.md`.
141
142	## Spacing Systems
143
144	Implement consistent spacing using design tokens.
145
146	```css
147	/* Base unit: 4px or 8px */
148	:root {
149	--spacing-xs: 4px;
150	--spacing-sm: 8px;
151	--spacing-md: 16px;
152	--spacing-lg: 24px;
153	--spacing-xl: 32px;
154	--spacing-2xl: 48px;
155	--spacing-3xl: 64px;
156	}
157
158	/* Apply systematically */
159	.section { padding: var(--section-spacing) 0; }
160	.container { padding: 0 var(--container-padding-x); }
161	.card { padding: var(--spacing-lg); }
162	.stack > * + * { margin-top: var(--spacing-md); }
163	```
164
165	## CSS Framework Integration
166
167	### Tailwind CSS
168
169	For utility-first approach with custom configuration:
170
171	```javascript
172	// tailwind.config.js
173	module.exports = {
174	theme: {
175	extend: {
176	spacing: {
177	'xs': 'var(--spacing-xs)',
178	'sm': 'var(--spacing-sm)',
179	'md': 'var(--spacing-md)',
180	'lg': 'var(--spacing-lg)',
181	'xl': 'var(--spacing-xl)',
182	},
183	screens: {
184	'sm': '640px',
185	'md': '768px',
186	'lg': '1024px',
187	'xl': '1280px',
188	'2xl': '1536px',
189	}
190	}
191	}
192	}
193	```
194
195	For Tailwind patterns and optimization, see `references/library-guide.md`.
196
197	## How to Use
198
199	### 1. Define Layout Requirements
200
201	Determine layout type and responsive behavior needed.
202
203	### 2. Choose Layout Method
204
205	- CSS Grid: Two-dimensional layouts, complex grids
206	- Flexbox: One-dimensional lay

People who liked this also viewed

6 picks

Type