ue-component-model

Generate and maintain Universal Editor JSON configurations for AEM Edge Delivery blocks.

1|Updated Oct 7, 2024
One-click install
npx skills add https://github.com/valithedge/etisalatedge --skill ue-component-model-valithedge
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ue-component-model
Source: https://github.com/valithedge/etisalatedge/tree/main/.agents/skills/ue-component-model
Command: npx skills add https://github.com/valithedge/etisalatedge --skill ue-component-model-valithedge

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? This Skill provides a structured approach to create and maintain the Universal Editor (UE) configuration files needed to expose and configure AEM Edge Delivery Services blocks: component-definition.json (block registration), component-models.json (property panels), and component-filters.json (placement rules). It covers both centralized (single set of files at project root) and distributed (per-block) config patterns and describes how to align IDs across files and validate references.

## Core Features & Use Cases

  • Generate, update, and validate the three UE configuration files for new or existing blocks.
  • Map block content to appropriate field types (text, richtext, image, aem-content, etc.), ensure model IDs match template definitions, and enforce proper filter wiring for containers.
  • Use cases include adding a new UE block, modifying a block's fields, configuring container blocks with child items, and registering blocks to the section filter for authoring.

Quick Start

Generate the three JSON config files (component-definition.json, component-models.json, component-filters.json) at the project root and wire them into the section filter.

Frequently Asked Questions about ue-component-model

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

FAQPage Schema
How do I create Universal Editor JSON configurations for AEM Edge Delivery blocks?

To create Universal Editor configurations for AEM Edge Delivery blocks, generate three JSON files at your project root: component-definition.json for block registration, component-models.json for property panels, and component-filters.json for placement rules. Wire them into the section filter to enable authoring.

What is the difference between centralized and distributed component model patterns in Universal Editor?

Centralized component model patterns use a single set of UE configuration files at the project root, while distributed patterns place component-definition.json, component-models.json, and component-filters.json per block. Both require correctly aligning IDs and validating references across files.

How do I configure container blocks with child items in component-filters.json?

Configuring container blocks with child items in component-filters.json requires enforcing proper filter wiring for containers. You map the parent block to the section filter and ensure the placement rules allow the designated child components to be authored within the container block.

How do I map block content to field types in component-models.json?

Mapping block content to field types in component-models.json involves assigning appropriate types like text, richtext, image, and aem-content to your block properties. Ensure the model IDs match the template definitions in component-definition.json for a consistent authoring experience.

Why are my Universal Editor block fields not showing up in the authoring panel?

Universal Editor block fields fail to appear in the authoring panel when model IDs do not match the template definitions or references are invalid. You must ensure IDs are correctly aligned across component-definition.json and component-models.json and validate all references.