From c237f3bab27ee52dff57504bb2d10590f2524c62 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Fri, 13 Feb 2026 12:36:29 +0100
Subject: [PATCH 1/4] chore(agents): remove agent-rules script

---
 automation/utils/bin/rui-agent-rules.ts | 50 -------------------------
 automation/utils/package.json           |  2 -
 package.json                            |  1 -
 turbo.json                              |  5 ---
 4 files changed, 58 deletions(-)
 delete mode 100755 automation/utils/bin/rui-agent-rules.ts

diff --git a/automation/utils/bin/rui-agent-rules.ts b/automation/utils/bin/rui-agent-rules.ts
deleted file mode 100755
index db560e9f35..0000000000
--- a/automation/utils/bin/rui-agent-rules.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-#!/usr/bin/env ts-node-script
-
-import { mkdir, readdir, lstat, symlink, unlink } from "fs/promises";
-import path from "node:path";
-
-async function ensureSymlink(targetRel: string, linkPath: string): Promise<void> {
-    try {
-        const stat = await lstat(linkPath).catch(() => null);
-        if (stat) {
-            await unlink(linkPath);
-        }
-        await symlink(targetRel, linkPath);
-    } catch (err) {
-        console.error(`Failed to create symlink for ${linkPath}:`, err);
-    }
-}
-
-async function main(): Promise<void> {
-    const repoRoot = path.resolve(process.cwd(), "../..");
-    const SRC_DIR = path.join(repoRoot, "docs", "requirements");
-    const CURSOR_DIR = path.join(repoRoot, ".cursor", "rules");
-    const WINDSURF_DIR = path.join(repoRoot, ".windsurf", "rules");
-
-    // Ensure target directories exist
-    await Promise.all([mkdir(CURSOR_DIR, { recursive: true }), mkdir(WINDSURF_DIR, { recursive: true })]);
-
-    const files = (await readdir(SRC_DIR)).filter(f => f.endsWith(".md"));
-
-    await Promise.all(
-        files.map(async file => {
-            const base = path.basename(file, ".md");
-            const srcAbsolute = path.join(SRC_DIR, file);
-
-            const cursorLink = path.join(CURSOR_DIR, `${base}.mdc`);
-            const windsurfLink = path.join(WINDSURF_DIR, `${base}.md`);
-
-            const relFromCursor = path.relative(path.dirname(cursorLink), srcAbsolute);
-            const relFromWindsurf = path.relative(path.dirname(windsurfLink), srcAbsolute);
-
-            await Promise.all([ensureSymlink(relFromCursor, cursorLink), ensureSymlink(relFromWindsurf, windsurfLink)]);
-        })
-    );
-
-    console.log("Agent rules links updated.");
-}
-
-main().catch(err => {
-    console.error(err);
-    process.exit(1);
-});
diff --git a/automation/utils/package.json b/automation/utils/package.json
index 651a47e48f..76b15c56b0 100644
--- a/automation/utils/package.json
+++ b/automation/utils/package.json
@@ -5,7 +5,6 @@
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "private": true,
     "bin": {
-        "rui-agent-rules": "bin/rui-agent-rules.ts",
         "rui-create-gh-release": "bin/rui-create-gh-release.ts",
         "rui-create-translation": "bin/rui-create-translation.ts",
         "rui-generate-package-xml": "bin/rui-generate-package-xml.ts",
@@ -25,7 +24,6 @@
         "tsconfig.json"
     ],
     "scripts": {
-        "agent-rules": "ts-node bin/rui-agent-rules.ts",
         "changelog": "ts-node bin/rui-changelog-helper.ts",
         "compile:parser:module": "peggy -o ./src/changelog-parser/parser/widget/widget.js ./src/changelog-parser/parser/widget/widget.pegjs",
         "compile:parser:widget": "peggy -o ./src/changelog-parser/parser/module/module.js ./src/changelog-parser/parser/module/module.pegjs",
diff --git a/package.json b/package.json
index 5d72d8091f..5ed811b161 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
         "create-gh-release": "turbo run create-gh-release --concurrency 1",
         "create-translation": "turbo run create-translation",
         "include-oss-in-artifact": "pnpm --filter @mendix/automation-utils run include-oss-in-artifact",
-        "postinstall": "turbo run agent-rules",
         "lint": "turbo run lint --continue --concurrency 1",
         "oss-clearance": "pnpm --filter @mendix/automation-utils run oss-clearance",
         "prepare": "husky install",
diff --git a/turbo.json b/turbo.json
index 648f49bc9d..98afa28d8e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -75,11 +75,6 @@
                 "!*/**/__tests__/**"
             ],
             "outputs": []
-        },
-        "agent-rules": {
-            "cache": false,
-            "inputs": ["docs/requirements/**"],
-            "outputs": []
         }
     }
 }

From 1e8dc695826d72766babab382ec308fbb61b9525 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Fri, 13 Feb 2026 12:38:39 +0100
Subject: [PATCH 2/4] feat(agents): introduce PostToolUse hook for Claude Code
 and Copilot, auto-lint script

---
 .claude/hooks/post-edit.sh | 52 ++++++++++++++++++++++++++++++++++++++
 .claude/settings.json      | 15 +++++++++++
 .github/hooks/hooks.json   | 11 ++++++++
 .gitignore                 |  1 +
 4 files changed, 79 insertions(+)
 create mode 100755 .claude/hooks/post-edit.sh
 create mode 100644 .claude/settings.json
 create mode 100644 .github/hooks/hooks.json

diff --git a/.claude/hooks/post-edit.sh b/.claude/hooks/post-edit.sh
new file mode 100755
index 0000000000..f9991b30db
--- /dev/null
+++ b/.claude/hooks/post-edit.sh
@@ -0,0 +1,52 @@
+#!/bin/bash
+# Auto-format and lint after file edits.
+# Works with both Claude Code (PostToolUse) and GitHub Copilot (postToolUse) hooks.
+#
+# Input formats:
+#   Claude Code: {"tool_input": {"file_path": "/path/to/file"}}
+#   Copilot:     {"toolName": "edit", "toolArgs": "{\"path\": \"/path/to/file\"}"}
+#
+# Exit codes:
+#   0 = success (formatting applied silently)
+#   2 = lint errors found (fed back to Claude as feedback; ignored by Copilot)
+
+# Parse file path - handles both Claude Code and Copilot input formats
+FILE_PATH=$(cat | node -e "
+  let d='';
+  process.stdin.on('data',c=>d+=c);
+  process.stdin.on('end',()=>{
+    try {
+      const j=JSON.parse(d);
+      if (j.tool_input?.file_path) { console.log(j.tool_input.file_path); return; }
+      if (j.toolArgs) { const a=JSON.parse(j.toolArgs); if (a.path) console.log(a.path); }
+    } catch {}
+  })
+")
+
+# Skip if no file path or file doesn't exist
+[[ -z "$FILE_PATH" || ! -f "$FILE_PATH" ]] && exit 0
+
+# Auto-format with prettier using the project's installed version
+npx prettier --write "$FILE_PATH" 2>/dev/null
+
+# Find the nearest package directory with eslint config
+SEARCH_DIR=$(dirname "$FILE_PATH")
+PACKAGE_DIR=""
+while [[ "$SEARCH_DIR" != "/" ]]; do
+    if [[ -f "$SEARCH_DIR/eslint.config.mjs" ]]; then
+        PACKAGE_DIR="$SEARCH_DIR"
+        break
+    fi
+    SEARCH_DIR=$(dirname "$SEARCH_DIR")
+done
+
+# Run lint from the package directory using the project's lint setup
+if [[ -n "$PACKAGE_DIR" ]]; then
+    LINT_OUTPUT=$(cd "$PACKAGE_DIR" && npm run lint 2>&1)
+    if [[ $? -ne 0 ]]; then
+        echo "$LINT_OUTPUT" >&2
+        exit 2
+    fi
+fi
+
+exit 0
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000000..645c92480f
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,15 @@
+{
+    "hooks": {
+        "PostToolUse": [
+            {
+                "matcher": "Edit|Write|MultiEdit",
+                "hooks": [
+                    {
+                        "type": "command",
+                        "command": ".claude/hooks/post-edit.sh"
+                    }
+                ]
+            }
+        ]
+    }
+}
diff --git a/.github/hooks/hooks.json b/.github/hooks/hooks.json
new file mode 100644
index 0000000000..d8c4374f37
--- /dev/null
+++ b/.github/hooks/hooks.json
@@ -0,0 +1,11 @@
+{
+    "version": 1,
+    "hooks": {
+        "postToolUse": [
+            {
+                "type": "command",
+                "bash": "bash .claude/hooks/post-edit.sh"
+            }
+        ]
+    }
+}
diff --git a/.gitignore b/.gitignore
index 70104cb4d9..05f92d3d0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ tests
 automation/run-e2e/ctrf/*.json
 .cursor
 .windsurf
+.claude/settings.local.json

From 52f669e5fd2973567213ea6e09b166162f018416 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Fri, 13 Feb 2026 12:40:33 +0100
Subject: [PATCH 3/4] chore(agents): add CLAUDE.md, refine AGENTS.md

---
 AGENTS.md | 111 +++++++++++++-----------------------------------------
 CLAUDE.md |  66 ++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 85 deletions(-)
 create mode 100644 CLAUDE.md

diff --git a/AGENTS.md b/AGENTS.md
index 2b77c77fc7..53fb367c83 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,94 +1,35 @@
-# Mendix Web Widgets Repository - AI Agent Overview
+# Mendix Web Widgets Repository
 
-This document provides a comprehensive overview of the Mendix Web Widgets repository structure and conventions for AI development assistants. This repository contains the official collection of pluggable web widgets for the Mendix low-code platform.
+Monorepo of official Mendix pluggable web widgets. pnpm workspaces + Turbo.
 
-## Repository Overview
+## Structure
 
-The **Mendix Web Widgets** repository is the official home of all Mendix platform-supported pluggable web widgets and related modules. These are reusable UI components built with modern web technologies (React, TypeScript, SCSS) that integrate seamlessly into Mendix Studio Pro applications.
+- `packages/pluggableWidgets/*-web` — Widget packages (React, TypeScript, SCSS)
+- `packages/modules/*` — Mendix module packages
+- `packages/shared/*` — Shared configs and utilities
+- `automation/` — Build and release automation
+- `docs/requirements/` — Detailed technical requirements
 
-### Key Characteristics
-- **Monorepo structure** using pnpm workspaces and Turbo for build orchestration
-- **Modern web stack**: TypeScript, React, SCSS, Jest, ESLint, Prettier
-- **Mendix integration**: Built using Mendix Pluggable Widgets API
-- **Atlas UI alignment**: Consistent with Mendix's design system
-- **Comprehensive testing**: Unit tests (Jest/RTL), E2E tests (Playwright)
+## Commands
 
-## Repository Structure
+| Command | Description |
+|---------|-------------|
+| `pnpm install` | Install dependencies |
+| `pnpm build` | Build all packages |
+| `pnpm lint` | Lint all packages |
+| `pnpm test` | Test all packages |
+| `pnpm --filter @mendix/<name> run <script>` | Run script in one package |
 
-```
-├── packages/
-│   ├── pluggableWidgets/     # Main widget packages (*-web folders)
-│   ├── modules/              # Mendix modules
-│   ├── customWidgets/        # Custom widget implementations  
-│   └── shared/               # Shared configurations and utilities
-├── docs/
-│   └── requirements/         # Detailed technical requirements (see below)
-├── automation/               # Build and release automation
-└── .github/                  # GitHub workflows and Copilot instructions
-```
+## Conventions
 
-## Detailed Requirements Documentation
+- TypeScript + React functional components + SCSS
+- Mendix Pluggable Widgets API (EditableValue, ActionValue, ListValue)
+- Atlas UI design system for styling
+- Conventional commits (commitlint enforced)
+- Semver versioning + CHANGELOG.md per package
 
-The `/docs/requirements/` folder contains comprehensive technical documentation for understanding and contributing to this repository. Each document covers specific aspects of the development process:
+## Agent-Specific Instructions
 
-### Core Requirements and Guidelines
-
-- **[Project Requirements Document](docs/requirements/project-requirements-document.md)** - High-level overview of repository purpose, goals, target users, and design system alignment
-- **[Technology Stack and Project Structure](docs/requirements/tech-stack.md)** - Core technologies, monorepo structure, configuration standards, and development tools
-- **[Frontend Guidelines](docs/requirements/frontend-guidelines.md)** - CSS/SCSS styling guidelines, naming conventions, component best practices, and Atlas UI integration
-
-### Development Workflow and Integration
-
-- **[Application Flow and Widget Lifecycle](docs/requirements/app-flow.md)** - Complete widget development lifecycle from scaffolding to Studio Pro integration
-- **[Backend Structure and Data Flow](docs/requirements/backend-structure.md)** - Widget-to-Mendix runtime integration, data handling, and event management
-- **[Implementation Plan](docs/requirements/implementation-plan.md)** - Step-by-step guide for creating new widgets, including PR templates and testing requirements
-
-### Module Development
-
-- **[Widget to Module Conversion](docs/requirements/widget-to-module.md)** - Guidelines for converting widgets to Mendix modules when appropriate
-
-## Development Commands
-
-Key commands for working with this repository:
-
-- **`pnpm lint`** - Run linting across all packages
-- **`pnpm test`** - Run unit tests across all packages  
-- **`pnpm build`** - Build all packages
-- **`pnpm -w changelog`** - Update changelogs
-- **`pnpm -w version`** - Bump versions across packages
-
-## AI Development Assistant Context
-
-### For Code Reviews and PR Analysis
-See [.github/copilot-instructions.md](.github/copilot-instructions.md) for detailed PR review guidelines, including:
-- Mendix-specific conventions and API usage
-- React best practices and performance considerations
-- Testing requirements (unit, component, E2E)
-- Styling guidelines and Atlas UI integration
-- Version management and changelog requirements
-
-### For Code Development
-When working on this repository, prioritize:
-
-1. **Minimal changes** - Make surgical, precise modifications
-2. **Mendix conventions** - Follow established patterns for XML configuration, TypeScript props, and data handling
-3. **Testing coverage** - Ensure unit tests, component tests, and E2E tests as appropriate
-4. **Atlas UI consistency** - Use Atlas classes and design tokens
-5. **Performance** - Consider React render optimization and Mendix data efficiency
-
-### Common Development Patterns
-
-- **Widget Structure**: Each widget has XML configuration, TypeScript component, SCSS styling, and test files
-- **Data Integration**: Use Mendix API objects (EditableValue, ActionValue, ListValue) correctly
-- **Styling**: Prefer Atlas UI classes over custom styles; use SCSS for widget-specific styling
-- **Testing**: Follow Jest + RTL for unit tests, Playwright for E2E testing
-
-## Getting Started
-
-1. **Prerequisites**: Node.js ≥22, pnpm 10.15.0
-2. **Installation**: `pnpm install`
-3. **Development**: Set `MX_PROJECT_PATH` environment variable to your Mendix project
-4. **Building**: Use `pnpm build` or `pnpm start` for development builds
-5. **Testing**: Use `pnpm test` for unit tests, `pnpm e2e` for E2E tests
-
-For detailed implementation guidance, refer to the specific requirement documents linked above.
\ No newline at end of file
+- **Claude Code** — See `CLAUDE.md` for hooks, commands, and detailed instructions
+- **GitHub Copilot** — See `.github/copilot-instructions.md` for PR review guidelines
+- **Cursor / Windsurf** — See `docs/requirements/` for rule files (YAML frontmatter compatible)
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..6f0143d753
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,66 @@
+# Mendix Web Widgets
+
+Monorepo of official Mendix pluggable web widgets. pnpm workspaces + Turbo.
+
+## Commands
+
+- Install: `pnpm install`
+- Build all: `pnpm build`
+- Build one: `pnpm --filter @mendix/<name> run build`
+- Test one: cd into package dir, run `npm run test` (NOT from repo root)
+- Lint one: cd into package dir, run `npm run lint`
+- Changelog: `pnpm -w changelog`
+
+## Structure
+
+```
+packages/pluggableWidgets/*-web/  -> Widget packages (React + TS + SCSS)
+packages/modules/                 -> Mendix module packages
+packages/shared/                  -> Shared configs, plugins, utilities
+automation/                       -> Build/release automation
+docs/requirements/                -> Detailed technical requirements
+```
+
+## Hooks (auto-applied)
+
+- **Auto-format**: Every file edit is auto-formatted by prettier via PostToolUse hook.
+  Do NOT manually run `prettier --write` — it wastes tokens, the hook handles it.
+- **Auto-lint**: After each edit, eslint runs via `npm run lint` in the file's package.
+  Lint errors are fed back automatically — fix them in the next edit, do NOT run lint commands manually.
+
+## Conventions
+
+- TypeScript strict, React functional components + hooks
+- Mendix Pluggable Widgets API: EditableValue, ActionValue, ListValue, DynamicValue
+- Check ActionValue.canExecute before execute()
+- Use EditableValue.setValue() for two-way binding
+- Render loading/empty states until values are ready
+- SCSS for styling, prefer Atlas UI classes, BEM-like naming with widget prefix
+- Conventional commits enforced: `type(scope): description`
+- Semver + CHANGELOG.md per package for runtime/XML/behavior changes
+- Jest + RTL for unit tests (src/**tests**/\*.spec.ts)
+- Playwright for E2E (e2e/\*.spec.js)
+
+## Development Setup
+
+- Node >=22, pnpm 10.x
+- Set MX_PROJECT_PATH to Mendix project dir for live reload
+- Run `pnpm start` inside widget package for dev build
+
+## Detailed Reference
+
+For deeper context, see:
+
+- @docs/requirements/tech-stack.md — Full technology stack
+- @docs/requirements/frontend-guidelines.md — CSS/SCSS/Atlas UI guidelines
+- @docs/requirements/app-flow.md — Widget lifecycle and Studio Pro integration
+- @docs/requirements/backend-structure.md — Data flow and Mendix runtime
+- @docs/requirements/implementation-plan.md — New widget guide + PR template
+- @docs/requirements/project-requirements-document.md — Goals and scope
+
+## Constraints
+
+- Never modify dist/, generated files, or lockfiles
+- XML property keys: lowerCamelCase, must match TypeScript props exactly
+- Don't override core Atlas UI classes
+- Prefer tree-shakable imports for new dependencies

From ae393defe6fe00747ee7041b394b7c36227145f1 Mon Sep 17 00:00:00 2001
From: Rahman <rahmanunver@gmail.com>
Date: Mon, 16 Feb 2026 14:12:34 +0100
Subject: [PATCH 4/4] chore(agents): npm to pnpm, remove setValue mention, run
 pnpm exec prettier

---
 .claude/hooks/post-edit.sh | 12 ++++++++----
 CLAUDE.md                  |  7 +++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/.claude/hooks/post-edit.sh b/.claude/hooks/post-edit.sh
index f9991b30db..1e106043b5 100755
--- a/.claude/hooks/post-edit.sh
+++ b/.claude/hooks/post-edit.sh
@@ -26,9 +26,6 @@ FILE_PATH=$(cat | node -e "
 # Skip if no file path or file doesn't exist
 [[ -z "$FILE_PATH" || ! -f "$FILE_PATH" ]] && exit 0
 
-# Auto-format with prettier using the project's installed version
-npx prettier --write "$FILE_PATH" 2>/dev/null
-
 # Find the nearest package directory with eslint config
 SEARCH_DIR=$(dirname "$FILE_PATH")
 PACKAGE_DIR=""
@@ -40,9 +37,16 @@ while [[ "$SEARCH_DIR" != "/" ]]; do
     SEARCH_DIR=$(dirname "$SEARCH_DIR")
 done
 
+# Auto-format with prettier from the package directory
+if [[ -n "$PACKAGE_DIR" ]]; then
+    (cd "$PACKAGE_DIR" && pnpm exec prettier --write "$FILE_PATH" 2>/dev/null)
+else
+    pnpm exec prettier --write "$FILE_PATH" 2>/dev/null
+fi
+
 # Run lint from the package directory using the project's lint setup
 if [[ -n "$PACKAGE_DIR" ]]; then
-    LINT_OUTPUT=$(cd "$PACKAGE_DIR" && npm run lint 2>&1)
+    LINT_OUTPUT=$(cd "$PACKAGE_DIR" && pnpm run lint 2>&1)
     if [[ $? -ne 0 ]]; then
         echo "$LINT_OUTPUT" >&2
         exit 2
diff --git a/CLAUDE.md b/CLAUDE.md
index 6f0143d753..75bea1d4d5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,8 +7,8 @@ Monorepo of official Mendix pluggable web widgets. pnpm workspaces + Turbo.
 - Install: `pnpm install`
 - Build all: `pnpm build`
 - Build one: `pnpm --filter @mendix/<name> run build`
-- Test one: cd into package dir, run `npm run test` (NOT from repo root)
-- Lint one: cd into package dir, run `npm run lint`
+- Test one: cd into package dir, run `pnpm run test` (NOT from repo root)
+- Lint one: cd into package dir, run `pnpm run lint`
 - Changelog: `pnpm -w changelog`
 
 ## Structure
@@ -25,7 +25,7 @@ docs/requirements/                -> Detailed technical requirements
 
 - **Auto-format**: Every file edit is auto-formatted by prettier via PostToolUse hook.
   Do NOT manually run `prettier --write` — it wastes tokens, the hook handles it.
-- **Auto-lint**: After each edit, eslint runs via `npm run lint` in the file's package.
+- **Auto-lint**: After each edit, eslint runs via `pnpm run lint` in the file's package.
   Lint errors are fed back automatically — fix them in the next edit, do NOT run lint commands manually.
 
 ## Conventions
@@ -33,7 +33,6 @@ docs/requirements/                -> Detailed technical requirements
 - TypeScript strict, React functional components + hooks
 - Mendix Pluggable Widgets API: EditableValue, ActionValue, ListValue, DynamicValue
 - Check ActionValue.canExecute before execute()
-- Use EditableValue.setValue() for two-way binding
 - Render loading/empty states until values are ready
 - SCSS for styling, prefer Atlas UI classes, BEM-like naming with widget prefix
 - Conventional commits enforced: `type(scope): description`