transitions-refine 0.1.0

package/.agents/skills/transitions-dev/14-skeleton-reveal.md

@@ -0,0 +1,149 @@
+# Skeleton loader and reveal
+
+## When to use
+
+A placeholder that loads then reveals real content — list rows, cards, profile headers. The skeleton pulses, then both layers cross-fade with a matching cross-blur. Bring your own bars / avatar / text; the skeleton stays in the same slot as the content so the swap is layout-free.
+
+## HTML usage
+
+```html
+<div class="t-skel" data-state="loading">
+  <div class="t-skel-skeleton is-pulsing">…</div>
+  <div class="t-skel-content">…</div>
+</div>
+```
+
+State:
+  - Mount with `.is-pulsing` on the skeleton so it pulses
+    --pulse-count times.
+  - When data arrives, add `.is-revealed` to .t-skel — the
+    skeleton fades out + blurs and the content fades in +
+    un-blurs over --reveal-dur.
+  - To replay the loading state without animating the
+    reverse: add `.is-resetting` to .t-skel, remove
+    `.is-revealed`, force a reflow, then drop `.is-resetting`.
+
+Bring your own avatar / text / wrapping. The skeleton stays
+in the same flex slot as the content so the swap is
+layout-free.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--pulse-dur` | `1000ms` | sourced from `--p14-pulse-dur` |
+| `--pulse-count` | `1` | sourced from `--p14-pulse-count` |
+| `--pulse-min` | `0.5` | sourced from `--p14-pulse-min` |
+| `--reveal-dur` | `400ms` | sourced from `--p14-reveal-dur` |
+| `--reveal-blur` | `2px` | sourced from `--p14-reveal-blur` |
+| `--reveal-ease` | `ease-in-out` | sourced from `--p14-reveal-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --pulse-dur: 1000ms;
+  --pulse-count: 1;
+  --pulse-min: 0.5;
+  --reveal-dur: 400ms;
+  --reveal-blur: 2px;
+  --reveal-ease: ease-in-out;
+}
+```
+
+## CSS
+
+```css
+/* The wrap stacks two layers on the same coordinates. The
+   skeleton owns the cold pulse + the fade-out side of the
+   reveal; the content owns the fade-in side. They share the
+   same duration / ease so the swap reads as one motion. */
+.t-skel { position: relative; }
+.t-skel-skeleton,
+.t-skel-content {
+  position: absolute;
+  inset: 0;
+}
+
+.t-skel-skeleton {
+  z-index: 1;
+  opacity: 1;
+  filter: blur(0);
+  transition:
+    opacity var(--reveal-dur) var(--reveal-ease),
+    filter  var(--reveal-dur) var(--reveal-ease);
+}
+.t-skel-content {
+  z-index: 2;
+  opacity: 0;
+  filter: blur(var(--reveal-blur));
+  transition:
+    opacity var(--reveal-dur) var(--reveal-ease),
+    filter  var(--reveal-dur) var(--reveal-ease);
+}
+.t-skel.is-revealed .t-skel-skeleton {
+  opacity: 0;
+  filter: blur(var(--reveal-blur));
+}
+.t-skel.is-revealed .t-skel-content {
+  opacity: 1;
+  filter: blur(0);
+}
+/* Snap-back when replaying: kill transitions so the reverse
+   (revealed → skeleton) is instant. Drop `.is-resetting`
+   after a forced reflow and the next reveal animates again. */
+.t-skel.is-resetting .t-skel-skeleton,
+.t-skel.is-resetting .t-skel-content {
+  transition: none !important;
+}
+
+/* Pulse: place the animation on the bar/avatar children, not
+   on the skeleton itself, so the skeleton's opacity / filter
+   stay free for the cross-fade transition above. */
+.t-skel-skeleton.is-pulsing > * {
+  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
+}
+@keyframes t-skel-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: var(--pulse-min); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-skel-skeleton, .t-skel-content {
+    transition: none !important;
+  }
+  .t-skel-skeleton.is-pulsing > * { animation: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+const skel = document.querySelector(".t-skel");
+const skeleton = skel.querySelector(".t-skel-skeleton");
+const cs = getComputedStyle(document.documentElement);
+const num = (name, fb) => {
+  const v = parseFloat(cs.getPropertyValue(name));
+  return Number.isFinite(v) ? v : fb;
+};
+
+// Call when async data arrives:
+function reveal() {
+  skel.classList.add("is-revealed");
+}
+
+// Demo replay: snap back, pulse, then reveal.
+function replay() {
+  skel.classList.add("is-resetting");
+  skel.classList.remove("is-revealed");
+  skeleton.classList.remove("is-pulsing");
+  void skeleton.offsetWidth;
+  skel.classList.remove("is-resetting");
+  skeleton.classList.add("is-pulsing");
+  const total = num("--pulse-dur", 1000) * num("--pulse-count", 1);
+  setTimeout(() => skel.classList.add("is-revealed"), total);
+}
+```
+

package/.agents/skills/transitions-dev/15-shimmer-text.md

@@ -0,0 +1,95 @@
+# Shimmer text
+
+## When to use
+
+A loading / "thinking" label that shimmers — streaming status, "Generating…", any in-progress copy that should feel alive without a spinner. Pure CSS: duplicate the string into `data-text` on `.t-shimmer` and tune `--shimmer-base` / `--shimmer-highlight` per theme.
+
+## HTML usage
+
+```html
+<!-- Duplicate the visible string into data-text so the
+     ::before layer can mask the gradient onto the same
+     glyphs. Keep them in sync if the text changes. -->
+<span class="t-shimmer" data-text="Planning next moves">
+  Planning next moves
+</span>
+```
+
+Pure CSS — no JS, no class toggling. Tune --shimmer-base /
+--shimmer-highlight in your own theme rules so the colors
+follow light / dark mode.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--shimmer-dur` | `2000ms` | sourced from `--p15-dur` |
+| `--shimmer-base` | `#7c7c7c` | sourced from `--p15-base` |
+| `--shimmer-highlight` | `#0d0d0d` | sourced from `--p15-highlight` |
+| `--shimmer-band` | `400%` | sourced from `--p15-band` |
+| `--shimmer-ease` | `linear` | sourced from `--p15-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --shimmer-dur: 2000ms;
+  --shimmer-base: #7c7c7c;
+  --shimmer-highlight: #0d0d0d;
+  --shimmer-band: 400%;
+  --shimmer-ease: linear;
+}
+```
+
+## CSS
+
+```css
+/* Two-layer construction:
+   1. The base text renders normally in --shimmer-base.
+   2. ::before duplicates it via content: attr(data-text),
+      paints a transparent → highlight → transparent gradient
+      onto it, and clips that gradient to the glyphs via
+      background-clip: text. Animating background-position
+      sweeps the band across the text. */
+.t-shimmer {
+  position: relative;
+  display: inline-block;
+  color: var(--shimmer-base);
+}
+.t-shimmer::before {
+  content: attr(data-text);
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(
+    90deg,
+    transparent          0%,
+    transparent         40%,
+    var(--shimmer-highlight) 50%,
+    transparent         60%,
+    transparent        100%
+  );
+  background-size: var(--shimmer-band) 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
+}
+@keyframes t-shimmer {
+  0%   { background-position: 100% 0; }
+  100% { background-position: 0% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-shimmer::before { animation: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+None — pure CSS. Toggle the documented HTML attributes or class names from whatever already drives state in your app.
+

package/.agents/skills/transitions-dev/16-tabs-sliding.md

@@ -0,0 +1,146 @@
+# Tabs sliding
+
+## When to use
+
+A segmented control / tab bar where the active pill slides between options — view switchers, filter segments, small mutually-exclusive button sets. JS writes the active tab's `offsetLeft` / `offsetWidth` onto the pill; CSS owns the tween.
+
+## HTML usage
+
+```html
+<div class="t-tabs" role="tablist">
+  <span class="t-tabs-pill" aria-hidden="true"></span>
+  <button class="t-tab" role="tab" aria-selected="true">Plan</button>
+  <button class="t-tab" role="tab" aria-selected="false">Debug</button>
+  <button class="t-tab" role="tab" aria-selected="false">Ask</button>
+</div>
+```
+
+Wire-up:
+  On click, flip aria-selected on each tab and write the
+  active tab's offsetLeft / offsetWidth onto the pill:
+    pill.style.transform = `translateX(${tab.offsetLeft}px)`;
+    pill.style.width     = `${tab.offsetWidth}px`;
+  On first paint and resize, write the same values WITHOUT
+  a transition (suspend with `transition: none`, force a
+  reflow, restore) so the pill snaps to position before any
+  animation can run.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--tabs-dur` | `250ms` | sourced from `--p16-dur` |
+| `--tabs-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p16-ease` |
+| `--tabs-text-muted` | `rgba(15, 15, 15, 0.8)` | sourced from `--p16-text-muted` |
+| `--tabs-text-active` | `#0f0f0f` | sourced from `--p16-text-active` |
+| `--tabs-bar-bg` | `#f1f1f1` | sourced from `--p16-bar-bg` |
+| `--tabs-pill-bg` | `#ffffff` | sourced from `--p16-pill-bg` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --tabs-dur: 250ms;
+  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --tabs-text-muted: rgba(15, 15, 15, 0.8);
+  --tabs-text-active: #0f0f0f;
+  --tabs-bar-bg: #f1f1f1;
+  --tabs-pill-bg: #ffffff;
+}
+```
+
+## CSS
+
+```css
+/* The bar is just a flex container with padding for the pill
+   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
+   so labels read above the pill background. */
+.t-tabs {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border-radius: 48px;
+  background: var(--tabs-bar-bg);
+}
+.t-tab {
+  position: relative;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  height: 30px;
+  padding: 4px 12px;
+  color: var(--tabs-text-muted);
+  cursor: pointer;
+  border-radius: 48px;
+  z-index: 1;
+  transition: color var(--tabs-dur) var(--tabs-ease);
+}
+.t-tab:not([aria-selected="true"]):hover,
+.t-tab[aria-selected="true"] {
+  color: var(--tabs-text-active);
+}
+
+/* The pill: width + transform are written inline by JS so
+   the transition tweens between the previous and next
+   measured positions. */
+.t-tabs-pill {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  height: 30px;
+  width: 0;
+  background: var(--tabs-pill-bg);
+  border-radius: 48px;
+  transform: translateX(0);
+  transition:
+    transform var(--tabs-dur) var(--tabs-ease),
+    width     var(--tabs-dur) var(--tabs-ease);
+  will-change: transform, width;
+  z-index: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-tabs-pill, .t-tab { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+const bar = document.querySelector(".t-tabs");
+const pill = bar.querySelector(".t-tabs-pill");
+const tabs = [...bar.querySelectorAll(".t-tab")];
+
+function moveTo(tab, animate) {
+  if (!animate) {
+    const prev = pill.style.transition;
+    pill.style.transition = "none";
+    pill.style.transform = `translateX(${tab.offsetLeft}px)`;
+    pill.style.width = `${tab.offsetWidth}px`;
+    void pill.offsetWidth;
+    pill.style.transition = prev;
+  } else {
+    pill.style.transform = `translateX(${tab.offsetLeft}px)`;
+    pill.style.width = `${tab.offsetWidth}px`;
+  }
+}
+const active = () =>
+  tabs.find((t) => t.getAttribute("aria-selected") === "true") || tabs[0];
+
+tabs.forEach((tab) => {
+  tab.addEventListener("click", () => {
+    tabs.forEach((t) =>
+      t.setAttribute("aria-selected", t === tab ? "true" : "false")
+    );
+    moveTo(tab, true);
+  });
+});
+requestAnimationFrame(() => moveTo(active(), false));
+window.addEventListener("resize", () => moveTo(active(), false));
+```
+

package/.agents/skills/transitions-dev/17-tooltip.md

@@ -0,0 +1,103 @@
+# Tooltip open/close
+
+## When to use
+
+A hover/focus tooltip that fades + scales in with a short appear-delay but disappears immediately on leave. Pure CSS — the wrap (not the trigger) is the hover target so the pointer can drift onto the tooltip without flicker.
+
+## HTML usage
+
+```html
+<span class="t-tt-wrap">
+  <button class="t-tt-trigger" aria-describedby="tt-1">…</button>
+  <span class="t-tt" id="tt-1" role="tooltip">Tooltip text</span>
+</span>
+```
+
+Pure CSS — no JS. The wrap (not the trigger) is the hover
+target so the pointer can drift onto the tooltip without
+flicker. transition-delay only applies in the hover/focus
+rule, so leaving snaps it to 0 and the disappear plays
+immediately. Trigger styling is yours; only the tooltip
+positioning + its transition live here.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--tt-in-dur` | `150ms` | sourced from `--p17-in-dur` |
+| `--tt-out-dur` | `50ms` | sourced from `--p17-out-dur` |
+| `--tt-scale` | `0.98` | sourced from `--p17-scale-from` |
+| `--tt-delay` | `80ms` | sourced from `--p17-delay` |
+| `--tt-in-ease` | `ease-out` | sourced from `--p17-in-ease` |
+| `--tt-out-ease` | `ease-out` | sourced from `--p17-out-ease` |
+| `--tt-bg` | `#ffffff` | sourced from `--p17-bg` |
+| `--tt-fg` | `#2f2f2f` | sourced from `--p17-fg` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --tt-in-dur: 150ms;
+  --tt-out-dur: 50ms;
+  --tt-scale: 0.98;
+  --tt-delay: 80ms;
+  --tt-in-ease: ease-out;
+  --tt-out-ease: ease-out;
+  --tt-bg: #ffffff;
+  --tt-fg: #2f2f2f;
+}
+```
+
+## CSS
+
+```css
+.t-tt-wrap {
+  position: relative;
+  display: inline-block;
+}
+.t-tt {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translate(-50%, 0) scale(var(--tt-scale));
+  transform-origin: 50% 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: var(--tt-bg);
+  color: var(--tt-fg);
+  white-space: nowrap;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 2px 6px 0 rgba(0, 0, 0, 0.05),
+    0 4px 42px 0 rgba(0, 0, 0, 0.06);
+  opacity: 0;
+  pointer-events: none;
+  /* Default rule controls the LEAVE state. transition-delay
+     stays unset so leaving plays without delay. */
+  transition:
+    opacity   var(--tt-out-dur) var(--tt-out-ease),
+    transform var(--tt-out-dur) var(--tt-out-ease);
+}
+/* The 50ms delay belongs ONLY to the hover rule so leaving
+   the trigger snaps the delay back to 0 and the disappear
+   plays immediately. */
+.t-tt-wrap:hover .t-tt,
+.t-tt-trigger:focus-visible + .t-tt {
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
+  transition-duration: var(--tt-in-dur);
+  transition-timing-function: var(--tt-in-ease);
+  transition-delay: var(--tt-delay);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-tt { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+None — pure CSS. Toggle the documented HTML attributes or class names from whatever already drives state in your app.
+

package/.agents/skills/transitions-dev/18-texts-reveal.md

@@ -0,0 +1,110 @@
+# Texts reveal
+
+## When to use
+
+A headline + supporting line that rise into view with staggered blur — hero copy, empty states, onboarding steps. Exit is decoupled: a single quiet fade with no Y-return so dismissing doesn't replay the reveal in reverse.
+
+## HTML usage
+
+```html
+<div class="t-stagger">
+  <strong class="t-stagger-line t-stagger-line--1">…</strong>
+  <span class="t-stagger-line t-stagger-line--2">…</span>
+</div>
+```
+
+State:
+  - Add `.is-shown` to play the staggered entrance.
+  - Add `.is-hiding` (and remove `.is-shown`) to fade
+    out in place over a short 200ms — independent of the
+    entrance timing so the exit doesn't replay the stagger.
+
+Add more lines by adding `.t-stagger-line--N` with
+`transition-delay: calc(var(--stagger-stagger) * (N - 1))`.
+
+## Tunable variables
+
+| Variable | Default | Notes |
+| --- | --- | --- |
+| `--stagger-dur` | `500ms` | sourced from `--p18-dur` |
+| `--stagger-distance` | `12px` | sourced from `--p18-distance` |
+| `--stagger-stagger` | `40ms` | sourced from `--p18-stagger` |
+| `--stagger-blur` | `3px` | sourced from `--p18-blur` |
+| `--stagger-ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | sourced from `--p18-ease` |
+
+The `:root` defaults below match the live tuning on [transitions.dev](https://transitions.dev). Drop them into your global stylesheet once — every transition in this skill reads from semantic names like these, so multiple transitions can share a single `:root` block.
+
+```css
+:root {
+  --stagger-dur: 500ms;
+  --stagger-distance: 12px;
+  --stagger-stagger: 40ms;
+  --stagger-blur: 3px;
+  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+```
+
+## CSS
+
+```css
+/* Lines start translated down + blurred + invisible; .is-shown
+   on the parent flips them to their resting state. The second
+   line's transition-delay holds it back by --stagger-stagger
+   so the eye lands on the headline first. */
+.t-stagger-line {
+  display: block;
+  opacity: 0;
+  transform: translateY(var(--stagger-distance));
+  filter: blur(var(--stagger-blur));
+  transition:
+    opacity   var(--stagger-dur) var(--stagger-ease),
+    transform var(--stagger-dur) var(--stagger-ease),
+    filter    var(--stagger-dur) var(--stagger-ease);
+  will-change: transform, opacity, filter;
+}
+.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
+
+.t-stagger.is-shown .t-stagger-line {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+}
+/* Exit decouples from the stagger: same fade for every line,
+   no Y return, no blur — so the disappearance reads as a
+   single quiet fade instead of a reverse reveal. */
+.t-stagger.is-hiding .t-stagger-line {
+  opacity: 0;
+  transform: translateY(0);
+  filter: blur(0);
+  transition:
+    opacity 200ms ease,
+    transform 0s linear,
+    filter 0s linear;
+  transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-stagger-line { transition: none !important; }
+}
+```
+
+The `@media (prefers-reduced-motion: reduce)` guard at the bottom of the snippet is required — keep it. It zeroes the transition for users who have asked for less motion at the OS level.
+
+## JavaScript orchestration
+
+```js
+const block = document.querySelector(".t-stagger");
+
+function showText() {
+  block.classList.remove("is-hiding");
+  block.classList.remove("is-shown");
+  void block.offsetHeight;
+  block.classList.add("is-shown");
+}
+function hideText() {
+  block.classList.add("is-hiding");
+  block.classList.remove("is-shown");
+  setTimeout(() => block.classList.remove("is-hiding"), 200);
+}
+```
+