skills.rest
hunmer
hunmerCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/hunmer/Memento --skill convert-react-to-memento
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Himanshu040604Himanshu040604

sentry-react-sdk

Integrate Sentry SDK for error monitoring, tracing, and session replay in React.

Community
Intermediate
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
salafidurussalafidurus
1

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 and react-native-css in Expo applications.

Official
Intermediate
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced