Skip to main content

Updating a Widget

Use the widget-update skill to modify a widget's settings schema, default values, metadata, layout, or preview image. The skill updates widget-config.json, the TypeScript interfaces, and the preview component together — in one pass — so they stay in sync.

When to use​

Ask Claude to update a widget when you want to:

  • Add, rename, or remove a setting
  • Change a default value for an existing setting
  • Add a conditional field (e.g. show field X when Y is selected)
  • Hide a setting from the end user
  • Update widget metadata — title, description, tags
  • Update the widget preview image or layout

How to invoke​

In your terminal, navigate to your widget's repository and start Claude Code there:

cd path/to/your-widget
claude

At the Claude Code prompt, describe the change in natural language. For example:

add a "max items" numeric setting that defaults to 10
rename the "title" setting to "header text"
update the preview image to ./assets/new-preview.png

These are natural-language requests to Claude — not shell commands. The skill recognizes phrases like add a setting, change default value, rename setting, update preview, add conditional field, hide setting from user, and similar.

What the skill updates​

In a single pass, the skill keeps these files in sync:

  • widget-config.json — the settings schema, defaults, metadata, and layout.
  • TypeScript interfaces — type definitions that mirror the settings schema.
  • The preview component — the visual that shows in the Micro App Library.

After it makes the changes, Claude will summarize what changed and ask for confirmation before saving.

Background​

The settingsSchema in widget-config.json is consumed by @invent/json-settings, Invent's wrapper around react-jsonschema-form (RJSF) v5. The skill knows the available custom widgets (InputWidget, SelectWidget, CheckboxWidget, CodeEditorWidget, ColorWidget, etc.) and applies the correct ui:widget value when you add a setting.