feat: add custom pluggable widget AIGC skill

[engalar]

Summary

• Add skill file (.claude/skills/mendix/create-custom-widget.md) that teaches Claude to autonomously scaffold, build, and install Mendix pluggable widgets from natural language descriptions
• Fix critical widget id namespace format: must include lowercase widget name segment (e.g. com.example.widgets.helloworld.HelloWorld) to match the JS subdirectory the build tool creates, preventing 404 at runtime
• Add design document explaining key decisions (no Yeoman, TypeScript + Function Components, official toolchain)

Test plan

• Built HelloWorld widget with corrected id format — MPK structure matches working Mendix widgets (Tooltip, Combobox, etc.)
• Verified JS path in MPK (com/example/widgets/helloworld/HelloWorld.js) aligns with <file path> in package.xml
• Compared against baseline Tooltip widget MPK from GenAIDemo project
• Deploy rebuilt MPK to Studio Pro and confirm widget loads without 404

🤖 Generated with Claude Code

[ako]

Clean new skill, no overlap, well-structured. The widget ID namespace fix is a valuable gotcha to document.

[ako]

Follow-up: Widget should be developed inside the Mendix project

The skill currently scaffolds the widget as a standalone directory with a manual cp dist/*/*.mpk /path/to/mendix-project/widgets/ step. This misses the main DX benefit of the Mendix pluggable widget toolchain.

Mendix best practice

Develop the widget inside the Mendix project directory, with config.projectPath pointing back to the project root:

MyMendixApp/
├── customwidgets/
│   └── HelloWorld/
│       ├── package.json     # config.projectPath = "../../"
│       ├── src/
│       └── ...
├── widgets/                 # .mpk auto-deployed here by build tool
├── app.mpr

What this enables

• npm run build auto-copies the .mpk to <projectPath>/widgets/ — no manual cp step
• npm start watches for changes and auto-rebuilds + auto-deploys (hot reload)
• Studio Pro picks up the updated widget after F4 (Synchronize Project Directory)

Suggested changes to the skill

1. Default scaffold location to <mendix-project>/customwidgets/<WidgetName>/
2. Set config.projectPath to "../../" (or appropriate relative path) instead of "./tests/testProject"
3. Replace the manual copy step (Step 8) with a note that the build auto-deploys to widgets/
4. Add npm start watch mode to the dev workflow
5. Mention F4 sync in Studio Pro for picking up changes

This turns the dev cycle from "build → copy → reload" into just "save → F4".

[ako]

Follow-up: Development vs publishing workflow + Marketplace steps

Two-phase approach

The skill should cover both phases, since they use different project structures:

Phase	Widget location	Why
Development	Inside Mendix project (customwidgets/)	Fast iteration: projectPath auto-deploys .mpk to widgets/, npm start watch mode, F4 sync in Studio Pro
Publishing	Standalone repo	Independent versioning, Marketplace submission, reuse across projects

The widget source is self-contained (package.json, src/, no Mendix project dependencies), so extraction to a standalone repo is just moving the directory.

Marketplace publishing workflow

The skill should include a section on getting the widget into the Marketplace. Steps from the Mendix docs:

Preparation:

1. Ensure the widget builds cleanly (npm run build → .mpk)
2. Add a license file (MIT or Apache 2.0 require it in the artifact)
3. Prepare a cover image (600×240 px suggested)
4. Prepare up to 10 screenshots (16:9 ratio)
5. Write documentation: typical usage scenario, features, limitations, configuration

Submission (via marketplace.mendix.com → Add Content):

1. Upload — select .mpk or link GitHub repo, set version, select Studio Pro version, choose visibility (Public = Mendix review required, Private = company-only)
2. General info — name, tagline, detailed description, up to 3 industries + 3 categories
3. Support & licensing — license type, contact email, dev team
4. Media & docs — screenshots, optional YouTube demo, documentation sections
5. Preview & publish — public components go through Mendix review + vulnerability scanning (QSM)

Ongoing:

• Regular updates required (bug fixes, Studio Pro compatibility) or listing may be removed
• Security fix releases support CVE/CWE identifiers
• Version updates via "My Content" → "Add New Release"

Suggested skill structure

## Development (inside Mendix project)
  - Scaffold in customwidgets/<WidgetName>/
  - config.projectPath = "../../"
  - npm start for watch mode
  - F4 in Studio Pro to sync

## Publishing (standalone repo)
  - Extract to own repo when ready to share
  - npm run build → .mpk
  - License file, screenshots, docs

## Marketplace submission
  - Step-by-step from Add Content through review