## File: README.md Table of contents #### TOC - [πŸ“Ί Demo](#-demo) - [πŸ‘‹πŸ» Getting Started \& Join Our Community](#-getting-started--join-our-community) - [Download](#download) - [Community](#community) - [✨ Features](#-features) - [πŸ”„ Bilingual / Translation Only](#-bilingual--translation-only) - [✨ Selection Translation](#-selection-translation) - [🧠 Context-Aware Translation](#-context-aware-translation) - [🎬 Subtitle Translation](#-subtitle-translation) - [πŸ”Š Text-to-Speech (TTS)](#-text-to-speech-tts) - [πŸ“¦ Batch Requests](#-batch-requests) - [πŸ€– 20+ AI Providers](#-20-ai-providers) - [🀝 Contribute](#-contribute) - [Contribute Code](#contribute-code) - [πŸ“œ Commercial License Grant](#-commercial-license-grant) - [❀️ Sponsors](#️-sponsors) ## πŸ“Ί Demo ## πŸ‘‹πŸ» Getting Started & Join Our Community Read Frog's vision is to provide an easy-to-use, intelligent, and personalized language learning experience for language learners of all levels. This has become possible in the AI era, but there are few products on the market that meet this demand. Therefore, we decided to take matters into our own hands and ultimately make the world no longer reliant on human language instructors. Whether you are a user or a developer, Read Frog will be an important part of your journey toward this vision. Please be aware that Read Frog is currently under active development, and feedback is welcome for any [issues][issues-link] encountered. ### Download | Browser | Version | Download | | ------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------- | | Chrome | [![Chrome Version badge][chrome-version-shield]][chrome-store-link] | [Chrome Web Store][chrome-store-link] or [δΈ­ε›½ι•œεƒ][crxsoso-link] | | Edge | [![Edge Version badge][edge-version-shield]][edge-store-link] | [Microsoft Edge Addons][edge-store-link] | | Firefox | [![Firefox Version badge][firefox-version-shield]][firefox-store-link] | [Firefox Add-ons][firefox-store-link] | ### Community | [![Discord badge][discord-shield-badge]][discord-link] | In Discord ask questions, and connect with developers. | | :----------------------------------------------------- | :------------------------------------------------------------------------------------- | | [![WeChat badge][wechat-shield-badge]][wechat-link] | If you are in mainland China, you can add the WeChat account to join the WeChat group. | > \[!IMPORTANT] > > **⭐️ Star Us**, You will receive all release notifications from GitHub without any delay \~ [![Star Read Frog on GitHub][image-star]][github-star-link] Star History [ ## ✨ Features Transform your everyday web reading into an immersive language learning journey with Read Frog's powerful features. ### πŸͺ„ [Custom AI Actions][docs-tutorial] Turn selected text into reusable AI tools that match the way you read and learn. Define your own prompts and structured output fields, choose a provider, model, and icon, then run the action directly from the selection toolbar for dictionary lookups, rewriting, summaries, explanations, or any workflow you design. Start with the built-in **Dictionary** and **Improve Writing** templates, or build an action from scratch. Structured results can also be mapped and saved to Notebase for later study. [ ### 🧠 [Flashcards & Spaced Repetition][docs-tutorial] Save vocabulary, definitions, example sentences, translations, and reading notes to Notebase, then turn them into flashcards with customizable card templates. Content you discover while reading becomes study material without interrupting your flow. Review due cards online and rate each one **Again**, **Hard**, **Good**, or **Easy**. Read Frog's spaced-repetition scheduler uses your feedback to decide when each card should appear againβ€”right before you are likely to forget it. [ ### πŸ”„ [Bilingual / Translation Only][docs-tutorial] Switch seamlessly between two translation display modes. **Bilingual mode** shows the original text alongside its translation, perfect for learning and comparison. **Translation-only mode** replaces the original text entirely for a cleaner reading experience. The extension automatically re-translates all visible content when you switch modes while translation is active, ensuring a smooth transition without needing to refresh the page. [ ### ✨ [Selection Translation][docs-tutorial] Select any text on a webpage to reveal a smart toolbar with powerful options. **Translate** streams the translation in real-time. **Explain** provides detailed explanations tailored to your language level. **Speak** reads the text aloud using text-to-speech. The toolbar intelligently positions itself to stay within the viewport, supports drag interactions, and works across all websites. Perfect for quick lookups while reading. [ ### 🧠 [Context-Aware Translation][docs-tutorial] Enable AI to understand the full context of what you're reading. When activated, Read Frog extracts the page title and a concise Markdown version of the page content, providing this context to the AI for more accurate, contextually-appropriate translations. This means technical terms get translated correctly within their domain, literary expressions maintain their nuance, and ambiguous phrases are interpreted based on the surrounding content rather than in isolation. [ ### 🎬 [Subtitle Translation][docs-tutorial] Translate YouTube subtitles directly in the video player. Watch foreign language content with translations displayed alongside the original subtitles, making video content accessible for language learning. [ ### πŸ”Š [Text-to-Speech (TTS)][docs-tutorial] Listen to any selected text with high-quality AI voices. Powered by **Edge TTS** β€” completely free, with 150+ voices across 80+ languages including Chinese, English, Japanese, Korean, and many more. Adjust rate, pitch, and volume to your preference. Automatic language detection (basic or LLM-powered) with per-language voice mapping ensures the right voice for every language. Smart sentence-aware chunking handles long text by splitting at natural boundaries and prefetching the next chunk for seamless playback. Perfect for pronunciation practice and auditory learning. [ ### πŸ“¦ [Batch Requests][docs-tutorial] Save up to 70% on API costs with intelligent request batching. Read Frog groups multiple translation requests into single API calls, reducing overhead and token usage while maintaining translation quality. The system includes smart retry logic with exponential backoff and automatic fallback to individual requests if batch processing fails. All handled transparently in the background. [ ### πŸ€– [20+ AI Providers][docs-tutorial] Connect to 20+ AI providers through Vercel AI SDK: OpenAI, DeepSeek, Anthropic Claude, Google Gemini, xAI Grok, Groq, Mistral, Ollama, and many more. Configure custom endpoints, API keys, and model settings for each provider. Plus free translation options: Google Translate, Microsoft Translate, and DeepLX for cost-free basic translations. [ ## 🀝 Contribute Contributions of all types are more than welcome. 1. Promote Read Frog to your friends and family. 2. Report [issues][issues-link] and feedback. 3. Contribute code. ### Contribute Code Project Structure: [DeepWiki](https://deepwiki.com/mengxi-ream/read-frog) Ask AI to understand the project: [Dosu](https://app.dosu.dev/29569286-71ba-47dd-b038-c7ab1b9d0df7/documents) Check out the [Contribution Guide](https://readfrog.app/en/docs/code-contribution/contribution-guide) for more details. ReadFrog is dual-licensed under GPLv3 and a commercial license. See [CONTRIBUTING.md](./CONTRIBUTING.md) for contributor licensing terms. | | | --- | [ ## πŸ“œ Commercial License Grant **Meituan Tabbit Browser Team**: Free license (at no cost) for closed-source commercial use, limited to v1.21.3 and earlier versions (commit [`724863f`](https://github.com/mengxi-ream/read-frog/commit/724863fdbc2d777766cada6c111235534ee03ca0)). Granted on March 3, 2026, 9:00 AM (Vancouver Time, UTC-8). [ ## ❀️ Sponsors Every donation helps us build a better language learning experience. Thank you for supporting our mission! [![Sponsors][sponsor-image]][sponsor-link] [ [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square [chrome-store-link]: https://chromewebstore.google.com/detail/read-frog-open-source-ai/modkelfkcfjpgbfmnbnllalkiogfofhb [chrome-users-shield]: https://img.shields.io/chrome-web-store/users/modkelfkcfjpgbfmnbnllalkiogfofhb?style=flat-square&label=Chrome%20Users&color=yellow&labelColor=black [chrome-version-shield]: https://img.shields.io/chrome-web-store/v/modkelfkcfjpgbfmnbnllalkiogfofhb?style=flat-square&label=Chrome%20Version&labelColor=black&color=yellow [contributors-link]: https://github.com/mengxi-ream/read-frog/graphs/contributors [contributors-shield]: https://img.shields.io/github/contributors/mengxi-ream/read-frog?style=flat-square&labelColor=black [crxsoso-link]: https://www.crxsoso.com/webstore/detail/modkelfkcfjpgbfmnbnllalkiogfofhb [chinese-shield]: https://img.shields.io/badge/%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray?style=flat-square [discord-link]: https://discord.gg/ej45e3PezJ [discord-shield]: https://img.shields.io/discord/1371229720942874646?style=flat-square&label=Discord&logo=discord&logoColor=white&color=5865F2&labelColor=black [discord-shield-badge]: https://img.shields.io/badge/chat-Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white&labelColor=black [edge-store-link]: https://microsoftedge.microsoft.com/addons/detail/read-frog-open-source-a/cbcbomlgikfbdnoaohcjfledcoklcjbo [english-shield]: https://img.shields.io/badge/English-gray?style=flat-square [firefox-store-link]: https://addons.mozilla.org/firefox/addon/read-frog-open-ai-translator/ [firefox-version-shield]: https://img.shields.io/amo/v/read-frog-open-ai-translator?style=flat-square&label=Firefox%20Version&labelColor=black&color=orange [firefox-users-shield]: https://img.shields.io/amo/users/read-frog-open-ai-translator?style=flat-square&label=Firefox%20Users&color=orange&labelColor=black [edge-users-shield]: https://img.shields.io/badge/dynamic/json?style=flat-square&logo=microsoft-edge&label=Edge%20Users&query=%24.activeInstallCount&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Fcbcbomlgikfbdnoaohcjfledcoklcjbo&labelColor=black [edge-version-shield]: https://img.shields.io/badge/dynamic/json?style=flat-square&logo=microsoft-edge&label=Edge%20Version&query=%24.version&url=https%3A%2F%2Fmicrosoftedge.microsoft.com%2Faddons%2Fgetproductdetailsbycrxid%2Fcbcbomlgikfbdnoaohcjfledcoklcjbo&labelColor=black&prefix=v [extension-release-shield]: https://img.shields.io/github/package-json/v/mengxi-ream/read-frog?filename=package.json&style=flat-square&label=Latest%20Version&color=brightgreen&labelColor=black [github-release-link]: https://github.com/mengxi-ream/read-frog/releases [github-star-link]: https://github.com/mengxi-ream/read-frog/stargazers [image-banner]: /assets/banner.png [image-star]: ./assets/star.png [issues-link]: https://github.com/mengxi-ream/read-frog/issues [issues-shield]: https://img.shields.io/github/issues/mengxi-ream/read-frog?style=flat-square&labelColor=black [japanese-shield]: https://img.shields.io/badge/%E6%97%A5%E6%9C%AC%E8%AA%9E-gray?style=flat-square [korean-shield]: https://img.shields.io/badge/%ED%95%9C%EA%B5%AD%EC%96%B4-gray?style=flat-square [last-commit-shield]: https://img.shields.io/github/last-commit/mengxi-ream/read-frog?style=flat-square&label=commit&labelColor=black [russian-shield]: https://img.shields.io/badge/%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9-gray?style=flat-square [sponsor-image]: https://cdn.jsdelivr.net/gh/mengxi-ream/static/sponsorkit/sponsors.svg [sponsor-link]: https://github.com/sponsors/mengxi-ream [sponsor-shield]: https://img.shields.io/github/sponsors/mengxi-ream?style=flat-square&label=Sponsor&color=EA4AAA&labelColor=black [spanish-shield]: https://img.shields.io/badge/Espa%C3%B1ol-gray?style=flat-square [star-history-link]: https://www.star-history.com/#mengxi-ream/read-frog&Timeline [star-history-shield]: https://img.shields.io/github/stars/mengxi-ream/read-frog?style=flat-square&label=stars&color=yellow&labelColor=black [traditional-chinese-shield]: https://img.shields.io/badge/%E7%B9%81%E9%AB%94%E4%B8%AD%E6%96%87-gray?style=flat-square [turkish-shield]: https://img.shields.io/badge/T%C3%BCrk%C3%A7e-gray?style=flat-square [vietnamese-shield]: https://img.shields.io/badge/Ti%E1%BA%BFng%20Vi%E1%BB%87t-gray?style=flat-square [website]: https://readfrog.app [wechat-link]: ./assets/wechat-account.jpg [wechat-shield-badge]: https://img.shields.io/badge/chat-WeChat-07C160?style=for-the-badge&logo=wechat&logoColor=white&labelColor=black [docs-tutorial]: https://readfrog.app/docs --- ## File: .changeset/README.md # Changesets Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package repos, or single-package repos to help you version and publish your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets) We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) --- ## File: .agents/skills/vercel-react-best-practices/README.md # React Best Practices A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs. ## Structure - `rules/` - Individual rule files (one per rule) - `_sections.md` - Section metadata (titles, impacts, descriptions) - `_template.md` - Template for creating new rules - `area-description.md` - Individual rule files - `src/` - Build scripts and utilities - `metadata.json` - Document metadata (version, organization, abstract) - __`AGENTS.md`__ - Compiled output (generated) - __`test-cases.json`__ - Test cases for LLM evaluation (generated) ## Getting Started 1. Install dependencies: ```bash pnpm install ``` 2. Build AGENTS.md from rules: ```bash pnpm build ``` 3. Validate rule files: ```bash pnpm validate ``` 4. Extract test cases: ```bash pnpm extract-tests ``` ## Creating a New Rule 1. Copy `rules/_template.md` to `rules/area-description.md` 2. Choose the appropriate area prefix: - `async-` for Eliminating Waterfalls (Section 1) - `bundle-` for Bundle Size Optimization (Section 2) - `server-` for Server-Side Performance (Section 3) - `client-` for Client-Side Data Fetching (Section 4) - `rerender-` for Re-render Optimization (Section 5) - `rendering-` for Rendering Performance (Section 6) - `js-` for JavaScript Performance (Section 7) - `advanced-` for Advanced Patterns (Section 8) 3. Fill in the frontmatter and content 4. Ensure you have clear examples with explanations 5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json ## Rule File Structure Each rule file should follow this structure: ```markdown --- title: Rule Title Here impact: MEDIUM impactDescription: Optional description tags: tag1, tag2, tag3 --- ## Rule Title Here Brief explanation of the rule and why it matters. **Incorrect (description of what's wrong):** ```typescript // Bad code example ``` **Correct (description of what's right):** ```typescript // Good code example ``` Optional explanatory text after examples. Reference: [Link](https://example.com) ## File Naming Convention - Files starting with `_` are special (excluded from build) - Rule files: `area-description.md` (e.g., `async-parallel.md`) - Section is automatically inferred from filename prefix - Rules are sorted alphabetically by title within each section - IDs (e.g., 1.1, 1.2) are auto-generated during build ## Impact Levels - `CRITICAL` - Highest priority, major performance gains - `HIGH` - Significant performance improvements - `MEDIUM-HIGH` - Moderate-high gains - `MEDIUM` - Moderate performance improvements - `LOW-MEDIUM` - Low-medium gains - `LOW` - Incremental improvements ## Scripts - `pnpm build` - Compile rules into AGENTS.md - `pnpm validate` - Validate all rule files - `pnpm extract-tests` - Extract test cases for LLM evaluation - `pnpm dev` - Build and validate ## Contributing When adding or modifying rules: 1. Use the correct filename prefix for your section 2. Follow the `_template.md` structure 3. Include clear bad/good examples with explanations 4. Add appropriate tags 5. Run `pnpm build` to regenerate AGENTS.md and test-cases.json 6. Rules are automatically sorted by title - no need to manage numbers! ## Acknowledgments Originally created by [@shuding](https://x.com/shuding) at [Vercel](https://vercel.com). --- ## File: .agents/skills/vercel-composition-patterns/README.md # React Composition Patterns A structured repository for React composition patterns that scale. These patterns help avoid boolean prop proliferation by using compound components, lifting state, and composing internals. ## Structure - `rules/` - Individual rule files (one per rule) - `_sections.md` - Section metadata (titles, impacts, descriptions) - `_template.md` - Template for creating new rules - `area-description.md` - Individual rule files - `metadata.json` - Document metadata (version, organization, abstract) - **`AGENTS.md`** - Compiled output (generated) ## Rules ### Component Architecture (CRITICAL) - `architecture-avoid-boolean-props.md` - Don't add boolean props to customize behavior - `architecture-compound-components.md` - Structure as compound components with shared context ### State Management (HIGH) - `state-lift-state.md` - Lift state into provider components - `state-context-interface.md` - Define clear context interfaces (state/actions/meta) - `state-decouple-implementation.md` - Decouple state management from UI ### Implementation Patterns (MEDIUM) - `patterns-children-over-render-props.md` - Prefer children over renderX props - `patterns-explicit-variants.md` - Create explicit component variants ## Core Principles 1. **Composition over configuration** β€” Instead of adding props, let consumers compose 2. **Lift your state** β€” State in providers, not trapped in components 3. **Compose your internals** β€” Subcomponents access context, not props 4. **Explicit variants** β€” Create ThreadComposer, EditComposer, not Composer with isThread ## Creating a New Rule 1. Copy `rules/_template.md` to `rules/area-description.md` 2. Choose the appropriate area prefix: - `architecture-` for Component Architecture - `state-` for State Management - `patterns-` for Implementation Patterns 3. Fill in the frontmatter and content 4. Ensure you have clear examples with explanations ## Impact Levels - `CRITICAL` - Foundational patterns, prevents unmaintainable code - `HIGH` - Significant maintainability improvements - `MEDIUM` - Good practices for cleaner code