create-custom-widget SKILL.md skillA

create-custom-widget from mendixlabs/mxcli is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add mendixlabs/mxcli/create-custom-widget@git:20261010.50fe33a

Pins git:20261010.50fe33a in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
mendixlabs/mxcli
Path
.claude/skills/mendix/create-custom-widget/SKILL.md
Versions recorded
2
Latest version
git:20261010.50fe33a, committed Oct 10, 2026
First version recorded
Aug 21, 2026
Size
14,099 bytes
Repository stars
137
License
Apache-2.0

Build a Mendix pluggable widget from scratch with React and TypeScript and package it as an .mpk. Use when no marketplace or built-in widget covers what is needed and a custom React component has to be written.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

<!-- skill-index: generated by scripts/skill-index.py; make check-skill-index -->
## Find it fast

`sed -n '<from>,<to>p' SKILL.md` one section rather than reading the file;
`./mxcli syntax <topic>` answers *how do I write this* for a fraction of either.

| lines | section |
|---|---|
| 31-35 | Prerequisites |
| 36-117 | Step 1: Scaffold the Project |
| 118-252 | Step 2: Define Widget Properties (widget.xml) |
| 253-313 | Step 3: Write the Entry Component |
| 314-339 | Step 4: Write the React Component |
| 340-368 | Step 5: Editor Config (optional but recommended) |
| 369-380 | Step 6: CSS Styles |
| 381-390 | Step 7: Build |
| 391-398 | Step 8: Install to Mendix Project |
| 399-422 | Common Widget Patterns |
| 423-435 | Checklist Before Build |
| 436-443 | Troubleshooting |

<!-- /skill-index -->
# Create Custom Pluggable Widget

Build a Mendix pluggable widget from scratch using React + TypeScript. Produces a `.mpk` file ready for Studio Pro.

## Prerequisites

- Node.js >= 16
- npm

## Step 1: Scaffold the Project

Create a directory and generate all source files. Use PascalCase for the widget name.

```bash
mkdir -p <WidgetName>/src/components <WidgetName>/src/ui
```
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add mendixlabs/mxcli/create-custom-widget@sha256:309c3b0e3031bf10

The line at the top of this page pins the label git:20261010.50fe33a, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_q5glgnvgmmrie4vs.svg)](https://markdownregistry.com/a/art_q5glgnvgmmrie4vs)

4 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 2 versions of this file, between Aug 21, 2026 and Oct 10, 2026, about one every 50 days.

versioncommittedcommitsizeaudit
git:20261010.50fe33a latest2026-10-10 50fe33a 14,099 BA view · diff
git:20260821.ff81a242026-08-21 ff81a24 13,291 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (14099 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

mendixlabs/mxcli · 137 stars · license Apache-2.0 · pushed 2026-11-07 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_q5glgnvgmmrie4vs
GET https://markdownregistry.com/api/v1/resolve?ref=mendixlabs/mxcli/create-custom-widget
GET https://markdownregistry.com/api/v1/blob/309c3b0e3031bf10efcf7f2b8a98d02bb2f352f96b8d01234baa9f7b52380297

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from mendixlabs/mxcli

issue-triage SKILL.md skill
mendixlabs/mxcli · .claude/skills/issue-triage/SKILL.md · Cluster and classify the open issues in the ako/mxcli fork, both the mendixlabs/mxcli issues mirrored into it and the…
git:20261106.37b0fe6 · audit A · 137 stars
agents SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/agents/SKILL.md · Author Mendix AI agent documents in MDL — Model, Knowledge Base, Consumed MCP Service and Agent, with variables, tools…
git:20261010.50fe33a · audit A · 137 stars
alter-page SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/alter-page/SKILL.md · Modify an existing page or snippet's widget tree in place with ALTER PAGE / ALTER SNIPPET — SET, INSERT, DROP, REPLACE…
git:20261102.69cffcc · audit A · 137 stars
analyze-runtime SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/analyze-runtime/SKILL.md · Find out what a running Mendix app actually does — logs, Prometheus metrics, OpenTelemetry traces and the model…
git:20261010.50fe33a · audit B · 137 stars
assess-migration SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/assess-migration/SKILL.md · Investigate an existing non-Mendix application (Java, .NET, Python, Node, PHP, …) and produce a structured migration…
git:20261010.50fe33a · audit A · 137 stars
assess-quality SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/assess-quality/SKILL.md · Audit a Mendix project against best practices for naming, security, performance, maintainability and architecture, and…
git:20261101.da695f0 · audit A · 137 stars
atlas-design SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/atlas-design/SKILL.md · Make a Mendix app look designed rather than default-Atlas: layout, spacing, typography, colour and design properties…
git:20261010.50fe33a · audit A · 137 stars
bootstrap-app SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/bootstrap-app/SKILL.md · Provision a Mendix project in a repo that has none — interview, `mxcli new`, session hook, project brief, first commit…
git:20261104.237ae1e · audit A · 137 stars
browse-integrations SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/browse-integrations/SKILL.md · Discover the external services a project consumes and browse their cached contracts through the MDL CATALOG — OData…
git:20261012.365840a · audit A · 137 stars
bulk-widget-updates SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/bulk-widget-updates/SKILL.md · Discover and bulk-change widget properties across many pages with LIST WIDGETS and UPDATE WIDGETS. Use when the same…
git:20261010.50fe33a · audit A · 137 stars
business-events SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/business-events/SKILL.md · Define event-driven APIs over Kafka with Mendix business event services — publish and subscribe contracts…
git:20261025.b57af11 · audit A · 137 stars
catalog-search SKILL.md skill
mendixlabs/mxcli · .claude/skills/mendix/catalog-search/SKILL.md · Search the Mendix Catalog platform service registry (catalog.mendix.com) from the CLI to find services published across…
git:20261010.50fe33a · audit A · 137 stars

Every file in mendixlabs/mxcli

Browse by kind, by grade A, or by owner.