見本を作れない
mdに実物のマークアップが無い
mdに実物のマークアップが無い
TR-01
Card resize
Tweening a container's width or height when its layout state changes (compact ↔ expan
本家で見る →素のCSSだけ。2秒ごとに自動で状態を切り替えています
（本来は押したとき・開いたときに動くものなので、見本では勝手に往復させています）。
7種は見本を作れませんでした。スキルのmdが
<div class="t-resize">…</div> のような省略形で、実物のマークアップを
持っていないためです。そこは本家へのリンクにしてあります。
TR-01
Tweening a container's width or height when its layout state changes (compact ↔ expan
本家で見る →TR-02
Counters, prices, balances, or any number that updates and should re-enter from a directio
TR-03
A small badge appearing on top of a trigger (bell, inbox, button). Slides in diagonally an
TR-04
Swapping the text of a status indicator in place — "Processing…" → "Done&qu
本家で見る →TR-05
Contextual menus, dropdowns, popovers — anything that opens from a trigger and should visu
TR-06
Modal dialogs and full-overlay surfaces that scale up from center. Use when the surface is
本家で見る →TR-07
A panel that slides into view inside an existing container — e.g. detail panel inside a ca
TR-08
Sliding between two full pages or screens that live side-by-side: list ↔ detail, step 1 ↔
TR-09
Cross-fading two icons in the same slot — hamburger ↔ close, sun ↔ moon, play ↔ pause, exp
TR-10
Confirming a completed action — payment processed, file uploaded, message sent, form saved
TR-11
Hovering an item in a horizontal stack (avatar row, chip group, badge cluster, segmented b
TR-12
Form validation feedback — invalid email, wrong password, missing required field, mismatch
TR-13
Clearing a text field — search box, filter input, any field with a clear (×) button. The t
TR-14
A placeholder that loads then reveals real content — list rows, cards, profile headers. Th
本家で見る →TR-15
A loading / "thinking" label that shimmers — streaming status, "Generating…
TR-16
A segmented control / tab bar where the active pill slides between options — view switcher
TR-17
A hover/focus tooltip that fades + scales in with a short appear-delay but disappears imme
本家で見る →TR-18
A headline + supporting line that rise into view with staggered blur — hero copy, empty st
本家で見る →TR-19
A card / tile / media surface that tilts in 3D toward the pointer while hovered, with a so
本家で見る →TR-20
A small circular trigger (a "+" FAB, a compose button, an add-action affordance)
TR-21
A disclosure / accordion / collapsible section whose panel grows and shrinks in height whe
TR-22
Toasts, snackbars, and transient confirmations that rise into view from the bottom edge —
TR-23
Like / favorite / heart buttons — anywhere a single tap flips a boolean and deserves a tin
TR-24
"Learn more", "See all", "Continue" — inline links or button
TR-25
Checkboxes, to-do completion, multi-select rows — any boolean control where the checked st
TR-26
Numbers that change with fanfare — points, prices, follower counts, dashboards KPIs. Each
TR-27
On/off switches — settings rows, theme toggles, feature flags. The thumb travels across th