# MCP UX/UI Setup (Gravity / Codex)

This project has the following MCP servers configured globally in Codex:

- `chrome-devtools`
- `playwright`
- `ux-a11y`
- `figma` (streamable HTTP + OAuth)

## 1) Verify current MCP config

```powershell
codex mcp list
```

Expected servers:

- `chrome-devtools` -> `npx chrome-devtools-mcp@latest --no-usage-statistics`
- `playwright` -> `npx @playwright/mcp@latest --headless`
- `ux-a11y` -> `npx mcp-accessibility-scanner@latest --headless`
- `figma` -> `https://mcp.figma.com/mcp`

## 2) Reinstall commands (if needed)

```powershell
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --no-usage-statistics
codex mcp add playwright -- npx @playwright/mcp@latest --headless
codex mcp add ux-a11y -- npx mcp-accessibility-scanner@latest --headless
codex mcp add figma --url https://mcp.figma.com/mcp
```

## 3) Browser runtime for Playwright

Install Chromium once:

```powershell
npx playwright install chromium
```

## 4) Quick smoke check

```powershell
npx mcp-accessibility-scanner@latest list-tools
```

If this prints tool names, MCP runtime dependencies are OK.

## 4.1) Figma OAuth check

```powershell
codex mcp get figma
```

Expected:

- `transport: streamable_http`
- `url: https://mcp.figma.com/mcp`
- Auth enabled (`OAuth`)

## 5) Recommended UX workflow for this codebase

1. Use `chrome-devtools` to inspect spacing, typography, layout, and responsive breakpoints.
2. Use `playwright` to run deterministic UI flows and take screenshots before/after changes.
3. Use `ux-a11y` to scan pages for accessibility issues (contrast, ARIA, tab order, labels).
4. Apply fixes incrementally and re-run the same checks.

## 6) Notes

- MCP config is stored in: `C:\Users\GIAN J\.codex\config.toml`
- If MCP tools do not appear in UI, restart Gravity/Codex session.
