jpskill.com
🛠️ 開発・MCP コミュニティ

marimo-development

Expert guidance for creating and working with marimo notebooks - reactive Python notebooks that can be executed as scripts and deployed as apps. Use when the user asks to create marimo notebooks, convert Jupyter notebooks to marimo, build interactive dashboards or data apps with marimo, work with marimo's reactive programming model, debug marimo notebooks, or needs help with marimo-specific features (cells, UI elements, reactivity, SQL integration, deploying apps, etc.).

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o marimo-development.zip https://jpskill.com/download/17990.zip && unzip -o marimo-development.zip && rm marimo-development.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17990.zip -OutFile "$d\marimo-development.zip"; Expand-Archive "$d\marimo-development.zip" -DestinationPath $d -Force; ri "$d\marimo-development.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して marimo-development.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → marimo-development フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
85

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Marimo の開発

marimo のインタラクティブなプログラミング環境で、リアクティブな Python ノートブックを作成します。

コアワークフロー

  1. 基本から始める: references/core-concepts.md を読んでください - marimo のセル構造、リアクティビティモデル、UI 要素、および重要な例が含まれています
  2. 一般的なタスクのレシピを使用する: コードスニペットについては references/recipes.md を確認してください
  3. API ドキュメントを参照する: 特定の関数の詳細については references/api/ を参照してください
  4. 問題をトラブルシューティングする: references/faq.md および references/troubleshooting.md を参照してください

Marimo の主要な概念

セル構造

すべての marimo セルは、次の構造に従います。

@app.cell
def _():
    # ここにコードを記述します
    return

セルを編集するときは、関数内のコードのみを変更してください。marimo はパラメータと戻り値を自動的に処理します。

リアクティビティのルール

  1. 自動実行: 変数が変更されると、それを使用するセルは自動的に再実行されます
  2. 再宣言の禁止: 変数はセル間で再宣言できません
  3. DAG 構造: セルは有向非巡回グラフ (循環依存関係なし) を形成します
  4. 最後の式を表示: セル内の最後の式が自動的に表示されます
  5. UI のリアクティビティ: .value を介してアクセスされる UI 要素の値は、自動更新をトリガーします
  6. ローカル変数: _ で始まる変数 (例: _temp) は、セルに対してローカルです

インポートパターン

常に最初のセルで marimo をインポートします。

@app.cell
def _():
    import marimo as mo
    # その他のインポート
    return

一般的なタスク

インタラクティブな UI の作成

# 1つのセルで UI 要素を作成する
@app.cell
def _():
    slider = mo.ui.slider(0, 100, value=50, label="Value")
    slider
    return

# 別のセルでその値を使用する
@app.cell
def _():
    result = slider.value * 2
    mo.md(f"Double the value: {result}")
    return

データの操作

# データをロードして表示する
@app.cell
def _():
    import polars as pl
    df = pl.read_csv("data.csv")
    df  # 自動的にテーブルとして表示されます
    return

# インタラクティブなデータ探索
@app.cell
def _():
    mo.ui.data_explorer(df)
    return

DuckDB を使用した SQL

@app.cell
def _():
    # marimo には DuckDB のサポートが組み込まれています
    result = mo.sql(f"""
        SELECT * FROM df WHERE column > 100
    """)
    return

レイアウト

@app.cell
def _():
    # 水平スタック
    mo.hstack([element1, element2, element3])

    # 垂直スタック
    mo.vstack([top, middle, bottom])

    # タブ
    mo.tabs({"Tab 1": content1, "Tab 2": content2})
    return

可視化のベストプラクティス

  • matplotlib: 最後の式として plt.gca() を使用します (plt.show() ではありません)
  • plotly: 図オブジェクトを直接返します
  • altair: チャートオブジェクトを返します。ツールチップを追加します。polars のデータフレームを直接受け入れます

リファレンスドキュメント

references/NAVIGATION.md を使用して、完全なドキュメント構造を理解してください。主要なリファレンス:

必須の読み物

  • core-concepts.md - 基本と例については、ここから始めてください
  • recipes.md - 一般的なタスクのコードスニペット

詳細なガイド

  • reactivity.md - リアクティブな実行の詳細
  • interactivity.md - インタラクティブな UI の構築
  • best_practices.md - marimo のコーディング標準

データの操作

  • working_with_data/sql.md - SQL と DuckDB の統合
  • working_with_data/dataframes.md - pandas、polars など
  • working_with_data/plotting.md - 可視化ライブラリ

デプロイメント

  • apps.md - インタラクティブな Web アプリとしてデプロイする
  • scripts.md - CLI 引数を使用して Python スクリプトとして実行する

API リファレンス

  • api/inputs/ - すべての UI 要素 (slider、dropdown、button、table など)
  • api/layouts/ - レイアウトコンポーネント (tabs、accordion、sidebar など)
  • api/control_flow.md - セルの実行制御
  • api/state.md - 状態管理
  • api/caching.md - パフォーマンスの最適化

トラブルシューティング

  • faq.md - よくある質問と解決策
  • troubleshooting.md - エラーの修正
  • debugging.md - デバッグ手法

よくある落とし穴

  1. 循環依存関係: サイクルを削除するようにコードを再編成します
  2. UI 値へのアクセス: UI 要素が定義されている同じセル内で .value にアクセスできません
  3. 変数の再宣言: 各変数は、すべてのセルで 1 回だけ定義できます
  4. 可視化が表示されない: 可視化オブジェクトが最後の式であることを確認してください
  5. Global キーワード: global は絶対に使用しないでください - marimo の実行モデルに違反します

ノートブックを作成した後

marimo check --fix を実行して、一般的なフォーマットの問題を自動的にキャッチして修正し、落とし穴を検出します。

クイックリファレンス: 最もよく使用される UI 要素

mo.ui.slider(start, stop, value=None, label=None)
mo.ui.dropdown(options, value=None, label=None)
mo.ui.text(value='', label=None)
mo.ui.button(value=None, kind='primary')
mo.ui.checkbox(label='', value=False)
mo.ui.table(data, sortable=True, filterable=True)
mo.ui.data_explorer(df)  # インタラクティブなデータフレームエクスプローラ
mo.ui.dataframe(df)  # 編集可能なデータフレーム
mo.ui.form(element, label='')  # 要素をフォームでラップする
mo.ui.array(elements)  # UI 要素の配列

完全なリストについては、references/api/inputs/index.md を参照してください。

クイックリファレンス: レイアウト関数

mo.md(text)  # Markdown を表示する
mo.hstack(elements)  # 水平レイアウト
mo.vstack(elements)  # 垂直レイアウト
mo.tabs(dict)  # タブ付きインターフェース
mo.stop(predicate, output=None)  # 条件付き実行
mo.output.append(value)  # 出力に追加する
mo.output.replace(value)  # 出力を置き換える

すべてのレイアウトオプションについては、references/api/layouts/index.md を参照してください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Marimo Development

Create reactive Python notebooks with marimo's interactive programming environment.

Core Workflow

  1. Start with fundamentals: Read references/core-concepts.md - contains marimo's cell structure, reactivity model, UI elements, and essential examples
  2. Use recipes for common tasks: Check references/recipes.md for code snippets
  3. Refer to API docs: Navigate references/api/ for specific function details
  4. Troubleshoot issues: See references/faq.md and references/troubleshooting.md

Key Marimo Concepts

Cell Structure

Every marimo cell follows this structure:

@app.cell
def _():
    # Your code here
    return

When editing cells, only modify the code inside the function - marimo handles parameters and returns automatically.

Reactivity Rules

  1. Automatic execution: When a variable changes, cells using it automatically re-run
  2. No redeclaration: Variables cannot be redeclared across cells
  3. DAG structure: Cells form a directed acyclic graph (no circular dependencies)
  4. Last expression displays: The final expression in a cell is automatically shown
  5. UI reactivity: UI element values accessed via .value trigger automatic updates
  6. Local variables: Variables prefixed with _ (e.g., _temp) are local to the cell

Import Pattern

Always import marimo in the first cell:

@app.cell
def _():
    import marimo as mo
    # other imports
    return

Common Tasks

Creating Interactive UIs

# Create UI element in one cell
@app.cell
def _():
    slider = mo.ui.slider(0, 100, value=50, label="Value")
    slider
    return

# Use its value in another cell
@app.cell
def _():
    result = slider.value * 2
    mo.md(f"Double the value: {result}")
    return

Working with Data

# Load and display data
@app.cell
def _():
    import polars as pl
    df = pl.read_csv("data.csv")
    df  # Automatically displays as table
    return

# Interactive data exploration
@app.cell
def _():
    mo.ui.data_explorer(df)
    return

SQL with DuckDB

@app.cell
def _():
    # marimo has built-in DuckDB support
    result = mo.sql(f"""
        SELECT * FROM df WHERE column > 100
    """)
    return

Layouts

@app.cell
def _():
    # Horizontal stack
    mo.hstack([element1, element2, element3])

    # Vertical stack
    mo.vstack([top, middle, bottom])

    # Tabs
    mo.tabs({"Tab 1": content1, "Tab 2": content2})
    return

Visualization Best Practices

  • matplotlib: Use plt.gca() as last expression (not plt.show())
  • plotly: Return the figure object directly
  • altair: Return the chart object; add tooltips; accepts polars dataframes directly

Reference Documentation

Use references/NAVIGATION.md to understand the complete documentation structure. Key references:

Essential Reading

  • core-concepts.md - Start here for fundamentals and examples
  • recipes.md - Code snippets for common tasks

Detailed Guides

  • reactivity.md - Deep dive into reactive execution
  • interactivity.md - Building interactive UIs
  • best_practices.md - Coding standards for marimo

Working with Data

  • working_with_data/sql.md - SQL and DuckDB integration
  • working_with_data/dataframes.md - pandas, polars, etc.
  • working_with_data/plotting.md - Visualization libraries

Deployment

  • apps.md - Deploy as interactive web apps
  • scripts.md - Run as Python scripts with CLI args

API Reference

  • api/inputs/ - All UI elements (slider, dropdown, button, table, etc.)
  • api/layouts/ - Layout components (tabs, accordion, sidebar, etc.)
  • api/control_flow.md - Cell execution control
  • api/state.md - State management
  • api/caching.md - Performance optimization

Troubleshooting

  • faq.md - Common questions and solutions
  • troubleshooting.md - Error fixes
  • debugging.md - Debugging techniques

Common Pitfalls

  1. Circular dependencies: Reorganize code to remove cycles
  2. UI value access: Can't access .value in the same cell where UI element is defined
  3. Variable redeclaration: Each variable can only be defined once across all cells
  4. Visualization not showing: Ensure visualization object is the last expression
  5. Global keyword: Never use global - violates marimo's execution model

After Creating a Notebook

Run marimo check --fix to automatically catch and fix common formatting issues and detect pitfalls.

Quick Reference: Most Used UI Elements

mo.ui.slider(start, stop, value=None, label=None)
mo.ui.dropdown(options, value=None, label=None)
mo.ui.text(value='', label=None)
mo.ui.button(value=None, kind='primary')
mo.ui.checkbox(label='', value=False)
mo.ui.table(data, sortable=True, filterable=True)
mo.ui.data_explorer(df)  # Interactive dataframe explorer
mo.ui.dataframe(df)  # Editable dataframe
mo.ui.form(element, label='')  # Wrap elements in a form
mo.ui.array(elements)  # Array of UI elements

See references/api/inputs/index.md for the complete list.

Quick Reference: Layout Functions

mo.md(text)  # Display markdown
mo.hstack(elements)  # Horizontal layout
mo.vstack(elements)  # Vertical layout
mo.tabs(dict)  # Tabbed interface
mo.stop(predicate, output=None)  # Conditional execution
mo.output.append(value)  # Append to output
mo.output.replace(value)  # Replace output

See references/api/layouts/index.md for all layout options.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。