Barba Js
Scaffold a multi-page site with Barba.js page transitions and Vite using the bundled project_setup.py generator.
Overview
Barba-js is an agent skill for the Build phase that scaffolds Barba.js multi-page transition projects via project_setup.py and Vite.
Install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill barba-jsWhat is this skill?
- project_setup.py generates a full Barba.js starter (index, about, contact) with src/main.js and style.css
- CLI mode supports --name and --transition flags for scripted scaffolds
- Ships package.json with @barba/core, gsap, and vite plus vite.config.js for MPA workflow
- Five transition presets: fade, slide, scale, stagger, and curtain
- HTML includes correct data-barba attributes and navigation that persists across pseudo-SPA page changes
- 5 transition types: fade, slide, scale, stagger, curtain
- Generated tree includes 3 example HTML pages plus src/main.js and src/style.css
Adoption & trust: 709 installs on skills.sh; 227 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want app-like page transitions on a simple multi-page site but do not have a repeatable Barba plus Vite starter with correct data-barba markup.
Who is it for?
Indie marketing sites, portfolios, and lightweight SaaS landings that stay MPA-first but need polished Barba transitions.
Skip if: React or Next single-page apps where the framework owns routing, or backends-only work with no static frontend scaffold.
When should I use this skill?
You need a new Barba.js multi-page project and want project_setup.py to emit HTML, Vite config, and a chosen transition preset.
What do I get? / Deliverables
You get a named project folder with HTML pages, transition-ready JS/CSS, dependencies, and Vite config ready for local dev.
- Complete Barba.js project directory with package.json and vite.config.js
- Transition-wired main.js and responsive style.css
- Project README with run instructions
Recommended Skills
Journey fit
Barba-js belongs on Build because it produces runnable frontend project files rather than validating or shipping infrastructure. Frontend is the right shelf for transition libraries, HTML data-barba structure, and Vite multi-page styling.
How it compares
Use as a Barba.js+Vite generator skill, not as a design-system audit or deployment pipeline.
Common Questions / FAQ
Who is barba-js for?
Solo builders and designers shipping static or Vite-backed frontends who want Barba.js transitions without hand-rolling every page shell.
When should I use barba-js?
During Build frontend when you are starting a multi-page marketing or content site and need one of the five transition presets wired into HTML, JS, and CSS.
Is barba-js safe to install?
The skill runs local project scaffolding scripts; review the Security Audits panel on this Prism page and inspect generated package.json before npm install.
SKILL.md
READMESKILL.md - Barba Js
# Barba.js Assets This directory contains information about assets and starter templates for Barba.js projects. ## Starter Templates Complete Barba.js starter templates are generated automatically by the `project_setup.py` script. ### Usage Run the project setup script to generate a complete Barba.js project: ```bash ../scripts/project_setup.py ``` Or in CLI mode: ```bash ../scripts/project_setup.py --name my-project --transition fade ``` ### Generated Project Structure The script creates a complete project with: ``` my-project/ ├── index.html # Home page with Barba structure ├── about.html # Example about page ├── contact.html # Example contact page ├── src/ │ ├── main.js # Barba.js initialization with transitions │ └── style.css # Complete styling with transition support ├── package.json # Dependencies (@barba/core, gsap, vite) ├── vite.config.js # Vite configuration for multi-page app └── README.md # Project-specific documentation ``` ### Available Transition Types The generated project includes one of these transitions: 1. **fade** - Simple fade in/out 2. **slide** - Horizontal slide transition 3. **scale** - Zoom with fade effect 4. **stagger** - Staggered element animations 5. **curtain** - Curtain overlay effect ### Features Generated projects include: - Complete HTML structure with proper `data-barba` attributes - Responsive navigation that persists across page transitions - GSAP-powered animations - Loading indicator - Transition curtain element - Mobile-responsive styling - Vite dev server and build setup - Example pages demonstrating namespace-based routing ### Customization After generating a project: 1. Modify transitions in `src/main.js` 2. Add custom styles in `src/style.css` 3. Create additional pages following the same structure 4. Update `vite.config.js` to include new pages in build ### Example HTML Structure All generated pages follow this structure: ```html <body data-barba="wrapper"> <!-- Persistent header (outside container) --> <header class="site-header"> <nav><!-- Navigation links --></nav> </header> <!-- Dynamic content (inside container) --> <main data-barba="container" data-barba-namespace="page-name"> <!-- Page content that transitions --> </main> <!-- Persistent footer (outside container) --> <footer class="site-footer"><!-- Footer content --></footer> <!-- Transition elements --> <div class="page-loader">Loading...</div> <div class="transition-curtain"></div> <script type="module" src="/src/main.js"></script> </body> ``` ### Development Workflow 1. Generate project: `../scripts/project_setup.py --name my-site` 2. Navigate to project: `cd my-site` 3. Install dependencies: `npm install` (auto-run unless `--no-install`) 4. Start dev server: `npm run dev` 5. Open browser: `http://localhost:5173` 6. Build for production: `npm run build` ### Additional Examples For custom transition code snippets, use the transition generator: ```bash ../scripts/transition_generator.py ``` This generates just the JavaScript transition code that you can copy into your project. ## Manual Setup (Without Scripts) If you prefer to set up manually: ### 1. Install Dependencies ```bash npm install --save-dev @barba/core gsap ``` ### 2. Create HTML Structure Add Barba attributes to your HTML: ```html <body data-barba="wrapper"> <main data-barba="container" data-barba-namespace="home"> <!-- Your content --> </main> </body> ``` ### 3. Initialize Barba Create JavaScript file: ```javascript import barba from '@barba/core'; import gsap from 'gsap'; barba.init({ transitions: [{ name: 'fade', async leave({ current }) { await gsap.to(current.container, { opacity: 0 }); }, async enter({ next }) { await gsap.from(next.container, { opacity: 0 }); } }] }); ``` ### 4. Add to HTML ```html <script type="module" src="/path/to/you