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

frontend-custom-views

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and wire custom frontend pages in the Drumr framework without fighting outdated patterns or unclear navigation rules.

Core Features & Use Cases

  • Route registration in app.registerRoutes() so each custom page has a clear path and layout.
  • Functional View-based pages as the primary pattern for dashboards, summaries, reports, landing pages, and other free-form screens.
  • Route parameter handling through injected props, including path params and queryParams, for cleaner page logic.
  • Programmatic navigation with openView and closeView for page transitions, modals, and nested container flows.
  • Class-based CustomViewComponent support when lifecycle hooks or specialized helpers are needed.
  • Use case: create a project dashboard that opens a summary page in a modal, then returns control to the original page when the flow completes.

Quick Start

Ask for a new Drumr custom page that registers its route, uses a functional View component, and reads route parameters from props.

Frequently Asked Questions about frontend-custom-views

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

FAQPage Schema
How do I build route-backed custom pages in a React frontend?▼

Route-backed custom pages are built by registering paths in app.registerRoutes() and using functional View components that receive injected path and query parameters for clean page logic.

How do I handle programmatic navigation and modals in frontend views?▼

Programmatic navigation and modals are handled using openView and closeView functions, which manage page transitions, nested container flows, and return control to the original page upon completion.

When do I need class-based CustomViewComponent instead of a functional View?▼

You need class-based CustomViewComponent when your custom pages require specialized lifecycle hooks or specific helpers that functional View components do not provide for complex view navigation.

Can I use path and query parameters directly in my dashboard components?▼

Yes, path and query parameters are injected directly into your functional View components as props, allowing your dashboards, summary pages, and reports to read route data cleanly.

What is the best way to structure a modal flow that returns to the original page?▼

The best way to structure returning modal flows is using openView to launch a summary page in a modal, then calling closeView to return control to the original page when the flow completes.

Related Skills

Explore More Software Engineering Skills→
slingr-stackslingr-stack

frontend-layout

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

Official
Advanced
CriezzzCriezzz

menu-navigation-flow

Manage Unity UI navigation with stack-based push, pop, and modal operations.

Community
Intermediate
vultisigvultisig
19

react-query

Write React Query hooks, mutation hooks, and query state components.

Official
Intermediate
slingr-stackslingr-stack

frontend-table-views

Build routed Drumr Framework table views with separated layout and tableOptions.

Official
Advanced