Theme & Styling

Manage Mendix theme compilation and SCSS variable overrides in Dockerized environments.

1|Updated Jun 5, 2026
One-click install
npx skills add https://github.com/engalar/mxcli-taskdemo --skill theme-styling-engalar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Theme & Styling
Source: https://github.com/engalar/mxcli-taskdemo/tree/main/TaskDemo/.claude/skills/theme-styling
Command: npx skills add https://github.com/engalar/mxcli-taskdemo --skill theme-styling-engalar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill resolves the complexity of managing Mendix theme compilation, SCSS variable overrides, and the nuances of CSS hot-reloading in containerized environments.

Core Features & Use Cases

  • SCSS Workflow Management: Provides clear guidance on the Atlas compilation chain and variable override hierarchy.
  • Hot-Reload Optimization: Details the specific sequence for Docker-based CSS updates to ensure instant browser feedback.
  • Best Practices & Guardrails: Prevents common build crashes by documenting specific widget styling limitations and case-sensitivity requirements for design properties.

Quick Start

Ask the AI to verify the current SCSS compilation order or to troubleshoot a styling issue by checking the design property keys against the project theme files.

Frequently Asked Questions about Theme & Styling

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

FAQPage Schema
How do I set up CSS hot-reload for Mendix themes in a Docker environment?

CSS hot-reload in Docker requires following a specific update sequence using M2EE styling protocols to ensure the browser instantly reflects SCSS changes without manual refresh.

What is the SCSS compilation order for the Mendix Atlas framework?

The Atlas framework compilation chain processes SCSS variable overrides in a strict hierarchy, requiring adherence to the framework structure to successfully apply theme customizations.

Why does my Mendix styling crash after updating design properties?

Styling crashes in Mendix often result from mismatched design property keys or case-sensitivity issues within the project theme files, which must be verified against the Atlas structure.

Can I override Atlas UI SCSS variables for custom Mendix widgets?

You can override Atlas SCSS variables for custom widgets, but you must account for specific widget styling limitations to prevent compilation build crashes.

What is the best way to troubleshoot Mendix SCSS compilation errors?

Troubleshooting Mendix SCSS errors involves checking design property keys against project theme files and verifying the compilation chain order to identify mismatched variables or case-sensitivity issues.

Do I need Docker to manage Mendix theme styling and hot-reload?

Docker is explicitly supported for managing Mendix theme compilation and CSS hot-reload workflows, providing an isolated environment to execute the M2EE styling update protocols.