·barba-js

页面过渡库,用于在网站页面之间创建流畅、平滑的过渡。在实现页面转换、创建类似 SPA 的体验、添加动画路线更改或构建具有流畅导航的网站时,请使用此技能。触发涉及 Barba.js、页面转换、路由、视图管理、转换挂钩、GSAP 集成或平滑页面导航的任务。与 gsap-scrolltrigger 一起使用以实现过渡动画。

14安装·1热度·@freshtechbro

安装

$npx skills add https://github.com/freshtechbro/claudedesignskills --skill barba-js

如何安装 barba-js

通过命令行快速安装 barba-js AI 技能到你的开发环境

  1. 打开终端: 打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等)
  2. 运行安装命令: 复制并运行以下命令:npx skills add https://github.com/freshtechbro/claudedesignskills --skill barba-js
  3. 验证安装: 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

来源:freshtechbro/claudedesignskills。

SKILL.md

查看原文

Modern page transition library for creating fluid, smooth transitions between website pages. Barba.js makes multi-page websites feel like Single Page Applications (SPAs) by hijacking navigation and managing transitions without full page reloads.

Barba.js is a lightweight (7kb minified and compressed) JavaScript library that intercepts navigation between pages, fetches new content via AJAX, and smoothly transitions between old and new containers. It reduces page load delays and HTTP requests while maintaining the benefits of traditional multi-page architecture.

Views are page-specific logic containers that run based on namespace:

页面过渡库,用于在网站页面之间创建流畅、平滑的过渡。在实现页面转换、创建类似 SPA 的体验、添加动画路线更改或构建具有流畅导航的网站时,请使用此技能。触发涉及 Barba.js、页面转换、路由、视图管理、转换挂钩、GSAP 集成或平滑页面导航的任务。与 gsap-scrolltrigger 一起使用以实现过渡动画。 来源:freshtechbro/claudedesignskills。

可引用信息

为搜索与 AI 引用准备的稳定字段与命令。

安装命令
npx skills add https://github.com/freshtechbro/claudedesignskills --skill barba-js
分类
</>开发工具
认证
收录时间
2026-03-09
更新时间
2026-03-10

Browse more skills from freshtechbro/claudedesignskills

快速解答

什么是 barba-js?

页面过渡库,用于在网站页面之间创建流畅、平滑的过渡。在实现页面转换、创建类似 SPA 的体验、添加动画路线更改或构建具有流畅导航的网站时,请使用此技能。触发涉及 Barba.js、页面转换、路由、视图管理、转换挂钩、GSAP 集成或平滑页面导航的任务。与 gsap-scrolltrigger 一起使用以实现过渡动画。 来源:freshtechbro/claudedesignskills。

如何安装 barba-js?

打开你的终端或命令行工具(如 Terminal、iTerm、Windows Terminal 等) 复制并运行以下命令:npx skills add https://github.com/freshtechbro/claudedesignskills --skill barba-js 安装完成后,技能将自动配置到你的 AI 编程环境中,可以在 Claude Code、Cursor 或 OpenClaw 中使用

这个 Skill 的源码在哪?

https://github.com/freshtechbro/claudedesignskills