web-widgets: Skill for Claude Code

Code Review

Review the PR diff against the standards in this repository. Read AGENTS.md for full repo context.

Before reviewing anything, run:

gh pr diff --name-only   # build the exact list of changed files — only read these
gh pr checks             # surface any failing CI checks before reading code

Only read files that appear in the diff output.

What to check on every PR

PR metadata

• Title: JIRA format [XX-000]: description or conventional commits (feat:, fix:, etc.)
• Template adherence: lint/test run locally, new tests added, related PRs linked
• Multi-package PRs: validate each changed package separately

CI checks

Review the gh pr checks output before reading any files:

• Lint failing → Medium finding — paste the relevant error lines in the finding
• Unit tests failing → Medium finding — note the package and failing test file
• E2E tests failing → Medium finding — note the test name and failure reason
• All checks passing → add "All CI checks passed ✅" to the summary comment

Changelog (per changed package)

Version bumps happen in a separate dedicated PR — do not require or flag missing semver bumps.

If runtime code, public API, XML schema, or behavior changed:

• Require CHANGELOG.md entry (Keep a Changelog format)
• Suggest: pnpm -w changelog

If refactor/docs/tests-only: changelog entry not required — confirm with author.

Mendix-specific

AGENTS.md covers the core rules (canExecute, loading states, lowerCamelCase XML keys). Flag these additional review issues:

• XML changed but TS props not updated, or widget ID is not unique
• EditableValue read without checking .status — can render stale/undefined data
• ActionValue.execute() called without checking .canExecute first

React

Flag these patterns — general React conventions are assumed known:

• Missing or wrong useEffect/useMemo/useCallback deps; stale closures
• Async effect sets state without a cleanup guard:

  useEffect(() => {
      let active = true;
      (async () => {
          const data = await fetchData();
          if (active) setState(data);
      })();
      return () => {
          active = false;
      };
  }, [fetchData]);
  

• Array index used as list key — requires a stable unique key
• Props spread onto DOM nodes (<div {...props}>) — strips unknown HTML attributes