resources

AI Context

Understand how Ripple delivers design system context to AI agents and how to incorporate this context when utilizing agents for design and development.

AI Context via Skills

Ripple provides AI agents with context through skills in Claude that activate only when necessary. This allows agents to concentrate on specific tasks without relying on extra rules and tokens. By connecting skills directly to real color tokens, patterns, and components, Ripple ensures the design system remains the single source of truth and avoids outdated static copies.

What is a skill?

A skill is a ready-to-use capability in Claude that an AI agent activates via specific triggers. It includes instructions and access to resources like tokens, components, or Figma files.

  • A skill activates only when a request matches its purpose, then guides the agent to complete the task correctly.
  • When triggered, the agent follows the skill's exact rules, ensuring accurate output instead of guessing.
  • Skills can be updated independently of the component library.
User
AI Agent
Skill
Ripple

ripple-ui Skill Directory

Use this directory to understand what each skill can handle and when it triggers.

/ripple

What It Does

Orientation to the Ripple system: install/setup (npm or CDN), global usage rules (shadow DOM, accessibility, FOUC prevention, theming), what's available.

When It Triggers

General Ripple questions; starting a new Ripple project.

/ripple-tokens

What It Does

Looks up design tokens and CSS custom properties — which token to use, hex/rgba values, semantic vs. palette tokens, dataviz colors, theming.

When It Triggers

"Which token for error text / hover state," browsing or searching tokens.

/ripple-components

What It Does

Component-level reference: props, attributes, events, wm-* tags, HTML/React wiring, code examples.

When It Triggers

When building or naming any component (Button, Input, Tabs, Navigation, etc.).

/ripple-forms

What It Does

Builds or modifies forms and interactive controls - inputs, textareas, multi-step forms, search/filter bars.

When It Triggers

"Add a form," "survey," "repeatable fields," any native form element request.

/ripple-charts

What It Does

Picks the right chart component and color palette; scaffolds data visualizations.

When It Triggers

"Bar chart," "visualize," "completion rate," "trend," "distribution of scores."

/ripple-recipes

What It Does

Pure-CSS solutions from wm-global.css that aren't web components - banners, cards, loaders, toggles, data tables, empty states, focus styles.

When It Triggers

Banners, notifications, checkboxes, toggles, data tables, loaders.

/implement-figma-design

Coming Soon

What It Does

Builds a runnable Ripple prototype directly from a Figma URL via the Dev Mode MCP (pulls real context, not just a screenshot).

When It Triggers

A pasted figma.com link; "build/match/implement this Figma."

/implement-design-without-figma

What It Does

Builds a runnable Ripple prototype from a sketch, screenshot, or text description without a figma link.

When It Triggers

"Build a page," "mock up a screen," an uploaded image with no Figma link.

/create-starter-prototype

What It Does

Scaffolds a brand-new Ripple project (Vite + React + Ripple + Playwright) from nothing.

When It Triggers

"Start a new prototype," "scaffold a Ripple app."

/verify-design

What It Does

Renders a built prototype and diffs it against the source Figma frame or the original requirement.

When It Triggers

"Verify the design," "does this match the Figma," design QA requests.

/report-incident

What It Does

Flags that something went wrong and suggests reporting the issue to the Ripple team.

When It Triggers

Claude detects an unexpected error, or the user says the result wasn't what they wanted.

Installation

Follow the steps below to install using the desktop app, or on GitHub (link opens in new window) to learn how to install using the CLI.

Step 1: Add the ripple-ui plugin

  1. Open the Claude desktop app and click "Customize" in the left sidebar.
  2. Click "Browse" in the top right, then "Plugins" in the "Your organization" tab.
  3. Find "ripple-ui" under "Your organization" tab.
  4. Click the + on the card to install it. (Clicking the card itself opens more options, but the + is the fastest path and what we recommend.)
  5. If the skills don't show up right away, restart the app.

Step 2: Add CLAUDE.md

  1. Open (or create) the file ~/.claude/CLAUDE.md for macOS or %USERPROFILE%\.claude\CLAUDE.md for Windows. This applies the setup to every project, so you only do it once.

    This file is hidden and can be made visible by selecting Command (⌘) + Shift + Period (.) simultaneously on macOS, or View at the top, select Show, and click Hidden items on Windows.

  2. Copy the snippet from CLAUDE.sample.md on GitHub (link opens in new window) and paste it into that file, then save.

    Need help on step 2? Copy this snippet into Claude for assistance.

FAQ

  1. How does an agent know when to use a skill?

    Every skill has a description that lists what it does and the phrases or conditions that should trigger it — a Figma URL, a component name, a request to build a form, and so on. Before acting, the agent checks the incoming request against these descriptions and loads the matching skill.

  2. Which tools do I need for skills to work (Claude Code, Cowork, Figma MCP, etc.)?

    It depends on the skill. The Ripple reference and build skills (tokens, components, forms, charts, recipes, prototyping) work in any environment that can run an AI agent with file access like Claude Code or Cowork. The Figma-specific skills (implement-figma-design, verify-design family) need an active Figma Dev Mode MCP connection, since they work by pulling real design context rather than working from a screenshot. If that connection isn't set up, those skills either won't fire or will fall back to a lower-fidelity approach.

  3. What should I do if I run into an issue?

    As always, feel free to reach out to the Ripple team at the #designsystem Slack channel.

Back to Top