UI Skillbook
2

Trace

One-line rows for an AI agent's reasoning, tool calls and sources that expand into their details.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-trace and follow the Siteplane Trace skill it prints for this task.

Paste this into your agent.

Trace shows what an agent did before it answered: thinking time, searches, tool results, failures and the sources it used. Each row can open into output such as a code block, and summaries can nest further steps.

Install

bashnpx shadcn@4.18.0 add @siteplane/trace

Import it from @/siteplane/components/trace. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Marker: Pick Marker for a single status line or note with no details to expand.
  • vs Accordion: Pick Accordion for general expandable sections outside an agent transcript.

Rules

  • Build each row from a TraceLine with TraceIcon, TraceTitle and TraceDescription, wrapped in a TraceCollapsibleTrigger or a TraceLink to make it act.
  • Set status to running, error or pending; leave it off for finished work.
  • Put the state in the title words (present tense while running, past tense when done) since screen readers do not hear colour or shimmer.
  • Ask for tool approval in an Alert after the Trace, not as a row.
  • Pass keepMounted to TraceCollapsibleContent when a summary nests another Trace whose open state should survive.

Reference

  • Trace docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-trace

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Accessible Focus Statesby UI Skillbook

Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.

Accessibility

Better Accessibilityby jakubkrehel

Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.

AccessibilityExternalGitHub stars: 9.2K

Build Primitiveby PrototyperAI

Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.

AccessibilityExternalGitHub stars: 7

Link Purposeby AccessLint

Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.

AccessibilityExternalGitHub stars: 114

Back to Siteplane UI