ripple-iui CLAUDE.md

ripple-iui CLAUDE.md is an instructions file for Claude Code from qbtrix/ripple-iui. It costs 967 tokens per session, scanned A, original, MIT.

Repository instructions for Ripple UI, a Svelte 5 component library that turns JSON descriptions into interactive interfaces. It documents the project’s commands, architecture, and two ways to describe a user interface.

In plain words
What is it for?
Use it when developing, checking, building, or testing Ripple UI. It helps an agent understand the Svelte project structure and work with low-level widget trees or higher-level interface intentions.
Why use it?
It gives a coding agent the project-specific information needed to work consistently, including which package manager and checks to use. It also explains how the two interface description systems differ.

Instructions file for Claude Code

Written for Claude Code: the file is CLAUDE.md. Also seen: mentions CLAUDE.md; mentions Claude Code.

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add instructions/qbtrix/ripple-iui/claude-md
Clone the repo
git clone --depth 1 https://github.com/qbtrix/ripple-iui

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for ripple-iui CLAUDE.md

README.md
[![agentmods](https://agentmods.dev/badge/instructions/qbtrix/ripple-iui/claude-md.svg)](https://agentmods.dev/instructions/qbtrix/ripple-iui/claude-md)
Your own site
<a href="https://agentmods.dev/instructions/qbtrix/ripple-iui/claude-md"><img src="https://agentmods.dev/badge/instructions/qbtrix/ripple-iui/claude-md.svg" alt="Measured on agentmods" height="20"></a>
Per session 967 This file is loaded in full into every session.
When invoked 967 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00967 $0.00967
Opus 5 $0.00483 $0.00483
Sonnet 5 $0.00193 $0.00193
Haiku 4.5 $0.00097 $0.00097

Measured 5d ago against content hash 34c4360ef789, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

ripple-iui CLAUDE.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

CLAUDE.md · 65 lines

How it starts

The opening of the file, as written. The whole thing — 65 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What This Is

@ripple-ui/svelte — a Svelte 5 component library that renders UI from JSON specs. Designed for AI-generated interfaces: an LLM produces a declarative JSON spec, and Ripple renders it as a fully interactive UI with state management, event handling, and expression resolution.

Commands

bun run dev          # Start dev server (SvelteKit)
bun run build        # Build library to dist/ via svelte-package
bun run check        # Type-check (svelte-kit sync && svelte-check --tsconfig ./tsconfig.json)
bun run test         # Run tests (vitest) — no tests exist yet

Package manager is Bun (bun.lock). Use bun install for dependencies.

Architecture

Two Spec Systems

  1. UISpec (src/lib/schema/ui-spec.ts) — Low-level: explicit widget tree with UINode containing type, props, children, show, event handlers. Direct control over layout.
  2. UniversalSpec (src/lib/schema/universal-spec.ts) — High-level intent-based: declares what the UI should accomplish (browse, select, form, detail, dashboard, etc.) and the layout engine picks the best rendering.

The normalizer (src/lib/core/normalizer.ts) converts UISpec → UniversalSpec by wrapping it as intent: 'custom'.

Core Engine (src/lib/core/)

  • StateManager (state-manager.svelte.ts) — Svelte 5 $state rune-based. Path-based get/set with dot notation ("user.profile.name"). Auto-creates intermediate objects.
  • ExpressionResolver (expression-resolver.ts) — Resolves {state.foo}, {item.price}, ternaries, comparisons, and template strings within props.
  • EventDispatcher (event-dispatcher.ts) — Handles actions: set, api, navigate, toast, emit, open, pin, unpin. Resolves expressions in URLs/body/headers.

Rendering Pipeline

Ripple.svelte → initializes state/events/context → NodeRenderer.svelte recursively renders the widget tree. NodeRenderer evaluates show conditions, resolves props via expressions, binds events, manages loop context (item_as, index_as), and renders children.

Read the full file on GitHub · 65 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 65 lines · 967 tokens per session scan A 34c4360ef789

Subscribe to this mod's changes

ripple-iui CLAUDE.md is an instructions file published in the GitHub repository qbtrix/ripple-iui (6 stars, last pushed 11d ago), licensed MIT. It adds 967 tokens to every session, about $0.0048 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other instructions, from other repositories

agents-universe CLAUDE.md

Claude Code instructions for agents-universe/agents-universe, covering agents universe — enterprise ai agent framework, project overview, monorepo layout, development commands and api (from packages/api/).

agents-universe/agents-universe · 1,950 tokens

generative-ui-playground CLAUDE.md

Claude Code instructions for CopilotKit/generative-ui-playground, covering ui protocols demo, architecture overview, three protocols, 1. static genui and 2. mcp apps.

CopilotKit/generative-ui-playground · 2,286 tokens

angular-a2ui-macroquest AGENTS.md

AGENTS.md instructions for Soverius-AI/angular-a2ui-macroquest: MacroQuest is an Angular 22 demonstration application for CopilotKit Angular, A2UI, Open Generative UI, and NgRx Signal Store. Keep implementation changes small, visible, and reliable enough for a live talk.

Soverius-AI/angular-a2ui-macroquest · 312 tokens

kungfu copilot-instructions.md

Copilot instructions for kungfu-systems/kungfu: Read and follow AGENTS.md before proposing or running changes. It is the shared agent router for this repository, including the canonical Shifu development and build entrypoint.

kungfu-systems/kungfu · 45 tokens

GPT-RAG release.instructions.md

Instructions for Azure/GPT-RAG, a project described as: Enterprise-grade accelerator for agentic RAG on Azure. Built on Microsoft Foundry with Foundry IQ as the default retrieval backend, Microsoft Agent Framework orchestration, Zero-Trust architecture and IaC.

Azure/GPT-RAG · 207 tokens

elysia-admin AGENTS.md

AGENTS.md instructions for meishanlaoyao/elysia-admin, covering elysia admin — codex global rules, dependency direction (strict), generation principles, module dev triggers and file reading discipline (token budget).

meishanlaoyao/elysia-admin · 807 tokens