From marimo
Generates anywidget UI components for marimo notebooks using vanilla JavaScript in _esm, minimal CSS for light/dark modes, and traitlets for reactivity.
npx claudepluginhub joshuarweaver/cascade-data-analytics --plugin marimo-team-skills-4This skill uses the workspace's default tool permissions.
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...
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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.
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.save_changes();
});
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
.value is a dictionary.print(widget.value["number"])
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.
Unless specifically told otherwise, assume the following:
Use vanilla JavaScript in _esm:
render function that takes { model, el } as parametersmodel.get() to read trait valuesmodel.set() and model.save_changes() to update traitsmodel.on("change:traitname", callback)export default { render }; at the bottomanywidget.AnyWidget, so widget.observe(handler)
remains the standard way to react to state changes.ValueError/TraitError guide you instead of duplicating the logic.Include _css styling:
@media (prefers-color-scheme: dark) { ... }Wrap the widget for display:
widget = mo.ui.anywidget(OriginalAnywidget())widget.value which returns a dictionaryKeep examples minimal:
External file paths: When using pathlib for external _esm/_css files, keep paths relative to the project directory, consider using Path(__file__) for this. Do not read files outside the project (e.g., ~/.ssh, ~/.env, /etc/) or embed their contents in widget output.
Dumber is better. Prefer obvious, direct code over clever abstractions—someone new to the project should be able to read the code top-to-bottom and grok it without needing to look up framework magic or trace through indirection.