Skills
.Work. You
Rest

r2-dev-layout

Community

Create scalable, menu-driven app layouts.

Software Engineering#layout#frontend#navigation#tailwind#menu#leptos
Authorsilentbalanceyh
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Provides a reusable, scalable application layout with global navigation, a dynamic left menu driven by YAML definitions, and a consistent content area for authenticated users and business modules.

Core Features & Use Cases

  • Top navigation bar with system title/logo, user info, and logout
  • Left sidebar menu driven from menu.yaml (dynamic, collapsible)
  • Main content area with page outlet
  • User profile display and dropdown
  • Logout functionality
  • Menu highlighting based on current route and responsive behavior
  • Menu state management and responsive layout for desktop/tablet/mobile
  • Design-system-aligned styling using Tailwind and a shared structure

Quick Start

Create a new app layout by implementing src/components/layout.rs and wiring it to your menu.yaml definitions.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: r2-dev-layout
Download link: https://github.com/silentbalanceyh/r2mo-lain/archive/main.zip#r2-dev-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.