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

r2-dev-layout

Create a responsive frontend layout with a YAML-driven sidebar and route-aware navigation.

2|1|Updated Nov 20, 2025
Search Tags:#layout#frontend#navigation#tailwind#menu#leptos
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2-dev-layout
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/skills/r2-dev-layout
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2-dev-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about r2-dev-layout

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

FAQPage Schema
How do I create a dynamic sidebar menu from a YAML file in a Leptos app?▼

You can build a menu-driven app layout by defining your navigation structure in menu.yaml and wiring it into a Leptos layout component that renders the sidebar dynamically from those YAML definitions.

How does route-aware menu highlighting work with Leptos Router and Tailwind?▼

Route-aware menu highlighting tracks the current route via Leptos Router integration and AppContext, applying Tailwind-based design-system styling to the active menu item matching the URL path.

Can I build a responsive frontend layout for desktop, tablet, and mobile using Tailwind and Leptos?▼

Yes, you can build responsive frontend layouts for desktop, tablet, and mobile using Tailwind and Leptos by managing menu state and applying responsive utility classes across Sidebar, TopBar, and Content components.

What's the best way to structure a reusable application layout with global navigation and a collapsible sidebar?▼

The best way to structure a reusable application layout is to separate TopBar, Sidebar, and Content into distinct components, driving the collapsible sidebar dynamically from a central menu.yaml configuration.

Do I need AppContext integration to manage user profile display and logout in a Leptos layout?▼

AppContext integration is needed to manage user profile display and logout in a Leptos layout, providing the shared application state required to handle authentication data across the TopBar and content modules.

Related Skills

Explore More Software Engineering Skills→
silentbalanceyhsilentbalanceyh
2

r2-sys-integrate

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

Community
Advanced
abereghiciabereghici

lifecycle/migrate-from-react-router

Migrate React Router v7 projects to TanStack Router route definitions and navigation APIs.

Community
Intermediate
ZeroGravitySkin-RonZeroGravitySkin-Ron

frontend-dev-guidelines

Provide frontend development guidelines for Next.js 16 App Router applications.

Community
Intermediate
edutruledutrul
67

drupal-menus

Automate Drupal menu configuration via YAML files and MenuTree API.

Community
Advanced