What problem does it solve? Dialogs animated incorrectly suffer from multiplied opacity, cut-off fades, broken stacking contexts, and panels that never mount. This Skill encodes the correct pattern for animating Terracotta dialogs in a SolidJS app: the outer Transition only controls mounting, while TransitionChild elements own the actual fade and scale animations. ## Core Features & Use Cases - Correct transition structure: Keeps enter/leave classes off the parent Transition and places FADE on the panel and SHEER on the overlay, preventing opacity multiplication and premature unmounting. - Suspense placement guidance: Positions the Suspense boundary inside the panel's TransitionChild with no fallback, and requires .latest for resources refetched after writes so panels do not detach mid-write. - Terracotta edge cases: Documents pitfalls such as inert breaking focus, PopoverPanel with as={TransitionChild} never mounting, and Tailwind scale-* mapping to the scale property rather than transform. - Use Case: When adding a fade animation to a styled dialog in src/components/styled, apply this Skill to wire the Transition wrapper, overlay, and panel correctly on the first attempt. ## Quick Start Apply the dialog-transitions skill to add a fade animation to the styled dialog component without putting transition classes on the parent Transition.
