skills.rest
ernitpt
ernitptCOMMUNITY
Explore all skills by this author →
GitHub

modal-patterns

Enforce consistent modal and bottom sheet UI patterns with React Native design tokens.

Updated Nov 14, 2025
Search Tags:#ui#accessibility#design system#react native#modal#bottom sheet
One-click install
npx skills add https://github.com/ernitpt/ernit_test --skill modal-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal-patterns
Source: https://github.com/ernitpt/ernit_test/tree/main/.agent/skills/modal-patterns
Command: npx skills add https://github.com/ernitpt/ernit_test --skill modal-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill ensures all modal and bottom sheet components in the Ernit app adhere to a unified design system, improving user experience and developer efficiency.

Core Features & Use Cases

  • Consistent Structure: Enforces a standard layout and behavior for all modals.
  • Design Token Adherence: Mandates the use of predefined design tokens for styling.
  • Accessibility Compliance: Ensures modals meet accessibility standards for touch targets and labels.
  • Use Case: When building a new feature that requires a confirmation dialog or a user input modal, use this Skill to guarantee it matches the app's established look, feel, and interaction patterns.

Quick Start

Apply the modal-patterns skill to ensure the new user feedback modal follows all established guidelines.

Frequently Asked Questions about modal-patterns

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

FAQPage Schema
How do I standardize modal and bottom sheet UI patterns in React Native?▼

You can enforce consistent UI modals by applying predefined design tokens and structural rules to React Native components, ensuring unified styling, behavior, and accessibility compliance.

What is the best way to ensure accessibility compliance for React Native modals?▼

The best way to ensure modal accessibility compliance is to follow this Skill's enforced guidelines for touch target sizing and screen reader labels within your React Native components.

How do I apply design tokens to a confirmation dialog in a React Native app?▼

You apply design tokens to confirmation dialogs by adhering to the standardized layout and styling rules defined in this Skill, ensuring the dialog matches the app's established look and feel.

Can I use this modal-patterns Skill to build a user input modal for a new feature?▼

Yes, you can use this Skill when building new features requiring user input modals to guarantee the component matches the application's established look, feel, and interaction patterns.

Why do my React Native bottom sheets look inconsistent across different app features?▼

Bottom sheets appear inconsistent when lacking unified structural and styling rules; this Skill addresses the issue by mandating predefined design tokens and standard behavior across the application.

Related Skills

Explore More Software Engineering Skills→
freekmurzefreekmurze
997

building-native-ui

Guide building cohesive native UI in Expo Router applications.

Community
Intermediate
bytetalentbytetalent

Modal Dialog Action

Define reusable modal dialog components for overlay-based UI interactions.

Official
Intermediate
voidrotvoidrot

react-native-design

Design React Native user interfaces with styling, navigation, gestures, and animations.

Community
Advanced
akobryan1akobryan1
1

ui-styling

Generate React components styled with Tailwind CSS for web apps.

Community
Intermediate