convert-react-to-memento

Converts a React project into a Memento WebView-ready application.

70|12|Updated Apr 1, 2025

Search Tags:#typescript #react #metadata #tailwind #memento #mock #webview

Ready to run

npx skills add https://github.com/hunmer/Memento --skill convert-react-to-memento

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: convert-react-to-memento
Source: https://github.com/hunmer/Memento/tree/main/.claude/skills/convert-react-to-memento
Command: npx skills add https://github.com/hunmer/Memento --skill convert-react-to-memento

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates converting a React project into a Memento WebView-ready application, configuring mock development environment, metadata, type definitions, and UI integration for a seamless transition.

Core Features & Use Cases

Configure Memento Mock development environment (via npm package)
Create or update metadata.json with required fields
Add Memento TypeScript definitions
Configure Tailwind CSS v4 (via npm)
Configure local fonts with @fontsource
Provide templates to use Memento API (system, storage, ui, plugins)
Support mock testing in development
Use case: Convert an existing React project to a Memento WebView app with minimal changes

Quick Start

Convert my existing React project into a Memento WebView app with mock environment, metadata, and TS definitions.

Frequently Asked Questions about convert-react-to-memento

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert a React app to a Memento WebView?▼

Converting a React app to a Memento WebView requires a project with package.json. The process installs memento-mock, tailwindcss, and @fontsource to configure the environment, metadata, and TypeScript definitions.

Does Memento WebView conversion support Vite and Webpack React projects?▼

Memento WebView conversion supports Vite, Webpack, and CRA React projects. It transforms existing dashboards, apps, and prototypes into Memento WebView integration with minimal changes.

What npm packages are needed to set up a Memento WebView environment?▼

Setting up a Memento WebView environment uses npm packages like memento-mock for development testing, tailwindcss for styling, and @fontsource for local font configuration.

How do I configure Tailwind CSS v4 and local fonts for a Memento WebView app?▼

Configuring Tailwind CSS v4 and local fonts for a Memento WebView app involves installing tailwindcss and @fontsource via npm. The conversion process applies these configurations automatically.

Can I test Memento API calls locally during React development?▼

You can test Memento API calls locally using the memento-mock npm package. The conversion provides templates for system, storage, ui, and plugins APIs to support mock testing in development.