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

backend-components

Replace deprecated backend field ui configuration with frontend component mappings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams move away from the removed backend field ui contract and keep model code focused on data, validation, persistence, and metadata.

Core Features & Use Cases

  • Explains how backend field decorators should avoid presentation logic and let frontend skills handle rendering decisions.
  • Covers field-specific guidance for text, numbers, booleans, choices, dates, files, references, compositions, and arrays.
  • Useful for migrating legacy model code, choosing read and write components, and preserving consistent labels, metadata, and nested rendering behavior.
  • Highlights important patterns such as labelField, valueMetadata, and list wrapping so field output stays predictable across contexts.

Quick Start

Ask the assistant to convert a backend field decorator that still uses ui into the matching frontend declarative component configuration and explain any required read and write mappings.

Frequently Asked Questions about backend-components

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

FAQPage Schema
How do I migrate deprecated backend field UI configuration to frontend components?▼

Migrate deprecated backend field UI configuration by replacing model decorators with declarative frontend component mappings. This process preserves read and write rendering decisions across text, numeric, boolean, choice, date, file, reference, composition, and array fields during migration.

Why should backend model decorators avoid UI rendering logic?▼

Backend model decorators should avoid UI rendering logic to keep model code focused on data, validation, persistence, and metadata. Moving presentation decisions to frontend components ensures field rendering stays predictable and maintainable across different contexts.

How do I handle array and composition fields when migrating UI off backend models?▼

Handle array and composition fields during migration by applying context-aware component selection and list wrapping. This ensures nested rendering behavior stays predictable, preserving consistent labels and metadata for complex field structures.

Can I use this approach for all field types including references and files?▼

Yes, this approach supports references, compositions, arrays, text, numeric, boolean, choice, date, datetime, time, and file fields. It applies context-aware component selection for read and write rendering decisions across all supported field types.

What is labelField and valueMetadata handling in frontend component mapping?▼

labelField and valueMetadata handling are patterns used during frontend component mapping to ensure field output stays predictable across contexts. They preserve consistent labels and metadata when replacing deprecated backend UI configuration with declarative frontend rendering decisions.

Related Skills

Explore More Software Engineering Skills→
slingr-stackslingr-stack

backend-datamodels

Define and validate Drumr Framework backend data models with fields, relationships, and permissions.

Official
Advanced
supersterlingsupersterling
1

json-render-react

Render JSON specifications as React component trees via a type-safe registry.

Community
Advanced
slingr-stackslingr-stack

frontend-field-components

Map Drumr frontend field types to JSX components with context-specific configuration.

Official
Advanced
slingr-stackslingr-stack

frontend-datamodels

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

Official
Intermediate