Skill

ui-state-layout-transitions

Provides the mechanics for animating UI state and layout changes on the web: same-document and cross-document View Transitions, FLIP and shared-element layout animation (vanilla WAAPI, GSAP Flip, Motion layout and layoutId), entry and exit primitives (@starting-style, transition-behavior: allow-discrete, popover and dialog), auto-height accordions, clip-path and mask reveals, skeleton and shimmer loaders, and SVG morphing and line drawing. Use when building a page transition or shared element transition, when a list reorders, a card expands into a detail view, a route or tab changes, an overlay opens or closes, a panel collapses, content loads behind a skeleton loader, or an SVG path must morph or draw itself.

Bundled with Coacus. Its trust score, security findings and other files are on the plugin page.

SKILL.md

Path
knowledge/skills/domains/design/ui-state-layout-transitions/SKILL.md
Size
11 KB
SHA-256
39b20fd984e7a80017709492430e2eb3ed8afc1a4cbd0d501e2074869f5290fa

Install

Install the plugin's skills with the Skills CLI:

npx [email protected] add dandgabr/Coacus