kiro-frontend-engineer-mcp

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:

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

Option 2: npx (after publishing to npm)

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

Option 3: Clone and build locally

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:

{
  "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