frontend-custom-views

Name: frontend-custom-views
Availability: InStock
Author: Slingr

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

Updated Sep 16, 2025

Search Tags:#frontend #react #routing #navigation #views #drumr

Ready to run

npx skills add https://github.com/slingr-stack/qa-test-drumr --skill frontend-custom-views

💬 Prompt for ChatGPT / Claude Chat▼

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.