AI SummaryRipple is a TypeScript UI framework that combines the best parts of React, Solid, and Svelte. Created by Dominic Gannaway (@trueadm), Ripple is designed to be JS/TS-first with its own file extension that
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "ripple — Copilot Instructions" prompt rules to my project. Repository: https://github.com/Ripple-TS/ripple Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
the elegant TypeScript UI framework
Ripple Project Guide for AI Agents
Ripple is a TypeScript UI framework that combines the best parts of React, Solid, and Svelte. Created by Dominic Gannaway (@trueadm), Ripple is designed to be JS/TS-first with its own .ripple file extension that fully supports TypeScript.
Documentation
For comprehensive Ripple syntax, components, reactivity, and API documentation, see: • website/public/llms.txt - Full LLM-optimized documentation • README.md - Project overview and quick start • CONTRIBUTING.md - Contribution guidelines
RuleSync
This project uses RuleSync to maintain a single source of truth for AI agent instructions. The canonical rules are in .rulesync/rules/, which are automatically generated to tool-specific locations: | Agent | Generated File | | -------------- | --------------------------------- | | Claude Code | CLAUDE.md | | GitHub Copilot | .github/copilot-instructions.md | | Cursor | .cursor/rules/project.mdc | | Gemini CLI | GEMINI.md | | AGENTS.md | AGENTS.md | To regenerate after editing .rulesync/rules/: `bash pnpm rules:generate ` This runs automatically on pnpm install via the prepare script.
Project Structure
This is a pnpm monorepo. Key packages are marked with *. ` packages/ ├── ripple/* # Core framework │ └── src/ │ ├── compiler/ # Compilation pipeline (see Compiler Architecture) │ │ ├── phases/ │ │ │ ├── 1-parse/ # Acorn-based parser with RipplePlugin │ │ │ ├── 2-analyze/ # Scope analysis, CSS pruning, validation │ │ │ └── 3-transform/# Client/server code generation │ │ ├── scope.js # Scope and binding management │ │ ├── types/ # AST type definitions │ │ └── utils.js # Compiler utilities │ ├── runtime/ # Runtime library (see Runtime Architecture) │ │ ├── internal/ │ │ │ ├── client/ # DOM operations, reactivity, events │ │ │ └── server/ # SSR string generation │ │ ├── index-client.js # Client entry (browser) │ │ └── index-server.js # Server entry (SSR) │ └── server/ # Server-side rendering utilities ├── language-server/* # LSP implementation via Volar framework ├── vscode-plugin/* # VS Code extension (uses language-server) ├── typescript-plugin/* # TypeScript language service plugin ├── eslint-plugin/* # ESLint rules for Ripple ├── eslint-parser/* # ESLint parser for .ripple files ├── prettier-plugin/* # Prettier formatting support ├── vite-plugin/* # Vite build integration ├── rollup-plugin/ # Rollup build integration ├── cli/* # CLI tool (@ripple-ts/cli) ├── create-ripple/ # Project scaffolding (npx create-ripple) ├── compat-react/* # React interoperability layer ├── tree-sitter/* # Tree-sitter grammar for syntax highlighting ├── intellij-plugin/ # IntelliJ/WebStorm support ├── nvim-plugin/ # Neovim support ├── sublime-text-plugin/ # Sublime Text support ├── zed-plugin/ # Zed editor support └── textmate/ # TextMate grammar (shared by editors) playground/ # Development playground website/ # Documentation website templates/ # Project templates (basic, etc.) scripts/ # Build and maintenance scripts `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts