# kiro-frontend-engineer-mcp

A Model Context Protocol (MCP) server implementing a **7-stage agentic frontend workflow**:

1. **Design Audit** — Web design inspection checklist (accessibility, layout stability, edge cases)
2. **Component Blueprint** — AI-driven component generation with full interactive states
3. **Best Practices** — React/Next.js guidelines applied before code generation
4. **Browser Validation** — Real browser run via kane-cli
5. **E2E Testing** — Playwright test execution with pass/fail capture
6. **CI Self-Healing** — Auto-fetch GitHub Actions failures and generate fixes
7. **PR Review Loop** — Auto-resolve PR review comments

## Quick Start — Add to Your Project

### Option 1: Kiro (recommended)

Add this to your project's `.kiro/settings/mcp.json`:

```json
{
  "mcpServers": {
    "frontend-engineer": {
      "command": "node",
      "args": ["<path-to-this-repo>/dist/index.js"]
    }
  }
}
```

### Option 2: npx (after publishing to npm)

```json
{
  "mcpServers": {
    "frontend-engineer": {
      "command": "npx",
      "args": ["-y", "kiro-frontend-engineer-mcp"]
    }
  }
}
```

### Option 3: Clone and build locally

```bash
git clone https://github.com/<your-username>/kiro-frontend-engineer-mcp.git
cd kiro-frontend-engineer-mcp
npm install
npm run build
```

Then point your MCP config to the built output:

```json
{
  "mcpServers": {
    "frontend-engineer": {
      "command": "node",
      "args": ["./kiro-frontend-engineer-mcp/dist/index.js"]
    }
  }
}
```

## What It Provides

### Resources (context the agent reads)
| URI | Description |
|-----|-------------|
| `mcp://research/web-design-guidelines` | WCAG AA checklist, layout stability, responsive breakpoints |
| `mcp://research/react-best-practices` | Server/Client components, TypeScript patterns, performance |

### Prompts (agent personas)
| Name | Description |
|------|-------------|
| `ui-ux-pro-max` | Generates production-ready component blueprints from layout specs |

### Tools (agent actions)
| Name | Description |
|------|-------------|
| `run_kane_cli` | Visual browser validation via kane-cli |
| `execute_playwright_test` | Run Playwright E2E tests |
| `github_fetch_ci_logs` | Fetch CI failure logs for self-healing |
| `github_address_review_comments` | Fetch and resolve PR review comments |

## Orchestration Flow

The agent should chain calls in this order:

```
Read web-design-guidelines → Call ui-ux-pro-max prompt → Read react-best-practices
→ Generate code → run_kane_cli → execute_playwright_test
→ (if CI fails) github_fetch_ci_logs → fix → push
→ (if PR comments) github_address_review_comments → resolve → push
```

## Prerequisites

- Node.js ≥ 18
- `gh` CLI (for CI logs and PR comment tools) — `gh auth login`
- Playwright installed in your project (for E2E tool)
- kane-cli (optional, for browser validation tool)

## License

MIT