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

frontend-declarative-config

Configure declarative frontend UI metadata for Drumr models and actions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you keep frontend presentation concerns out of backend code by centralizing model and action UI configuration in declarative frontend modules.

Core Features & Use Cases

  • Model UI configuration: Set labels, field components, visibility, editability, help text, default views, and context-specific rendering for frontend-owned data models.
  • Action UI configuration: Customize action labels, icons, execution chrome, parameter field presentation, and lightweight functional action views.
  • App wiring guidance: Register config modules through the frontend bootstrap pipeline so model and action defaults are actually loaded at runtime.
  • Use case: When a product team wants a field to render differently in read versus write mode, or an action to show a custom form with better parameter controls, this Skill explains how to do it safely without moving validation or permissions out of the backend.

Quick Start

Use this Skill to update the relevant frontend config file so the model or action is registered with the desired UI behavior and imported through the app bootstrap path.

Frequently Asked Questions about frontend-declarative-config

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

FAQPage Schema
How do I configure frontend UI metadata for data models without touching backend logic?▼

Frontend UI metadata configuration centralizes model and action presentation in declarative frontend modules. You define field labels, components, visibility, and editability in feature-level config files, keeping frontend presentation concerns out of backend code.

Can I make a field render differently in read versus write mode using declarative config?▼

Declarative config supports context-specific rendering for read versus write modes. You apply context-aware presentation scenarios through merged context matching and precedence handling, allowing fields to render differently without moving validation or permissions out of the backend.

How do I customize action labels and parameter field presentation in a declarative UI setup?▼

Action UI configuration customizes action labels, icons, execution chrome, and parameter field presentation. You define these properties in frontend config files to create lightweight functional action views and control how action parameters are displayed.

What's the best way to register frontend config modules so UI defaults load at runtime?▼

App wiring guidance registers config modules through the frontend bootstrap pipeline. You update the relevant frontend config file so the model or action is registered with the desired UI behavior and imported through the app bootstrap path to load defaults at runtime.

How does dependsOn-driven reactivity work in declarative frontend configuration?▼

DependsOn-driven reactivity manages dynamic field visibility and behavior based on other field states. The declarative config handles dependency resolution through merged context matching and precedence rules, ensuring UI components react correctly to data model changes.

When should I not use declarative config for frontend presentation?▼

Declarative config handles frontend presentation only and should not be used for backend validation or permissions. When a requirement needs to enforce data integrity or access control, keep that logic in the backend and limit declarative config to pure UI rendering concerns.

Related Skills

Explore More Software Engineering Skills→
slingr-stackslingr-stack

backend-api

Expose Drumr data models as GraphQL CRUD with typed actions and validation.

Official
Advanced
slingr-stackslingr-stack

frontend-app

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

Official
Advanced
JordanCoinJordanCoin
6

separation-of-concerns

Enforce clear layer and module boundaries across frontend, backend, and services.

Community
Intermediate
slingr-stackslingr-stack

frontend-datamodels

Define frontend UI presentation for data models via app.registerDataModel configurations.

Official
Intermediate