What are the recommended styling patterns for modal backdrops?

The skill recommends a 70% opacity black backdrop (bg-black/70) to maintain page visibility, while keeping modal content 100% opaque for maximum readability.

Why should I use React Portals for modals?

Portals allow modals to render at the document body level, preventing parent component stacking contexts from clipping, hiding, or incorrectly layering the modal relative to other UI elements like headers.

How does this skill handle z-index management?

It enforces a strict hierarchy where the Header is always the highest (z-120), followed by management modals (z-110) and data modals (z-105), ensuring the navigation remains accessible.

Where should AnimatePresence be placed when using Portals?

For proper exit animation tracking, AnimatePresence must be placed inside the createPortal function, wrapping the motion.div, rather than wrapping the Portal itself.

React Modal Implementation Patterns

Name: React Modal Implementation Patterns
Author: adaptationio

byadaptationio

0•

设计工具

Implements robust React Portal modals with precise z-index management and smooth Framer Motion animations.

This skill provides a standardized framework for building React modals using createPortal to escape stacking context issues. It ensures a consistent z-index hierarchy—specifically keeping headers visible above overlays—while integrating Framer Motion's AnimatePresence for seamless entry and exit transitions. It also includes specific design patterns for dark mode compatibility and backdrop opacity to maintain visual depth and accessibility in modern web applications.

主要功能

01Pre-configured positioning and backdrop opacity standards

02Framer Motion AnimatePresence integration for professional animations

03Dark mode compatible styling with specific hex-code guidelines

04Standardized z-index hierarchy for persistent header visibility

050 GitHub stars

06React Portal implementation to prevent stacking context violations

使用场景

01Building accessible modal dialogs that render at the document body level

02Fixing z-index conflicts where UI headers overlap or are hidden by overlays

03Implementing animated UI components with consistent dark and light mode themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adaptationio/skrillz modal-patterns

For use in Claude.ai and ChatGPT

Download Skill