r2-sys-integrate

Automate Leptos module integration into menu-driven routing from menu.yaml.

2|1|Updated Nov 20, 2025

Search Tags:#frontend #routing #tailwind #design-system #module-integration #menu.yaml #leptos

Ready to run

npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-sys-integrate

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: r2-sys-integrate
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/skills/r2-sys-integrate
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-sys-integrate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams automate the integration of multiple UI modules into a cohesive, menu-driven frontend system with centralized routing, state, and design consistency.

Core Features & Use Cases

Menu-driven routing from menu.yaml to define routes and navigation
Module integration into a unified pages structure
Global state management and context/provider setup
Layout and navigation components with consistent styling
Type definitions and constants aggregation across modules
Application entry point and root layout configuration
Route registration and dynamic navigation from menu.yaml
Global style configuration and Tailwind theming integration
Design-system alignment based on .r2mo/spec and design tokens

Quick Start

Configure and run the module integration workflow to generate a working Leptos router with menu-driven routes from menu.yaml.

Frequently Asked Questions about r2-sys-integrate

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

FAQPage Schema

How do I set up menu-driven routing from menu.yaml in a Leptos frontend?▼

To set up menu-driven routing, configure menu.yaml with your navigation hierarchy and run the integration workflow to auto-generate route registrations and dynamic navigation components. The system reads menu.yaml to wire Leptos routes and compose modules into a unified pages structure without renaming them.

What is the best way to integrate multiple UI modules into a single Leptos application?▼

Integrating multiple UI modules involves composing them into a unified pages structure via an automated workflow that wires routes from menu.yaml without renaming modules. It generates global state management, layout components, and aggregates type definitions to ensure consistent module composition.

Can I apply Tailwind theming and design system tokens across all integrated frontend modules?▼

Yes, Tailwind theming and design system tokens are applied across all modules. The integration generates global style configurations and aligns the UI based on .r2mo/spec files and design tokens to ensure visual consistency throughout the entire menu-driven frontend system.

Does this module integration workflow require renaming existing Leptos components?▼

No, the module integration workflow does not require renaming existing Leptos components. It explicitly wires modules into the unified pages structure and registers routes from menu.yaml while preserving original module names, component structures, and existing type definitions.

How does global state management get configured when assembling a frontend system from modular components?▼

Global state management is configured through an automated context and provider setup generated during module integration. The workflow aggregates type definitions and establishes the root layout configuration to ensure state is accessible across all registered routes and composed modules.