Introducing Maple: The Frontend Review Toolkit

Описание и применение

Maple упрощает визуальный рецензирование, объединяя комментарии в приложении, автоматически передавая их агентам и блокируя слияния до их решения.

Задача

Reviewing frontend changes is slow because comments arrive in separate threads and need manual translation into actionable tasks for coding agents.

Результат

Maple streamlines visual feedback by embedding comments directly in the preview, automating context capture, and integrating with coding agents and CI to enforce merge gates.

Рабочий процесс

• 1. Reviewer points at a component or text in the preview URL using Maple overlay.
• 2. Maple records the element’s file, line, column, viewport, theme, and a screenshot.
• 3. The comment is sent to the MCP server via the Maple CLI.
• 4. The coding agent retrieves comments with list_comments, waits for new ones, and obtains full context with get_comment_context.
• 5. The agent applies fixes and resolves comments with resolve_comment, naming the commit.
• 6. CI checks maple/visual-review; merge is blocked until all comments are resolved.
• 7. Optional: use @maple-kit/mock to simulate any page state for review.
• 8. Optional: use @maple-kit/lint to auto‑check design‑system rules on every PR.

Доказательства

Maple records where they pointed, what they were looking at and who they are, then hands it to a coding agent over MCP, anchored to file:line;

Источник

CI blocks while a visual comment is open, and the check is real and named: maple/visual-review.

Источник

@maple-kit/mock rewrites a page's API responses into a named state.

Источник