Agent skill · software engineering · marimo-team
anywidget-generator
Generate anywidget components for marimo notebooks.
Why this skill is useful
Provides specific implementation patterns and best practices for creating anywidget components in marimo notebooks that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-06. 164 stars on the source repository.
What this skill does
When writing an anywidget use vanilla javascript in esm and do not forget about css. The css should look bespoke in light mode and dark mode. Keep the css small unless explicitly asked to go the extra mile. When you display the widget it must be wrapped via widget = mo.ui.anywidget(OriginalAnywidget()). You can also point esm and css to external files if needed using pathlib. This makes sense if the widget does a lot of elaborate JavaScript or CSS. <example title="Example of simple anywidget implementation"> import anywidget import traitlets class CounterWidget(anywidget.AnyWidget): esm = """ // Define the main render function function render({ model, el }) { let count = () => model.get("number"); let btn = document.createElement("b8utton"); btn.innerHTML = count is ${count()}; btn.addEventListener("click", () => { model.set("number", count() + 1); model.savechanges(); }); model.on("change:number", () => { btn.innerHTML = count is ${count()}; }); el.appendChild(btn); } // Important! We must export at the bottom here! export default { render }; """ css = """button{ font-size: 14px; }""" number = traitlets.Int(0).tag(sync=True) widget = mo.ui.anywidget(CounterWidget()) widget Grabbing the widget from another cell, .value is a dictionary. print(widget.value["number"]) </example> The above is a minimal example that could work for a simple counter widget. In general the widget can become much larger because of all the JavaScript and CSS required. Unless the widget is dead simple, you should consider using external files for esm and css using pathlib. When sharing the anywidget, keep the example minimal. No need to combine it with marimo ui elements unless explicitly stated to do so. Best Practices Unless specifically told otherwise, assume the following: 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills marimo-team/anywidget