Stats
Actions
Available In
Tags
Plugin
ripple-plugin
Set up the Ripple design system (@ripple/ui) in a React/TypeScript project, or generate a self-contained HTML prototype using Ripple's look and feel — no coding required
README
ripple-plugin
A Claude Code plugin that sets up @ripple/ui — Unit4's Ripple design system — in any project.
Requirements
- Node.js + npm
- Claude Code (terminal CLI — not the Claude desktop app)
Install
The plugin is installed once per machine. Run these two commands in your terminal:
claude plugin marketplace add VascoA09/ripple-plugin
claude plugin install ripple-plugin
Usage
/ripple-plugin:ripple
Claude will detect your project state and walk you through the appropriate setup flow.
What it does
The plugin handles three scenarios automatically:
New project — Scaffolds a Vite + React + TypeScript project, installs @ripple/ui, and configures all required files with a working starter UI.
Existing project — Installs @ripple/ui into your project and integrates it without breaking your existing setup.
Broken install — Detects and repairs a failed or incomplete Ripple installation.
In all cases it ensures:
@ripple/ui/style.cssis imported before any other stylesdata-theme="light"is set on the root wrapper- Conflicting Vite
:rootCSS variables are removed resolveJsonModuleis enabled intsconfig.app.json
More
Full Ripple documentation → github.com/VascoA09/Ripple
Stats
Version1.0.0
Stars0
MaintenanceExcellent
Last Commit
Added
Available In
Tags
Categories
