liferay-ui-fragments

name	liferay-ui-fragments
description	Expert guidance for building, styling, and configuring Liferay fragments. Focuses on HTML/CSS/JS, styling with CSS tokens, and making content editable.

Liferay UI Fragments Skill

This skill provides expert procedural knowledge for developing high-quality Liferay fragments with a focus on aesthetics and site-wide consistency.

Core Workflows

• Building Fragments: Follow best practices for HTML structure, CSS scoping, and JavaScript initialization.
• Configuration & Editability: Define robust configuration.json schemas and make content editable using data-lfr-editable attributes.
• Styling with Tokens: Map fragment CSS variables to Liferay Classic theme CSS tokens for site-wide brand consistency.

STRICT EXECUTION PROTOCOL (MANDATORY READS)

You MUST NOT rely on pre-existing Liferay knowledge. You MUST use the read_file tool to read the following reference documents BEFORE beginning execution or strategy planning:

• General Liferay Tasks: Read LIFERAY_BEST_PRACTICES.md for baseline standards.
• Fragment Development: Read LIFERAY_FRAGMENT_DEVELOPMENT_GUIDE.md for fundamental fragment structure.
• Fragment Editability: Read FRAGMENT_LFR_EDITABLE_TYPES.md for data-lfr-editable-type mapping.
• Configuration Types: Read FRAGMENT_LFR_CONFIGURATION_TYPES.md for configuration.json schemas.
• Styling Tokens: Read LIFERAY_CORE_STYLEBOOK_CLASSIC_CSS_TOKENS.md for brand-aligned CSS variables.
• Form Fragments: Read LIFERAY_FORM_FRAGMENT_GUIDE.md when working with forms.

Component-Specific Documentation

• HEADER_DOCUMENTATION.md: Architecture for the site header.
• MEGA_MENU_CARD_DOCUMENTATION.md: Configuration for Mega Menu Card components.