docs: polished READMEs with IDE icons, tool tables, registry links, and screenshot placeholders

Author: ARHAEEM

README.md

@@ -1,66 +1,137 @@
+<div align="center">
+
+<img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/airtable.svg" alt="Airtable" width="80" />
+
 # Airtable Formula
 
-<p align="center">
-  <a href="https://marketplace.visualstudio.com/items?itemName=Nskha.airtable-formula"><img src="https://img.shields.io/visual-studio-marketplace/v/Nskha.airtable-formula" alt="VS Code Marketplace" /></a>
-  <a href="https://www.npmjs.com/package/airtable-user-mcp"><img src="https://img.shields.io/npm/v/airtable-user-mcp" alt="npm version" /></a>
-  <a href="https://github.com/Automations-Project/VSCode-Airtable-Formula/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT License" /></a>
-</p>
+**Formula editor, MCP server, and AI skills for VS Code**
 
-Airtable formula editor, MCP server installer, and AI skills for VS Code.
+[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/Nskha.airtable-formula?style=flat-square&label=Marketplace&color=007ACC)](https://marketplace.visualstudio.com/items?itemName=Nskha.airtable-formula)
+[![npm](https://img.shields.io/npm/v/airtable-user-mcp?style=flat-square&label=npm&color=CB3837)](https://www.npmjs.com/package/airtable-user-mcp)
+[![MIT License](https://img.shields.io/badge/license-MIT-green?style=flat-square)](LICENSE)
+
+<br />
 
 > **Not affiliated with Airtable Inc.** This is a community-maintained project.
 
+</div>
+
+---
+
+## What's In This Repo
+
+This monorepo ships **two products** from one source tree:
+
+<div align="center">
+
+| | Product | Install |
+|:-:|:--------|:--------|
+| <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/extension/images/icon.png" width="24" /> | **Airtable Formula** — VS Code extension | [Marketplace](https://marketplace.visualstudio.com/items?itemName=Nskha.airtable-formula) |
+| <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/mcp-server/assets/icon.png" width="24" /> | **airtable-user-mcp** — Standalone MCP server | `npx airtable-user-mcp` |
+
+</div>
+
+---
+
 ## Features
 
-- **Formula Editor** — Syntax highlighting, IntelliSense, beautify/minify for `.formula` files
-- **MCP Server** — One-click multi-IDE MCP configuration (Cursor, Windsurf, Claude Code, Cline, Amp)
-- **AI Files** — Install Airtable-specific skills, rules, workflows, and agents for AI coding assistants
-- **Airtable Login** — Credentials in OS keychain, headless session with auto-refresh
+### VS Code Extension
+
+- **Formula Editor** — Syntax highlighting, IntelliSense, beautify / minify for `.formula` files
+- **MCP Server** — One-click MCP registration for multiple IDEs
+- **AI Skills** — Auto-install Airtable-specific skills, rules, and workflows for AI coding assistants
+- **Airtable Login** — Credentials in OS keychain, browser-based auth with auto-refresh
 - **Dashboard** — React webview with Overview, Setup, and Settings tabs
 
-## Standalone MCP Server
+<!-- TODO: Replace with actual screenshot -->
+<!-- <p align="center"><img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/extension/images/screenshot-dashboard.png" alt="Dashboard Screenshot" width="700" /></p> -->
+
+### MCP Server (30 Tools)
+
+Manage Airtable bases with capabilities **not available through the official REST API**:
+
+| Category | Tools | Highlights |
+|:---------|:-----:|:-----------|
+| **Schema Read** | 5 | Full schema inspection — bases, tables, fields, views |
+| **Field Management** | 8 | Create formula / rollup / lookup / count fields, validate formulas |
+| **View Configuration** | 11 | Filters, sorts, grouping, column visibility, row height |
+| **Field Metadata** | 1 | Set or update field descriptions |
+| **Extension Management** | 5 | Create, install, enable/disable, rename, remove extensions |
 
-The MCP server is also available as a standalone npm package for use outside VS Code:
+See the full tool reference in [`packages/mcp-server/README.md`](packages/mcp-server/README.md).
+
+---
+
+## Supported IDEs
+
+The extension auto-configures MCP for all major AI-enabled editors:
+
+<div align="center">
+
+| <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/claude.svg" width="28" /> | <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/claude-code.svg" width="28" /> | <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/cursor.svg" width="28" /> | <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/windsurf.svg" width="28" /> | <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/cline.svg" width="28" /> | <img src="https://raw.githubusercontent.com/Automations-Project/VSCode-Airtable-Formula/main/packages/webview/src/assets/icons/amp.svg" width="28" /> |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| Claude Desktop | Claude Code | Cursor | Windsurf | Cline | Amp |
+
+</div>
+
+**Don't use VS Code?** Use the standalone MCP server directly:
 
 ```bash
 npx airtable-user-mcp
 ```
 
-See [`packages/mcp-server/README.md`](packages/mcp-server/README.md) for full documentation, tool list, and configuration examples.
+---
+
+## Find Us
+
+<div align="center">
+
+| Registry | Link |
+|:---------|:-----|
+| **VS Code Marketplace** | [`Nskha.airtable-formula`](https://marketplace.visualstudio.com/items?itemName=Nskha.airtable-formula) |
+| **npm** | [`airtable-user-mcp`](https://www.npmjs.com/package/airtable-user-mcp) |
+| **Open VSX** | [`Nskha.airtable-formula`](https://open-vsx.org/extension/Nskha/airtable-formula) |
+| **MCP Registry** | [`io.github.automations-project/airtable-user-mcp`](https://registry.modelcontextprotocol.io) |
+| **Smithery** | [smithery.ai](https://smithery.ai) |
+| **Glama** | [glama.ai/mcp/servers](https://glama.ai/mcp/servers) |
+| **PulseMCP** | [pulsemcp.com](https://www.pulsemcp.com) |
+| **MCP.so** | [mcp.so](https://mcp.so) |
+
+</div>
+
+---
 
 ## Requirements
 
 - **VS Code** ^1.100.0 (or any fork exposing the `McpServerDefinitionProvider` API)
-- **Node.js** is bundled via the VS Code runtime — no separate install required
-- **Google Chrome** (or Microsoft Edge / Chromium) installed on the machine — the
-  Airtable login flow uses [Patchright](https://github.com/Kaliiiiiiiiii/patchright-nodejs)
-  in headless mode and launches a real system browser with `channel: 'chrome'`
-  (falls back to `msedge` on Windows and `chromium` on Linux if Chrome is
-  absent). The extension runs a preflight check at activation time and shows
-  an actionable warning in the dashboard if no supported browser is detected.
-  Playwright's bundled Chromium is intentionally **not** shipped in the VSIX
-  to keep the install small.
+- **Node.js** — bundled via the VS Code runtime; no separate install needed
+- **Google Chrome** (or Edge / Chromium) — the Airtable login flow uses [Patchright](https://github.com/Kaliiiiiiiiii/patchright-nodejs) in headless mode. Falls back to `msedge` on Windows and `chromium` on Linux. The extension shows an actionable warning if no supported browser is detected.
+
+---
 
 ## Development
 
-This is a pnpm monorepo.
+This is a **pnpm monorepo**.
 
-**Packages:**
-- `packages/extension` — VS Code extension host (TypeScript + tsup)
-- `packages/webview` — React dashboard webview (Vite + Tailwind v4)
-- `packages/shared` — Shared types and message protocol
-- `packages/mcp-server` — Airtable MCP server ([`airtable-user-mcp`](https://www.npmjs.com/package/airtable-user-mcp), ESM Node app with Patchright browser auth)
+| Package | Description |
+|:--------|:------------|
+| `packages/extension` | VS Code extension host (TypeScript + tsup) |
+| `packages/webview` | React dashboard webview (Vite + Tailwind v4) |
+| `packages/shared` | Shared types and message protocol |
+| `packages/mcp-server` | [`airtable-user-mcp`](https://www.npmjs.com/package/airtable-user-mcp) — ESM Node MCP server |
+| `scripts/` | Build tooling (esbuild bundler, dep vendoring) |
 
-**Commands:**
 ```bash
 pnpm install          # install all packages
-pnpm build            # build shared → webview → mcp copy → extension
+pnpm build            # build shared → webview → mcp bundle → extension
 pnpm package          # build + create airtable-formula-X.Y.Z.vsix
 pnpm test             # run all unit tests
 pnpm dev              # start webview dev server (browser preview)
 ```
 
-**MCP server:** The `airtable-user-mcp` workspace package (at `packages/mcp-server/`) is resolved via `workspace:*` and bundled into `packages/extension/dist/mcp/` by `scripts/bundle-mcp.mjs` during the build step. Native browser-automation deps (`patchright`, `patchright-core`, `otpauth`) are vendored into `dist/node_modules/` by `scripts/prepare-package-deps.mjs` before `vsce package` runs.
+**How the MCP server is bundled:** `scripts/bundle-mcp.mjs` esbuilds `packages/mcp-server/src/` into `packages/extension/dist/mcp/`. Then `scripts/prepare-package-deps.mjs` vendors `patchright`, `patchright-core`, and `otpauth` into `dist/node_modules/` before `vsce package` runs. The VSIX is fully self-contained.
+
+---
 
 ## License