headwirecom
- 3 skills
- 0 followers
- 7 hours ago last updated
- ▌ Htl Scripting · headwirecom bundleWrite, edit, and review AEM HTL (HTML Template Language) scripts. HTL is the server-side template system for AEM components — HTML files with ${expression} syntax and data-sly-* block attributes. Use when creating or modifying .html component scripts, fixing XSS context errors, building iteration/conditional markup, wiring Sling Models via data-sly-use, or constructing reusable HTL templates. Also activate when the user mentions HTL, Sightly, data-sly-*, or AEM component markup.
- ▌ Aem Component Development · headwirecom bundleBuild, extend, and configure AEM components end-to-end. Covers component node structure (cq:Component), Touch UI dialogs (cq:dialog with Granite UI), Sling Models, client libraries, edit configuration (cq:editConfig), and content templates. Use when creating new AEM components, adding or modifying component dialogs, wiring Sling Models, setting up clientlibs, extending Core Components, configuring edit behavior, or troubleshooting component rendering. Also activate when the user mentions cq:Component, cq:dialog, componentGroup, Granite UI widgets, or AEM component architecture.
- ▌ Aem UI Module Development · headwirecomBuild, structure, and register frontend JavaScript modules for AEM components using Vite and the DOM-driven Registry pattern (Island Architecture). Covers the transition away from HTL-injected script tags (`<sly>`) to a `MutationObserver`-driven global entry point (`app.ts`), dynamic module loading (`registry.ts`), and safe memory management (`WeakMap` and `AbortController`). Use when creating or refactoring frontend JS for AEM, handling DOM event bindings, ensuring AEM authoring drag-and-drop compatibility, or optimizing Vite chunking and bundle sizes. Also activate when the user mentions data-ui-module, top-level side effects, UI teardown, or AEM frontend performance.