transitions-dev

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# transitions-dev (mirror)

> **The canonical home for this skill is now [`Jakubantalik/transitions.dev`](https://github.com/Jakubantalik/transitions.dev).**
>
> This repository is kept as a backwards-compatible mirror so the
> legacy install command keeps working. New transitions and edits
> land in transitions.dev first; this repo is synced from there.

Production-ready CSS transitions for web apps, packaged as an agent skill.

Twelve 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.

## Install

Recommended (canonical):

```bash
npx skills add Jakubantalik/transitions.dev
```

Legacy (still works, this repo mirrors the latest skill payload):

```bash
npx skills add Jakubantalik/transitions-dev
```

Works with Cursor, Claude Code, Codex, and any agent that consumes `.cursor/skills/`, `.claude/skills/`, or `.agents/skills/`.

## Invoke

```
/skill transitions-dev
```

Or 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.

## Live demo

[transitions.dev](https://transitions.dev/) — every transition is interactive on the showcase page, with controls for tuning durations, easings, and distances.

## Maintenance

The 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.

```bash
SOURCE_HTML=/path/to/transitions.dev/index.html npm run build
```

The build script parses `PROTO_TEMPLATES` and the `:root { --pX-* }` block out of the source HTML and re-renders every file under [`skills/transitions-dev/`](https://github.com/jakubantalik/transitions-dev/tree/HEAD/skills/transitions-dev). Re-run after editing the source site to keep the skill in sync.

## License

[MIT](https://github.com/jakubantalik/transitions-dev/tree/HEAD/LICENSE)

transitions-dev (mirror)

The canonical home for this skill is now Jakubantalik/transitions.dev.

This repository is kept as a backwards-compatible mirror so the legacy install command keeps working. New transitions and edits land in transitions.dev first; this repo is synced from there.

Production-ready CSS transitions for web apps, packaged as an agent skill.

Twelve 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.

Install

Recommended (canonical):

npx skills add Jakubantalik/transitions.dev

Legacy (still works, this repo mirrors the latest skill payload):

npx skills add Jakubantalik/transitions-dev

Works with Cursor, Claude Code, Codex, and any agent that consumes .cursor/skills/, .claude/skills/, or .agents/skills/.

Invoke

/skill transitions-dev

Or 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.

Live demo

transitions.dev — every transition is interactive on the showcase page, with controls for tuning durations, easings, and distances.

Maintenance

The skill payload is generated from transitions.dev's index.html so the skill stays in lockstep with what the showcase site demonstrates. The canonical build now lives in the transitions.dev repo at build/extract.mjs; this mirror's copy of the build script defaults to a sibling Essencial/ checkout for the historical layout.

SOURCE_HTML=/path/to/transitions.dev/index.html npm run build

The build script parses PROTO_TEMPLATES and the :root { --pX-* } block out of the source HTML and re-renders every file under skills/transitions-dev/. Re-run after editing the source site to keep the skill in sync.

License

MIT