transitions-dev
jakubantalik/transitions-dev · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por jakubantalik/transitions-dev no skills.sh. Instale com: npx skills add jakubantalik/transitions-dev@transitions-dev
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- jakubantalik
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 43
- Forks
- 5
- Last push
- 2026-05-20T15:27:08Z
- Repository state
- ativo
- Language
- JavaScript
- License
- MIT
- Added
- 2026-08-30 15:22:21
- Updated
- 2026-09-08 15:04:47
- Origin id
jakubantalik/transitions-dev/transitions-dev
README
# 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/`](skills/transitions-dev). Re-run after editing the source site to keep the skill in sync.
## License
[MIT](LICENSE)