devtools-mcp-seminar/.opencode/skills/ms-teams-tables/SKILL.md

name, description

name	description
ms-teams-tables	Use when inserting, filling, or modifying a table in the MS Teams chat compose box via Chrome DevTools MCP. Covers the hidden overflow button that opens the table picker. Use ONLY when the user asks to create or edit a table in an MS Teams message.

MS Teams tables

How to insert and fill tables in the MS Teams chat compose box via Chrome DevTools MCP. Verified empirically against the live Teams web app.

Teams' chat editor DOES support tables, but the "Insert table" button is NOT on the main toolbar. It is hidden behind an overflow "more options" button.

Step 1 — open the table picker

1. Focus the editor.
2. Open the formatting toolbar (Ctrl+Shift+X or click "Show Formatting options").
3. In the main FluentUI toolbar (.ms-FocusZone.ui-toolbar with ~24 buttons), the overflow button is at index 18 — it has aria-haspopup="dialog" and NO aria-label. Click it via evaluate_script:

   () => {
     const tb = Array.from(document.querySelectorAll('.ms-FocusZone.ui-toolbar'))
       .find(t => t.querySelectorAll('button').length > 10);
     Array.from(tb.querySelectorAll('button'))[18].click();
   }
   

   This opens the "Insert table" dialog.

Alternatively, once the dialog is open, locate any button whose aria-label matches /^Insert \d+ by \d+ table$/.

Step 2 — pick a size

The dialog presents a grid of preset buttons, Insert N by M table where N ∈ [1..7] (columns) and M ∈ [1..5] (rows), plus an "Allow edits" checkbox. Click the desired size:

() => {
  const btn = Array.from(document.querySelectorAll('button'))
    .find(b => b.getAttribute('aria-label') === 'Insert 3 by 3 table');
  btn.click();
}

A real <table> with <td> cells is inserted. Each cell is its own contenteditable nested editable.

Step 3 — fill cells

The first cell is auto-focused after insert. Use type_text to fill it, then Tab to move to the next cell, and repeat:

chrome-devtools_type_text  text: "A1"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "B1"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "A2"
chrome-devtools_press_key  key: "Tab"
chrome-devtools_type_text  text: "B2"

Tab navigates cells left-to-right, top-to-bottom. Shift+Tab reverses. Inline formatting shortcuts (Ctrl+B etc.) work inside cells.

Step 4 — modify an existing table

Once a table exists, the main toolbar reveals two table-specific buttons:

• "Insert column or row" (aria-haspopup="dialog")
• "Delete column, row, or table" (aria-haspopup="dialog")

Use evaluate_script to click these by aria-label. They open their own dialogs with row/column insert/delete options.

Verifying table state

() => {
  const e = document.querySelector('[role="textbox"]');
  const t = e.querySelector('table');
  return t ? {
    rows: t.rows.length,
    cols: t.rows[0].cells.length,
    cells: Array.from(t.querySelectorAll('td')).map(c => c.innerText.trim())
  } : 'no table';
}

Do NOT

• Do not look for "Insert table" on the main formatting toolbar — it is hidden in the overflow button (index 18, no aria-label, haspopup="dialog").
• Do not use the "Actions and apps" menu for tables — that menu only contains "Set delivery options" and "Record video clip".