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

frontend-app

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the confusion of wiring Drumr frontend application startup by separating bootstrap logic from declarative configuration and keeping runtime exports, providers, routes, defaults, and access rules in the right place.

Core Features & Use Cases

  • Bootstrap orchestration: Coordinates app startup through a single configureApp(app) entry point so frontend initialization stays predictable.
  • Declarative app configuration: Guides app defaults, layout registration, routes, data models, and actions into dedicated config modules.
  • Provider and access control setup: Explains how to register React providers, expose Umi runtime exports, and define browser-side view access rules.
  • Use Case: When building a new Drumr frontend, use this Skill to create a clean app.ts and app.runtime.ts structure, wire the provider tree, and lock down which views each role can open.

Quick Start

Use this skill to organize a Drumr frontend app so bootstrap logic, routing, providers, defaults, and access rules are split into the correct files.

Frequently Asked Questions about frontend-app

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

FAQPage Schema
How do I bootstrap a Drumr frontend application with a clean startup structure?▼

To bootstrap a Drumr frontend, use a single configureApp(app) entry point to compose registerDefaults, registerRoutes, registerProviders, registerLayout, registerDataModel, registerAction, and setAccessRules before exposing runtime exports.

What is the best way to separate provider wiring from route registration in a frontend app?▼

Separate provider wiring from route registration by guiding app defaults, layout, routes, data models, and actions into dedicated declarative config modules, coordinated predictably through the configureApp entry point during app startup.

How do I set up browser-side view access rules for different roles in a React frontend?▼

Set up browser-side view access rules by calling setAccessRules within the configureApp composition to lock down which views each role can open before runtime exports are exposed.

Can I use this bootstrap approach to wire Umi runtime exports and React providers together?▼

Yes, this orchestration approach explicitly supports registering React providers and exposing Umi runtime exports while keeping bootstrap logic separated from declarative configuration.

Why does my Drumr frontend app startup fail when runtime exports are called before provider registration?▼

Frontend startup fails because configureApp must fully compose registerProviders, registerRoutes, and setAccessRules before any runtime exports are exposed, ensuring predictable initialization order.

When do I need to organize my frontend app entry points into app.ts and app.runtime.ts files?▼

Organize frontend app entry points when bootstrap logic, routing, providers, defaults, and access rules need splitting into correct files to remove wiring confusion and maintain predictable app startup.

Related Skills

Explore More Software Engineering Skills→
AgustinMadygrafAgustinMadygraf

0a-project-bootstrap-audit

Audit new Python project bootstrap structure and write findings to docs/todo.md.

Community
Intermediate
1k-off1k-off
1

umbraco-collection

Build Umbraco backoffice collections with repository-backed data sources and table views.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

performance-optimisation

Identify and fix performance bottlenecks across frontend, backend, and database layers.

Community
Basic
slingr-stackslingr-stack

frontend-services

Centralize frontend logic into testable service modules and shared providers.

Official
Advanced