skills.rest
slingr-stack
slingr-stackOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-layout

Configure Drumr frontend layouts for page shells, navigation, and per-route assignment.

Updated Sep 16, 2025
Search Tags:#layout#frontend#routing#navigation#menus#ui-shell#drumr
One-click install
npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-layout
Source: https://github.com/slingr-stack/qa-test-drumr/tree/main/project-management-app/.agents/skills/frontend-layout
Command: npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and extend Drumr frontend layout shells so every page gets the right navigation, header, footer, and route-specific structure without guesswork.

Core Features & Use Cases

  • Define layouts with app.registerLayout and reuse them as the default shell or assign them per route.
  • Configure left, top, and user menus, plus header and footer options, to match different app sections.
  • Handle dynamic menu items, lifecycle hooks, and My Profile shortcuts for production-ready shell behavior.
  • Use it when splitting a complex app into main, form, and read-only layouts with consistent routing.

Quick Start

Ask the assistant to create a Drumr frontend layout that registers a named layout, configures navigation and menus, and assigns the layout in routing.

Frequently Asked Questions about frontend-layout

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

FAQPage Schema
How do I configure frontend layouts and navigation menus for a Drumr app?▼

You define frontend page shells using app.registerLayout and configure left, top, and user menus via the menu namespace to structure navigation for different application sections.

How do I assign different page layouts to specific routes without creating circular imports?▼

You assign specific page layouts to routes by coordinating app.registerRoutes with your registered layout settings, ensuring main, form, and read-only screens route correctly without circular imports.

Can I handle dynamic menu items and lifecycle hooks in a Drumr UI shell?▼

Yes, Drumr UI shells support dynamic menu items, lifecycle hooks, and My Profile shortcuts to deliver production-ready navigation and header behavior across different application layouts.

What is the best way to split a complex app into main, form, and read-only layouts?▼

The best way to split complex apps is registering distinct main, form, and read-only layout shells, then assigning each layout per route to maintain consistent navigation and structure.

Does configuring a Drumr frontend layout require specific header and footer settings?▼

Configuring a Drumr frontend layout requires defining header and footer settings within your layout registration to ensure every page receives the correct route-specific structure and navigation shell.

Related Skills

Explore More Software Engineering Skills→
slingr-stackslingr-stack

frontend-app

Organize Drumr frontend application startup with configureApp(app) wiring.

Official
Advanced
slingr-stackslingr-stack

frontend-custom-views

Build route-backed custom frontend pages for the Drumr framework.

Official
Intermediate
rodydavisrodydavis
58

flutter-input-output-preview

Create responsive Flutter layouts with TwoPane and InputOutputPreview components.

Community
Intermediate
hoainam183hoainam183

redesign-existing-projects

Audit generic UI patterns and apply design fixes without rewriting architecture.

Community
Intermediate