By 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.jsonschemas and make content editable usingdata-lfr-editableattributes. - 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-typemapping. - Configuration Types: Read FRAGMENT_LFR_CONFIGURATION_TYPES.md for
configuration.jsonschemas. - 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.