Agent skill

Flutter MCP Toolkit Maintain Web

by Arenukvern in Arenukvern/mcp_flutter

Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP).

MITAuto-check passedMobile

Install Flutter MCP Toolkit Maintain Web

skills CLI
$ npx skills add Arenukvern/mcp_flutter --skill flutter-mcp-toolkit-maintain-web -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Arenukvern/mcp_flutter flutter-mcp-toolkit-maintain-web --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Arenukvern/mcp_flutter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugin/skills/flutter-mcp-toolkit-maintain-web .claude/skills/flutter-mcp-toolkit-maintain-web && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flutter-mcp-toolkit-maintain-web
GitHub stars
387
Token cost
~1.6k tokens
SKILL.md length
422 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP).

  • Works in 6 steps: App must serve (e.g. make web-showcase… → list_pages — chrome-devtools may start… → navigate_page → http://localhost:8080/… → …
  • Editing web/index.html
  • SKILL.md covers WebMCP vs VM MCP, Launch (repeatable WebMCP), Agent WebMCP (Chrome DevTools… and Codegen & hooks, plus 3 more sections
  • Calls dart and make

What it does

Flutter MCP Toolkit Maintain Web is an agent skill from Arenukvern/mcp_flutter. Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP). Use when editing web/index.html, agentmanifest.json, intentcallwebmcp.generated.js, web platform sync, Chrome dogfood, WebMCP modelContext, or agent WebMCP list/execute.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps, Browser testing and MCP servers. It works with Model Context Protocol, Flutter, Chrome DevTools and Visual Studio Code. The repository describes itself as: MCP Toolkit for Flutter AI Agent Driven Development (MCP/CLI + custom client side tools) - via closed feedback loop (visual & semantic snapshot) and high client side… The licence is MIT.

When your agent uses it

  • Editing web/index.html
  • Agentmanifest.json
  • Intentcallwebmcp.generated.js
  • Web platform sync

Example prompts

  • “Use the flutter-mcp-toolkit-maintain-web skill to maintain showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP…”
  • “/flutter-mcp-toolkit-maintain-web”

Requirements

  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. App must serve (e.g. make web-showcase or VS Code Chrome + WebMCP on :8080).
  2. list_pages — chrome-devtools may start its own browser (about:blank).
  3. navigate_page → http://localhost:8080/ (or your app URL).
  4. Wait for Flutter/Dart bootstrap (first list_webmcp_tools can be empty).
  5. list_webmcp_tools — expect IntentCall tools + often mcp_* toolkit tools registered on modelContext.
  6. execute_webmcp_tool with toolName + JSON-string input when required.

What it can do on your machine

Read from SKILL.md and the folder at commit 62f3ee1. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • dart
    • make

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flutter MCP Toolkit Maintain Web loads about 1.6k tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 422 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~90
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Arenukvern/mcp_flutter at commit 62f3ee1, republished under its MIT licence (© Arenukvern). 422 words, ~1,629 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-mcp-toolkit-maintain-web/SKILL.md (or your agent's skills folder).
name
flutter-mcp-toolkit-maintain-web
description
Maintains showcase/flutter_test_app and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP). Use when editing web/index.html, agent_manifest.json, intentcall_webmcp.generated.js, web platform sync, Chrome dogfood, WebMCP modelContext, or agent WebMCP list/execute.
<!-- @FMT_MODE_PRELUDE -->

Maintain Web (Chrome + WebMCP)

Dogfood app: showcase/flutter_test_app. Canonical platform doc: showcase/flutter_test_app/INTENTCALL_PLATFORM.md.

WebMCP vs VM MCP

PathProves
VM extensions + fmt_* toolsMCP toolkit dogfood (always)
navigator.modelContext / document.modelContextTrue WebMCP (Chrome flags / --web-browser-flag)

ADR: decisions/0008_web_agent_invoke_js_only.mdx — JS fetch('/agent/invoke') 404 by design; Dart invokeDirect works when modelContext exists.

Launch (repeatable WebMCP)

bash
make web-showcase
# WS_URI from .showcase/web_app.log (re-grep after hot reload)
grep -Eo 'ws://127\.0\.0\.1:[0-9]+/[A-Za-z0-9_=-]+/ws' .showcase/web_app.log | tail -1
bash
dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart webmcp chrome-args
dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart webmcp verify --web-port 8080

Stop: make showcase-stop.

Do not rely on chrome://flags alone across machines — use CLI flags / make web-showcase / VS Code launch args.

VS Code / Cursor launch

Use config showcase/flutter_test_app Chrome + WebMCP in .vscode/launch.json:

  • --web-browser-flag=--user-data-dir=${workspaceFolder}/.showcase/chrome-webmcp-profile — persistent profile so chrome://flags survive stop/start (Flutter default is a temp profile every run).
  • --web-browser-flag=--enable-features=WebMCPTesting,WebModelContext,DevToolsWebMCPSupport
  • --web-browser-flag=--enable-experimental-web-platform-features

Path must not include literal quotes in the value (avoids a dir named "./…").

Chrome 149+ Application → WebMCP pane also needs #devtools-webmcp-support / feature DevToolsWebMCPSupport (API alone is not enough for that UI).

Agent WebMCP (Chrome DevTools MCP) — preferred for live invoke

Prefer chrome-devtools MCP (list_webmcp_tools, execute_webmcp_tool) over flutter_mcp_toolkit webmcp verify --tool-name when an agent should drive page tools.

Install (once)

Grok (~/.grok/config.toml):

toml
[mcp_servers.chrome-devtools]
command = "npx"
args = [
  "-y",
  "chrome-devtools-mcp@latest",
  "--categoryExperimentalWebmcp",
  "--chromeArg=--enable-features=WebMCP,WebModelContext,DevToolsWebMCPSupport,WebMCPTesting",
  "--chromeArg=--enable-experimental-web-platform-features",
  "--userDataDir=/Users/YOU/.cache/chrome-devtools-mcp/chrome-profile-webmcp",
  "--no-usage-statistics",
]
enabled = true
startup_timeout_sec = 90

Or: grok mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp ...

Cursor — same command/args under mcpServers.chrome-devtools in ~/.cursor/mcp.json.

Restart the agent session after install. Doctor: grok mcp doctor chrome-devtools.

Live flow
  1. App must serve (e.g. make web-showcase or VS Code Chrome + WebMCP on :8080).
  2. list_pages — chrome-devtools may start its own browser (about:blank).
  3. navigate_page → http://localhost:8080/ (or your app URL).
  4. Wait for Flutter/Dart bootstrap (first list_webmcp_tools can be empty).
  5. list_webmcp_tools — expect IntentCall tools + often mcp_* toolkit tools registered on modelContext.
  6. execute_webmcp_tool with toolName + JSON-string input when required.

Example IntentCall tools: app_enable_switch (no args), app_set_greeting ({"text":"…"}), app_intentcall_bridge_ping ({"echo":"…"}), app_get_agent_showcase_state.

text
execute_webmcp_tool
  toolName: app_enable_switch
  input: {}
Show full SKILL.md (165 more words)Show less
Fallback (CLI, no chrome-devtools MCP)
bash
dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart webmcp verify --web-port 8080 \
  --tool-name app_enable_switch --tool-args '{}'

Codegen & hooks

bash
dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart codegen sync \
  --platform web,android,ios,macos,linux,windows \
  --project-dir showcase/flutter_test_app

dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart init intentcall-platform \
  --project-dir showcase/flutter_test_app --check
ArtifactSource
web/intentcall_webmcp.generated.jscodegen sync from web/agent_manifest.json
web/index.htmlinit intentcall-platform script tag
Dart bootstrapprojection the app registers — showcase: ShowcaseWebMcpProjection (in intentcall_showcase_bootstrap.dart), wrapping projectEntriesToWebMcp from intentcall_platform_sync; wired via MCPToolkitBinding.addEntryListener (ADR-0016)

Runtime validate

bash
dart run mcp_server_dart/bin/flutter_mcp_toolkit.dart --save-images \
  --output-dir .showcase/web_iter validate-runtime \
  --target "$WS_URI" \
  --flutter-device chrome \
  --timeout-ms 45000

Pass --web-browser-debugging-port <cdp> if CDP discovery fails.

Known issues

  1. Duplicate tool name — generated JS + the WebMCP projection (projectEntriesToWebMcp) both call registerTool; dedupe or gate one path (agent_web_mcp_bootstrap_web.dart name cache).
  2. CDP probe — webmcp verify may report webmcp_active_log_evidence while CDP hasModelContext is false (Flutter execution context).
  3. Stale WS_URI — always grep fresh token after hot restart before eval/validate.
  4. Empty WebMCP list right after navigate — wait until Dart hook / registration finishes, then list again.
  5. Temp Chrome profile — without --user-data-dir, Flutter wipes chrome://flags every stop/start.
  6. Two browsers — chrome-devtools MCP profile ≠ Flutter-launched Chrome unless you attach with --browser-url=http://127.0.0.1:<cdpPort>.
  • docs/superpowers/evals/2026-05-26-webmcp-verification.md
  • flutter-mcp-cli-runtime-validation — validate-runtime details
  • flutter-mcp-toolkit-dogfood-iterations — scored iterations
  • flutter-mcp-e2e-harness — programmatic scenarios over this showcase (packages/harness, --web --detach variant)
  • Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp (WebMCP tools need --categoryExperimentalWebmcp + Chrome 149+)

© Arenukvern, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugin/skills/flutter-mcp-toolkit-maintain-web of Arenukvern/mcp_flutter.

Open the folder on GitHubat commit 62f3ee1

Compare with similar skills

Flutter MCP Toolkit Maintain Web next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter MCP Toolkit Maintain Web compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter MCP Toolkit Maintain Web this skillArenukvern/mcp_flutter387—~1.6kAutomated safety check: PassMIT
Release Sample SweepAtmosphere/atmosphere3.8k—~4.2kAutomated safety check: PassApache-2.0
External AgentsBuilderIO/agent-native7.1k—~7.2kAutomated safety check: NotesNone
Create ProjectVeryGoodOpenSource/vgv-ai-flutter-plugin170—~1.2kAutomated safety check: PassMIT
MCP Debuggerdebugmcp/mcp-debugger173—~4.1kAutomated safety check: PassMIT
Retrieving Developer Knowledgegoogle/skills21k—~2kAutomated safety check: PassApache-2.0

Similar skills

  • Release Sample Sweep

    Atmosphere/atmosphere

    Run the pre-release end-to-end sweep of every user-facing surface — the 33 samples under samples/ (booted from their packaged artifacts and driven in a real browser via chrome-devtools MCP), the…

    3.8k GitHub stars~4.2k tokensUpdated yesterday
    MobileAuto-check passed
  • External Agents

    BuilderIO/agent-native

    Connect external agents and MCP hosts (Claude, Claude Desktop, Claude Code, ChatGPT custom MCP apps, Codex, Cursor, Claude Cowork, VS Code GitHub Copilot, Goose, Postman, MCPJam) to an agent-native…

    7.1k GitHub stars~7.2k tokensUpdated today
    MobileAuto-check: notes
  • Create Project

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Scaffold a new Dart or Flutter project from a Very Good CLI template, covering the flutterapp, dartpackage, flutterpackage, flutterplugin, dartcli, flamegame, and docssite templates, inferring the…

    170 GitHub stars~1.2k tokensUpdated 4 days ago
    MobileAuto-check passed
  • MCP Debugger

    debugmcp/mcp-debugger

    A skill your agent uses when investigating a bug, failing test, or unexpected runtime behavior and the mcp-debugger MCP server is available — drives real step-through debuggers (breakpoints, stack…

    173 GitHub stars~4.1k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Official

    Searches, retrieves, and synthesizes official Google developer documentation across Google Cloud, AI/Gemini, Android, Chrome, Web, Flutter, Go, Firebase, and other Google developer platforms.

    21k GitHub stars~2k tokensUpdated yesterday
    Backend & APIsAuto-check passed
  • Specialist Integration Test Generator

    HoangNguyen0403/agent-skills-standard

    Generates one integration/E2E test from an approved test case spec using existing project patterns.

    572 GitHub stars~548 tokensUpdated yesterday
    Testing & QAAuto-check passed

More from Arenukvern/mcp_flutter

All 23 skills in this repo
  • Harness Engineering Lifecycle

    Arenukvern/mcp_flutter

    Design, implement, and integrate generalized validation harnesses across a producer-consumer boundary after a local harness contract exists.

    387 GitHub stars~1.6k tokensUpdated 7 days ago
    Auto-check passed
  • Mixture Of Experts

    Arenukvern/mcp_flutter

    Run a Mixture of Experts (MoE) audit on any topic, plan, codebase, evidence archive, or process.

    387 GitHub stars~2.3k tokensUpdated 7 days ago
    Auto-check passed
  • Multi Agent Handoff

    Arenukvern/mcp_flutter

    Plan and document handoffs, parent lane contracts, and parallel batch contracts between specialized AI agents (foreman, workers, reviewers).

    387 GitHub stars~2.7k tokensUpdated 7 days ago
    Auto-check passed
  • Plugin Marketplace Setup

    Arenukvern/mcp_flutter

    Designs public or private Agent Skill and plugin marketplaces for Cursor, Claude Code, Codex, Zed, Open Plugin, and npx skills—manifest layout, install matrix, and Skill Steward vs product boundaries.

    387 GitHub stars~2.9k tokensUpdated 7 days ago
    Auto-check passed
  • Release Changelog Harness

    Arenukvern/mcp_flutter

    Chooses ecosystem-native release and changelog tooling (Changesets, Melos, release-plz) plus binary distribution (GitHub Release tarballs, install.sh) when the product is an executable.

    387 GitHub stars~2.6k tokensUpdated 7 days ago
    Auto-check passed
  • Repository Governance Lifecycle

    Arenukvern/mcp_flutter

    Master orchestration for repository governance, North Star impact, sub-Star boundaries, and repair-first or evidence-first drift checks.

    387 GitHub stars~1.5k tokensUpdated 7 days ago
    Auto-check passed

Categories

Questions about Flutter MCP Toolkit Maintain Web

What does Flutter MCP Toolkit Maintain Web do?

Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP). Flutter MCP Toolkit Maintain Web is an agent skill from Arenukvern/mcp_flutter. Maintains showcase/fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify, Chrome DevTools MCP).

When should I use Flutter MCP Toolkit Maintain Web?

Flutter MCP Toolkit Maintain Web fits situations like: editing web/index.html; agentmanifest.json; intentcallwebmcp.generated.js; web platform sync.

How do I install Flutter MCP Toolkit Maintain Web in Claude Code?

Run `npx skills add Arenukvern/mcp_flutter --skill flutter-mcp-toolkit-maintain-web -a claude-code`. Or copy the skill folder (plugin/skills/flutter-mcp-toolkit-maintain-web in Arenukvern/mcp_flutter) into .claude/skills/flutter-mcp-toolkit-maintain-web in your project. Claude Code loads it when a task matches its description.

How do I install Flutter MCP Toolkit Maintain Web in Codex?

Run `npx skills add Arenukvern/mcp_flutter --skill flutter-mcp-toolkit-maintain-web -a codex`. Or copy the skill folder (plugin/skills/flutter-mcp-toolkit-maintain-web in Arenukvern/mcp_flutter) into .agents/skills/flutter-mcp-toolkit-maintain-web in your project. Codex loads it when a task matches its description.

Can I use Flutter MCP Toolkit Maintain Web in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Arenukvern/mcp_flutter --skill flutter-mcp-toolkit-maintain-web -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-mcp-toolkit-maintain-web, .gemini/skills/flutter-mcp-toolkit-maintain-web, .github/skills/flutter-mcp-toolkit-maintain-web and .opencode/skills/flutter-mcp-toolkit-maintain-web in your project.

What does Flutter MCP Toolkit Maintain Web need to run?

Going by SKILL.md and its folder, Flutter MCP Toolkit Maintain Web needs the command-line tools its instructions call (dart and make). Our summary lists: Node.js.

Does Flutter MCP Toolkit Maintain Web access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Flutter MCP Toolkit Maintain Web safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter MCP Toolkit Maintain Web use?

Flutter MCP Toolkit Maintain Web is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter MCP Toolkit Maintain Web use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter MCP Toolkit Maintain Web?

Skills that share tags, products or a category with Flutter MCP Toolkit Maintain Web: Release Sample Sweep (Atmosphere/atmosphere, 3.8k stars), External Agents (BuilderIO/agent-native, 7.1k stars), Create Project (VeryGoodOpenSource/vgv-ai-flutter-plugin, 170 stars) and MCP Debugger (debugmcp/mcp-debugger, 173 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter MCP Toolkit Maintain Web?

Arenukvern (a GitHub user) maintains it in Arenukvern/mcp_flutter, which has 387 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 3, 2026.

Source: Arenukvern/mcp_flutter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.