skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

r2mo-ui-route

Generate runtime frontend routing trees and guard configurations from R2MO design specifications.

2|1|Updated Nov 20, 2025
Search Tags:#frontend#routing#design-system#guards#r2mo#route-config
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-route
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2mo-ui-route
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/docs/skills/r2mo-ui-route
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-route

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend routing config derived from R2MO design and module/page specs to ensure consistent navigation, guards, and layout mapping across apps.

Core Features & Use Cases

  • Generate route trees, guard rules, and menu projection from .md specs
  • Ensure lazy-loading, 404/403 handling, and dynamic title updates
  • Apply layout associations and keep_alive metadata from front-matter

Quick Start

Feed your R2MO design documents to generate the runtime route tree and guard configuration.

Frequently Asked Questions about r2mo-ui-route

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

FAQPage Schema
How do I generate Vue or React routing configuration from design specs?▼

Frontend routing configuration derived from R2MO specs ensures consistent navigation, guard rules, and layout mapping by translating front-matter keys into lazy-loaded routes, 404/403 handling, and meta injection.

How do I configure route guards and lazy-loading from markdown front-matter?▼

Mapping front-matter keys such as guards, keep_alive, and route_base translates markdown metadata into runtime route trees with lazy-loaded components, 403 handling, and dynamic meta injection for admin interfaces.

Does this routing approach work for both Vue and React admin UIs?▼

The route metadata-driven approach applies to admin UIs built with Vue or React, using front-matter keys to drive layouts, guards, menus, and keep_alive configurations across modules and pages.

What front-matter keys are required to build a dynamic route tree?▼

Front-matter driven keys including spec, route, route_base, layout, guards, keep_alive, order, title, icon, roles, and hidden generate lazy-loaded routes, 404/403 handling, and meta injection for the application.

How do I handle 404 and 403 errors in a metadata-driven routing setup?▼

Guard configurations generated from R2MO design specifications handle 404 and 403 errors by injecting route metadata that manages unauthorized access and missing routes within the lazy-loaded route tree.

Related Skills

Explore More Software Engineering Skills→
silentbalanceyhsilentbalanceyh
2

r2mo-ui-tree

Render hierarchical data as tree views, selectors, and tree-tables from R2MO note specs.

Community
Advanced
sayali-ingle-pdlsayali-ingle-pdl

router

Generate a Vue Router setup file with hash-based routing and navigation guards.

Community
Intermediate
silentbalanceyhsilentbalanceyh
2

r2mo-ui-admin

Generates a frontend shell with layout, navigation, and theming from R2MO specification documents.

Community
Advanced
grvpanchalgrvpanchal
1

server-router

Configure client-side routing with React Router, Vue Router, or Angular Router.

Community
Intermediate