z-index-scale

Name: z-index-scale
Author: dylantarre

33stars3forks

How to install z-index-scale?

dylantarre/design-system-skills/z-index-scale

$npx -y skills add dylantarre/design-system-skills --skill z-index-scale

Installs into the current project.

Summary

Generates systematic z-index tokens for layering management. Use when organizing stacking contexts, modal/dropdown z-index, tooltip layers, or fixing z-index conflicts. Outputs CSS, Tailwind, or JSON.

Files · 1

View on GitHub

SKILL.md

1	# Z-Index Scale
2
3	## Overview
4
5	Generate a systematic z-index token scale that eliminates arbitrary values and z-index conflicts. Creates predictable layering for dropdowns, modals, tooltips, and overlays.
6
7	## When to Use
8
9	- Setting up z-index tokens for a new design system
10	- Fixing z-index conflicts and "wars" in existing code
11	- Creating consistent layering for overlays, modals, tooltips
12	- Documenting stacking context expectations
13
14	## Quick Reference: Layering Levels
15
16	\| Level \| Purpose \| Typical Range \|
17	\|-------\|---------\|---------------\|
18	\| Base \| Default content flow \| 0 \|
19	\| Raised \| Cards, subtle elevation \| 1-10 \|
20	\| Dropdown \| Menus, selects, popovers \| 100-199 \|
21	\| Sticky \| Sticky headers, sidebars \| 200-299 \|
22	\| Fixed \| Fixed navigation, FABs \| 300-399 \|
23	\| Overlay \| Backdrop, dimmer \| 400-499 \|
24	\| Modal \| Dialogs, sheets \| 500-599 \|
25	\| Toast \| Notifications, snackbars \| 600-699 \|
26	\| Tooltip \| Tooltips, hovers \| 700-799 \|
27	\| Maximum \| Debug overlays, dev tools \| 9999 \|
28
29	## The Process
30
31	1. Understand stacking needs: Identify all layered components in the system
32	2. Ask output format: CSS custom properties, Tailwind config, or JSON tokens
33	3. Generate scale: Create tokens with semantic naming
34	4. Document usage: Explain which token for which use case
35
36	## Output Formats
37
38	### CSS Custom Properties
39
40	```css
41	:root {
42	/* Base - default document flow */
43	--z-index-base: 0;
44	--z-index-below: -1;
45
46	/* Raised - subtle elevation within content */
47	--z-index-raised: 1;
48	--z-index-raised-2: 2;
49	--z-index-raised-3: 3;
50
51	/* Dropdown - menus, selects, comboboxes, popovers */
52	--z-index-dropdown: 100;
53
54	/* Sticky - sticky positioned elements */
55	--z-index-sticky: 200;
56
57	/* Fixed - fixed navigation, floating action buttons */
58	--z-index-fixed: 300;
59	--z-index-header: 310;
60	--z-index-sidebar: 320;
61
62	/* Overlay - backdrop behind modals */
63	--z-index-overlay: 400;
64
65	/* Modal - dialogs, sheets, drawers */
66	--z-index-modal: 500;
67	--z-index-modal-content: 510;
68
69	/* Toast - notifications, snackbars */
70	--z-index-toast: 600;
71
72	/* Tooltip - tooltips, title attributes */
73	--z-index-tooltip: 700;
74
75	/* Maximum - debug, dev tools (avoid in production) */
76	--z-index-max: 9999;
77	}
78	```
79
80	### Tailwind Config
81
82	```js
83	// tailwind.config.js
84	module.exports = {
85	theme: {
86	extend: {
87	zIndex: {
88	'below': '-1',
89	'base': '0',
90	'raised': '1',
91	'raised-2': '2',
92	'raised-3': '3',
93	'dropdown': '100',
94	'sticky': '200',
95	'fixed': '300',
96	'header': '310',
97	'sidebar': '320',
98	'overlay': '400',
99	'modal': '500',
100	'modal-content': '510',
101	'toast': '600',
102	'tooltip': '700',
103	'max': '9999',
104	},
105	},
106	},
107	};
108	```
109
110	Usage:
111	```html
112	<div class="z-overlay">Backdrop</div>
113	<div class="z-modal">Modal content</div>
114	<div class="z-tooltip">Tooltip</div>
115	```
116
117	### JSON Tokens (Design Tokens Format)
118
119	```json
120	{
121	"z-index": {
122	"below": { "value": -1, "description": "Below base content" },
123	"base": { "value": 0, "description": "Default document flow" },
124	"raised": {
125	"1": { "value": 1, "description": "Subtle elevation" },
126	"2": { "value": 2, "description": "Medium elevation" },
127	"3": { "value": 3, "description": "High elevation" }
128	},
129	"dropdown": { "value": 100, "description": "Menus, selects, popovers" },
130	"sticky": { "value": 200, "description": "Sticky positioned elements" },
131	"fixed": {
132	"base": { "value": 300, "description": "Fixed elements" },
133	"header": { "value": 310, "description": "Fixed header" },
134	"sidebar": { "value": 320, "description": "Fixed sidebar" }
135	},
136	"overlay": { "value": 400, "description": "Backdrop behind modals" },
137	"modal": {
138	"base": { "value": 500, "description": "Modal container" },
139	"content": { "value": 510, "description": "Modal inner content" }
140	},
141	"toast": { "value": 600, "description": "Notifications, snackbars" },
142	"tooltip": { "value": 700, "description": "Tooltips" },
143	"max": { "value": 9999, "description": "Maximum (debug only)" }
144	}
145	}
146	```
147
148	---
149
150	## Stacking Context Concepts
151
152	### What Creates a New Stacking Context
153
154	Understanding stacking contexts prevents unexpected z-index behavior:
155
156	```css
157	/* These properties create new stacking contexts */
158	.creates-context {
159	/* Any of these: */
160	position: relative; z-index: 1; /* positioned + z-index */
161	position: fixed; /* fixed positioning */
162	position: sticky; /* sticky positioning */
163	opacity: 0.99; /* opacity < 1 */
164	transform: translateZ(0); /* any transform */
165	filter: blur(0); /* any filter */
166	isolation: isolate; /* expli

People who liked this also viewed

6 picks

Type

z-index-scale

33stars3forks

View on GitHub

How to install z-index-scale?

dylantarre/design-system-skills/z-index-scale

$npx -y skills add dylantarre/design-system-skills --skill z-index-scale

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Z-Index Scale
2
3	## Overview
4
5	Generate a systematic z-index token scale that eliminates arbitrary values and z-index conflicts. Creates predictable layering for dropdowns, modals, tooltips, and overlays.
6
7	## When to Use
8
9	- Setting up z-index tokens for a new design system
10	- Fixing z-index conflicts and "wars" in existing code
11	- Creating consistent layering for overlays, modals, tooltips
12	- Documenting stacking context expectations
13
14	## Quick Reference: Layering Levels
15
16	\| Level \| Purpose \| Typical Range \|
17	\|-------\|---------\|---------------\|
18	\| Base \| Default content flow \| 0 \|
19	\| Raised \| Cards, subtle elevation \| 1-10 \|
20	\| Dropdown \| Menus, selects, popovers \| 100-199 \|
21	\| Sticky \| Sticky headers, sidebars \| 200-299 \|
22	\| Fixed \| Fixed navigation, FABs \| 300-399 \|
23	\| Overlay \| Backdrop, dimmer \| 400-499 \|
24	\| Modal \| Dialogs, sheets \| 500-599 \|
25	\| Toast \| Notifications, snackbars \| 600-699 \|
26	\| Tooltip \| Tooltips, hovers \| 700-799 \|
27	\| Maximum \| Debug overlays, dev tools \| 9999 \|
28
29	## The Process
30
31	1. Understand stacking needs: Identify all layered components in the system
32	2. Ask output format: CSS custom properties, Tailwind config, or JSON tokens
33	3. Generate scale: Create tokens with semantic naming
34	4. Document usage: Explain which token for which use case
35
36	## Output Formats
37
38	### CSS Custom Properties
39
40	```css
41	:root {
42	/* Base - default document flow */
43	--z-index-base: 0;
44	--z-index-below: -1;
45
46	/* Raised - subtle elevation within content */
47	--z-index-raised: 1;
48	--z-index-raised-2: 2;
49	--z-index-raised-3: 3;
50
51	/* Dropdown - menus, selects, comboboxes, popovers */
52	--z-index-dropdown: 100;
53
54	/* Sticky - sticky positioned elements */
55	--z-index-sticky: 200;
56
57	/* Fixed - fixed navigation, floating action buttons */
58	--z-index-fixed: 300;
59	--z-index-header: 310;
60	--z-index-sidebar: 320;
61
62	/* Overlay - backdrop behind modals */
63	--z-index-overlay: 400;
64
65	/* Modal - dialogs, sheets, drawers */
66	--z-index-modal: 500;
67	--z-index-modal-content: 510;
68
69	/* Toast - notifications, snackbars */
70	--z-index-toast: 600;
71
72	/* Tooltip - tooltips, title attributes */
73	--z-index-tooltip: 700;
74
75	/* Maximum - debug, dev tools (avoid in production) */
76	--z-index-max: 9999;
77	}
78	```
79
80	### Tailwind Config
81
82	```js
83	// tailwind.config.js
84	module.exports = {
85	theme: {
86	extend: {
87	zIndex: {
88	'below': '-1',
89	'base': '0',
90	'raised': '1',
91	'raised-2': '2',
92	'raised-3': '3',
93	'dropdown': '100',
94	'sticky': '200',
95	'fixed': '300',
96	'header': '310',
97	'sidebar': '320',
98	'overlay': '400',
99	'modal': '500',
100	'modal-content': '510',
101	'toast': '600',
102	'tooltip': '700',
103	'max': '9999',
104	},
105	},
106	},
107	};
108	```
109
110	Usage:
111	```html
112	<div class="z-overlay">Backdrop</div>
113	<div class="z-modal">Modal content</div>
114	<div class="z-tooltip">Tooltip</div>
115	```
116
117	### JSON Tokens (Design Tokens Format)
118
119	```json
120	{
121	"z-index": {
122	"below": { "value": -1, "description": "Below base content" },
123	"base": { "value": 0, "description": "Default document flow" },
124	"raised": {
125	"1": { "value": 1, "description": "Subtle elevation" },
126	"2": { "value": 2, "description": "Medium elevation" },
127	"3": { "value": 3, "description": "High elevation" }
128	},
129	"dropdown": { "value": 100, "description": "Menus, selects, popovers" },
130	"sticky": { "value": 200, "description": "Sticky positioned elements" },
131	"fixed": {
132	"base": { "value": 300, "description": "Fixed elements" },
133	"header": { "value": 310, "description": "Fixed header" },
134	"sidebar": { "value": 320, "description": "Fixed sidebar" }
135	},
136	"overlay": { "value": 400, "description": "Backdrop behind modals" },
137	"modal": {
138	"base": { "value": 500, "description": "Modal container" },
139	"content": { "value": 510, "description": "Modal inner content" }
140	},
141	"toast": { "value": 600, "description": "Notifications, snackbars" },
142	"tooltip": { "value": 700, "description": "Tooltips" },
143	"max": { "value": 9999, "description": "Maximum (debug only)" }
144	}
145	}
146	```
147
148	---
149
150	## Stacking Context Concepts
151
152	### What Creates a New Stacking Context
153
154	Understanding stacking contexts prevents unexpected z-index behavior:
155
156	```css
157	/* These properties create new stacking contexts */
158	.creates-context {
159	/* Any of these: */
160	position: relative; z-index: 1; /* positioned + z-index */
161	position: fixed; /* fixed positioning */
162	position: sticky; /* sticky positioning */
163	opacity: 0.99; /* opacity < 1 */
164	transform: translateZ(0); /* any transform */
165	filter: blur(0); /* any filter */
166	isolation: isolate; /* expli

People who liked this also viewed

6 picks

Type