skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

z-index-scale

Generate semantic z-index token scales for CSS, Tailwind, and JSON.

38|3|Updated Dec 29, 2025
Search Tags:#CSS#Tailwind#token#design-tokens#layering#z-index
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill z-index-scale
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: z-index-scale
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/tokens/z-index-scale
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill z-index-scale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes layering in UI by generating a predictable z-index token scale to avoid arbitrary values and stacking conflicts across components like dropdowns, modals, tooltips, and overlays.

Core Features & Use Cases

  • Semantic, multi-format outputs (CSS custom properties, Tailwind zIndex, JSON tokens) for quick integration into design tokens pipelines.
  • Predefined layering levels for common UI patterns (Base, Dropdown, Modal, Tooltip, Overlay) to ensure consistent behavior.
  • Documentation and guidance on stacking contexts, isolation, and use-case scenarios like dashboards, dialogs, and side-drawers.

Quick Start

Use the z-index-scale skill to generate tokens for dropdowns, modals, and tooltips in your app and apply them to your CSS variables, Tailwind config, and JSON token files.

Frequently Asked Questions about z-index-scale

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

FAQPage Schema
How do I fix z-index stacking conflicts between modals and tooltips?▼

To fix z-index stacking conflicts, generate a systematic token scale that assigns predefined layering levels to UI elements. This approach eliminates arbitrary values by providing semantic names for dropdowns, modals, and overlays.

What is a z-index token scale in design systems?▼

A z-index token scale is a standardized set of semantic layering values for UI components. It defines specific levels for base content, dropdowns, modals, tooltips, and overlays to ensure consistent stacking behavior across your application.

Can I use z-index tokens with Tailwind and CSS variables?▼

Yes, you can use z-index tokens with Tailwind and CSS variables. The generated scale outputs multi-format configurations including CSS custom properties, Tailwind zIndex settings, and JSON tokens for design system integration.

How do I generate CSS variables for modal and overlay layering?▼

You generate CSS variables for modal and overlay layering by creating a predefined token scale. This provides semantic naming and consistent documentation for layered UI elements like dashboards, dialogs, and side-drawers.

Why do my dropdowns appear behind overlays in CSS?▼

Dropdowns appear behind overlays due to arbitrary z-index values and unmanaged stacking contexts. Implementing a systematic token scale ensures correct layering hierarchy and provides guidance on isolation for consistent behavior.

Related Skills

Explore More Design & Creative Skills→
pascallammerspascallammers
1

tailwind-design-system

Generate Tailwind CSS design systems with custom themes and design tokens.

Community
Intermediate
yonetim258852yonetim258852

uupm-design-system

Organize design tokens into primitive, semantic, and component layers with CSS variables.

Community
Advanced
PrimadetaautomationPrimadetaautomation
5

ui-design-system

Generate design tokens from a brand color with multi-format exports.

Community
Advanced
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced