# Build Review Interface

> Build a custom web interface for trace annotation and review. Use when users need a bespoke review surface for their workflow.

- **Type:** Skill
- **Install:** `agentstack add skill-goodeye-labs-truesight-mcp-skills-build-review-interface`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Goodeye-Labs](https://agentstack.voostack.com/s/goodeye-labs)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Goodeye-Labs](https://github.com/Goodeye-Labs)
- **Source:** https://github.com/Goodeye-Labs/truesight-mcp-skills/tree/main/skills/build-review-interface
- **Website:** https://truesight.goodeyelabs.com/docs/mcp-integration

## Install

```sh
agentstack add skill-goodeye-labs-truesight-mcp-skills-build-review-interface
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Build Review Interface

Use this skill to design and implement a stack-agnostic custom trace review web UI.

## Interactive Q&A protocol (mandatory)

BEFORE the first scoping question, search for a structured question tool (e.g., `AskUserQuestion` or similar interactive widget) and load it. Use that tool for EVERY scoping question. Fall back to plain-text lettered options ONLY if no such tool exists in the environment.

Start with custom web UI scoping questions.

Rules:
- Ask one question at a time.
- Use the structured question tool for every question. Structure each with a short header, 2-4 options with labels and descriptions, and place the recommended option first. Do not add "(Recommended)" or similar annotations to option labels.
- Ask one follow-up when requirements are ambiguous.

Example question:

```
What should the primary annotation action set be in v1?
A) Pass / Fail only
B) Pass / Fail + free-text notes
C) Pass / Fail + notes + Defer
D) Custom label set
```

## Custom UI workflow

1. Define annotation contract:
   - pass/fail controls
   - free-text notes
   - defer action
   - autosave behavior
2. Define data source and persistence:
   - JSON/CSV input or API-backed source
   - CSV/JSON/SQLite output for labels
3. Build trace review views:
   - render markdown as markdown
   - syntax highlight code
   - pretty-print JSON
   - collapse low-value verbose sections
4. Add navigation and productivity controls:
   - next/previous
   - position and progress counters
   - keyboard shortcuts
5. Validate end to end:
   - functional checks
   - data persistence checks
   - Playwright verification for core annotation loop

## Design checklist

- Consistent layout and terminology across traces
- Pass/fail actions visually distinct
- Full trace visible or expandable
- Autosave on primary actions
- Keyboard shortcuts for frequent actions
- Trace-level annotation as default

## Guardrails

- Keep technology guidance stack-agnostic unless the user asks for a specific stack.
   - Review the existing codebase to determine if any existing stack is available and offer that as an option.
- Keep sampling logic separate from UI implementation.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Goodeye-Labs](https://github.com/Goodeye-Labs)
- **Source:** [Goodeye-Labs/truesight-mcp-skills](https://github.com/Goodeye-Labs/truesight-mcp-skills)
- **License:** MIT
- **Homepage:** https://truesight.goodeyelabs.com/docs/mcp-integration

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-goodeye-labs-truesight-mcp-skills-build-review-interface
- Seller: https://agentstack.voostack.com/s/goodeye-labs
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.