Skip to content
Get All-Access
All skills
ProCoding agent skills

Agent UI. Interfaces for AI agents from the agent components — every run state, and an approval moment that holds up.

Describes the run (steps, tools, costs, approvals), maps it to RunTimeline, ApprovalCard, CostMeter, AgentStatus, RunError and their relatives, renders every state from queued to cancelled and over budget, applies the agent motion tokens and checks the approval moment on its own.

Get All-AccessSee the workflow
Workflow

What it actually does. Step by step, in the order it runs.

  1. 1

    Describe the run

    A table: step · tool · needs approval? · how it fails — the spec for everything after it.

  2. 2

    Pick the components

    AgentStatus for the run, RunTimeline or AgentPlan for the steps, ApprovalCard for gates, CostMeter and UsageMeter for spend, RunError for failures — with their real props.

  3. 3

    Play every state

    Queued, running, waiting for approval, approved, rejected, expired, over budget, failed, cancelled, done — each one reachable with ?state=.

  4. 4

    Agent motion

    The library's own motion plus tokens; a running step may pulse, nothing else loops, and every state reads without animation.

  5. 5

    Check the approval

    What happens on approve, the payload, risk and cost, reject as easy as approve, focus not on Approve, expiry visible, the decision recorded.

Example run

Real output. From a test run of this skill.

You ask

“Build a run view for a deploy agent with one approval before production.”

Or in other words

  • “Build a run view for our deploy agent.”
  • “Add an approval step before production.”
  • “Show what the agent has spent so far.”
run      check out → install and build → run tests → deploy to staging
         → smoke-test staging → promote to production (approval) → verify
uses     RunTimeline · ApprovalCard (inline at the waiting step) · UsageMeter · RunError · TerminalOutput · Segment
states   10/10 reachable via ?state= — queued, running, waiting, approved, rejected,
         expired, over budget, failed, cancelled, done
build    tsc --noEmit ✓  next build ✓
Install

Comes with WunderUI Pro. One folder for your agent.

The WunderUI Pro skills zip comes with your order (confirmation e-mail and Polar customer portal). Unzip it and copy the folder:

# from the WunderUI Pro skills zip
cp -r wunderui-skills/skills/wunderui-agent-ui ~/.claude/skills/

Claude Code loads it by itself when your request fits. Cursor, Codex and other agents: point them at the skill's .

What it needs

  • WunderUI set up in the project
  • Node.js 20+