Does it support accessibility verification?

Yes, it scans for missing DialogDescription components which are required by Radix UI and screen readers to provide proper context.

Why is the sibling AlertDialog check important?

In Radix UI, opening a sibling dialog can trigger onOpenChange on the underlying sheet, causing 'unsaved changes' prompts to appear incorrectly. This skill ensures guards are in place.

When should I run this verification?

You should run it after modifying handleOpenChange logic, adding new dialogs to a page, or when changing a component's editability status.

How does this help with ScrollArea bugs?

It detects when ScrollArea is used in flex containers without fixed heights, a common mistake that causes DialogFooters to be hidden or layout calculation errors.

Dialog & Sheet Safety Verifier

Name: Dialog & Sheet Safety Verifier
Author: invigoworks

byinvigoworks

0•

安全与测试

Verifies interaction safety, state initialization, and UX consistency for Radix UI Dialog and Sheet components.

This skill automates the verification of Dialog and Sheet interactions within React applications, specifically focusing on Radix UI implementations. It detects sibling dialog conflicts that cause unintended closures, ensures state reset on close, validates accessibility descriptions, and prevents layout bugs involving ScrollArea and flex containers. By identifying missing handleOpenChange guards and incorrect button variants, it helps developers maintain a professional and bug-free user interface during complex form interactions.

主要功能

01Detects sibling AlertDialog and Sheet interaction conflicts to prevent accidental closures

02Identifies layout regressions caused by ScrollArea within flex containers

03Verifies state initialization and form resets when dialogs are closed

04Enforces destructive variants for irreversible actions like deletion or reset

05Validates mandatory DialogDescription presence for accessibility compliance

060 GitHub stars

使用场景

01Adding a new AlertDialog to an existing FormSheet without breaking dirty-state logic

02Refactoring dialog state management to prevent data from persisting between opens

03Auditing UI components for consistent destructive action styling and read-only states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add invigoworks/invigo-marketplace verify-dialog-safety

For use in Claude.ai and ChatGPT

主要功能

01Detects sibling AlertDialog and Sheet interaction conflicts to prevent accidental closures

02Identifies layout regressions caused by ScrollArea within flex containers

03Verifies state initialization and form resets when dialogs are closed

04Enforces destructive variants for irreversible actions like deletion or reset

05Validates mandatory DialogDescription presence for accessibility compliance

060 GitHub stars

使用场景

01Adding a new AlertDialog to an existing FormSheet without breaking dirty-state logic

02Refactoring dialog state management to prevent data from persisting between opens

03Auditing UI components for consistent destructive action styling and read-only states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add invigoworks/invigo-marketplace verify-dialog-safety

For use in Claude.ai and ChatGPT