propagate-ui-pattern

What problem does it solve?

This Skill prevents single-component UX changes from creating long-term inconsistencies across a recurring component family, such as when one Modal gets a new hotkey, focus behavior, or dismiss rule but its sibling modals do not.

Core Features & Use Cases

• Sibling sweep for UX consistency: When a user requests a keyboard, focus, dismiss, or feedback-display behavior change on one instance, it greps for sibling instances of the same component family (Modal, Dialog, Drawer, Form, Card, Toast) and enumerates them for review.
• Per-instance gating to avoid regressions: It presents each sibling with APPLY/SKIP/ASK decisions and explicit reasons (e.g., destructive vs. benign, form vs. picker, lifecycle differences) and requires confirmation before applying changes.
• Inline extraction when duplication is high: If 3+ approved siblings would share identical inline implementation, it proposes extracting a shared hook/wrapper or moving behavior into a shared primitive prop before applying edits.
• Propagates visual affordances: It propagates the discoverability elements alongside the behavior, such as kbd hint content, aria-keyshortcuts, or footer hotkey lines, rather than shipping behavior silently.

Quick Start

Tell the agent: “make sure all my modals support Cmd+Enter submit and show the hotkey hint on the primary action.”