{
  "markdown": "# transitions-dev (mirror)\n\n> **The canonical home for this skill is now [`Jakubantalik/transitions.dev`](https://github.com/Jakubantalik/transitions.dev).**\n>\n> This repository is kept as a backwards-compatible mirror so the\n> legacy install command keeps working. New transitions and edits\n> land in transitions.dev first; this repo is synced from there.\n\nProduction-ready CSS transitions for web apps, packaged as an agent skill.\n\nTwelve drop-in transitions: card resize, number pop-in, notification badge, text swap, dropdown, modal, panel reveal, page slide, icon swap, success check, avatar group hover, error state shake. Each one ships portable CSS namespaced under `t-*` selectors with semantic CSS custom properties — paste the snippet into any project and it just works, no demo markup or framework dependencies.\n\n## Install\n\nRecommended (canonical):\n\n```bash\nnpx skills add Jakubantalik/transitions.dev\n```\n\nLegacy (still works, this repo mirrors the latest skill payload):\n\n```bash\nnpx skills add Jakubantalik/transitions-dev\n```\n\nWorks with Cursor, Claude Code, Codex, and any agent that consumes `.cursor/skills/`, `.claude/skills/`, or `.agents/skills/`.\n\n## Invoke\n\n```\n/skill transitions-dev\n```\n\nOr describe what you want — *\"animate the dropdown opening\"*, *\"slide between two pages\"*, *\"add a notification badge to the bell icon\"*, *\"shake the input on validation error\"*, *\"hover spring on the avatar stack\"* — and the agent will pick the right transition, paste the CSS, and wire the documented HTML hooks.\n\n## Live demo\n\n[transitions.dev](https://transitions.dev/) — every transition is interactive on the showcase page, with controls for tuning durations, easings, and distances.\n\n## Maintenance\n\nThe skill payload is generated from [`transitions.dev`'s `index.html`](https://github.com/Jakubantalik/transitions.dev) so the skill stays in lockstep with what the showcase site demonstrates. The canonical build now lives in the [transitions.dev repo](https://github.com/Jakubantalik/transitions.dev) at `build/extract.mjs`; this mirror's copy of the build script defaults to a sibling `Essencial/` checkout for the historical layout.\n\n```bash\nSOURCE_HTML=/path/to/transitions.dev/index.html npm run build\n```\n\nThe build script parses `PROTO_TEMPLATES` and the `:root { --pX-* }` block out of the source HTML and re-renders every file under [`skills/transitions-dev/`](skills/transitions-dev). Re-run after editing the source site to keep the skill in sync.\n\n## License\n\n[MIT](LICENSE)\n",
  "bytes": 2509,
  "sha": "a833f095e4be6e74d62a9baa7a2e255898b0b3ec15756cf94db988db221d660a",
  "repo_slug": "jakubantalik/transitions-dev",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_jakubantalik_transitions_dev_transitions_56e8ce6b/readme"
}