{
    "format": "skillpro/v1",
    "skill_id": "metabase-metabase-claude-skills-playwright-mcp-metabase-skill-md",
    "name": "playwright-mcp-metabase",
    "version": "1.0.0",
    "description": "Drive Metabase's UI with the Playwright MCP browser tools (mcp__playwright__browser_*). Covers the snapshot/act/check pattern, Mantine component pitfalls (Menu race, Select/MultiSelect, the Escape-closes-modal trap, portal scoping), and Metabase-specific login flows. Use whenever a session needs to interact with the Metabase UI through Playwright MCP.",
    "category": [
        "生活与工具"
    ],
    "trigger_words": [],
    "tags": [
        "browser",
        "mcp"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=metabase-metabase-claude-skills-playwright-mcp-metabase-skill-md",
    "exported_at": "2026-09-20T01:22:22+08:00",
    "system_prompt": "name playwright-mcp-metabase description Drive Metabase's UI with the Playwright MCP browser tools (mcp__playwright__browser_*). Covers the snapshot/act/check pattern, Mantine component pitfalls (Menu race, Select/MultiSelect, the Escape-closes-modal trap, portal scoping), and Metabase-specific login flows. Use whenever a session needs to interact with the Metabase UI through Playwright MCP. Browser Automation with Playwright MCP (Metabase) A Playwright MCP server is configured in .mcp.json . Load the tool schemas first with ToolSearch : select:mcp__playwright__browser_navigate,mcp__playwright__browser_snapshot,mcp__playwright__browser_click,mcp__playwright__browser_fill,mcp__playwright__browser_type,mcp__playwright__browser_press_key,mcp__playwright__browser_hover,mcp__playwright__browser_take_screenshot,mcp__playwright__browser_close If ToolSearch says \"MCP servers still connecting,\" wait a few seconds and retry — the server takes a moment to start on first use. Core pattern: Snapshot → Act → Check browser_snapshot — see what's on screen, get element refs Act — browser_click , browser_fill , browser_type , etc. using refs from the snapshot Check the inline response — every action returns a snapshot in its response. Read it. When to take a separate browser_snapshot after acting: The inline response snapshot looks wrong, empty, or unchanged — take a fresh one (async rendering may not have completed) You need refs for your NEXT action — the inline snapshot's refs are valid, use them directly You're unsure if the action worked — take one more snapshot to confirm When you do NOT need a separate snapshot after acting: The inline response already shows the expected change (e.g., you clicked a link and the response shows the new page) You're about to take a screenshot anyway ( browser_take_screenshot shows the current state) You're doing a chain of actions on the same form (e.g., filling multiple fields) — snapshot once at the end, not after each fill Element refs go stale after every action. Use refs from the most recent snapshot or inline response — never from an earlier one. How to interact with Metabase's UI components Metabase uses Mantine UI components. Most interactions work with a plain browser_click . The hover-before-click pattern is only needed for specific component types. Regular buttons, links, form inputs, checkboxes, tabs: Just browser_click them directly. No hover needed. Buttons that open dropdown menus (e.g., \"+ New\", \"...\" action menus, filter type pickers): These use Mantine's <Menu> component which has a race condition with direct clicks. Hover before clicking these: browser_hover on the button browser_click on the button Check the inline response — if the menu appeared, use its refs directly How to tell if a button opens a dropdown menu: it usually has a chevron/arrow icon, a \"...\" label, or is labeled as creating something new (like \"+ New\"). If unsure, try a direct click first — if it doesn't work, retry with hover. Select and dropdown components (e.g., database picker, column picker): Mantine Select/MultiSelect are NOT native <select> elements. browser_select_option will NOT work. Instead: browser_click on the input/trigger browser_click on the option you want (use refs from the inline response) You can also type into the input to filter options before clicking. Modals and dialogs: To dismiss: browser_click the close/action button, or browser_press_key with Escape . ⚠️ Mantine Escape -inside-modal trap: Pressing Escape while focus is inside a Mantine popover/Select/MultiSelect that is itself nested in a modal closes the entire modal and discards every form field you've already filled. To dismiss just an open dropdown, prefer browser_click outside the dropdown (or click another field). Only press Escape when you actually want the whole modal gone. Mantine portals + scoped snapshots: Mantine renders dropdowns, popovers, and tooltips into a portal at <body> level — they are NOT children of the [role=dialog] element. If you scope browser_snapshot to the modal, dropdown options will be missing. Take a full-page snapshot when interacting with portaled content. Login browser_navigate to http://localhost:$MB_JETTY_PORT/auth/login browser_snapshot → browser_fill email and password → browser_click sign-in button browser_navigate to http://localhost:$MB_JETTY_PORT/ — always navigate explicitly to the home page after login. Do NOT rely on the login redirect alone. The redirect can leave the browser session in a state where clicks don't register. browser_snapshot to confirm you're logged in Quick login via API (alternative) Get a session token via API and set it as a cookie — faster than filling the login form: ./bin/mage -bot-api-call /api/session --method POST --body '{\"username\":\"<email>\",\"password\":\"<password>\"}' Extract the id from the response, then use browser_evaluate with script: document . cookie = 'metabase.SESSION=<token>;path=/' Then browser_navigate to the target page. Use the credentials from ./bin/mage -bot-server-info . When clicks don't work Take a fresh snapshot (async rendering). 2. Try hover + click (menu triggers). 3. Try keyboard (focus + Enter). 4. After 3 attempts, report and move on. Rules Always use http://localhost:$MB_JETTY_PORT Close the browser when done Use inline response snapshots when sufficient — only take separate browser_snapshot when needed Browser is pre-configured: 1440x900 viewport, full snapshot mode, isolated session, 10s action timeout",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用playwright-mcp-metabase帮我处理问题",
            "output": "好的，我是playwright-mcp-metabase。Drive Metabase's UI with the Playwright MCP browser tools (mcp__playwright__browser_*). Covers the snapshot/act/check pattern, Mantine component pitfalls (Menu race, Select/MultiSelect, the Escape-closes-modal trap, portal scoping), and Metabase-specific login flows. Use whenever a session needs to interact with the Metabase UI through Playwright MCP. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是playwright-mcp-metabase，专注于生活与工具领域。Drive Metabase's UI with the Playwright MCP browser tools (mcp__playwright__browser_*). Covers the snapshot/act/check pattern, Mantine component pitfalls (Menu race, Select/MultiSelect, the Escape-closes-modal trap, portal scoping), and Metabase-specific login flows. Use whenever a session needs to interact with the Metabase UI through Playwright MCP."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# playwright-mcp-metabase - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// playwright-mcp-metabase - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: playwright-mcp-metabase\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}