mcpbeat

Admin UI Debug

vercel-labs/admin-ui-debug

Admin UI and operator surface debugging for vercel-openclaw: command shell design, admin actions, request core, status panels, launch verification UI, channel readiness UI, and local read-only production-data workflows. Use when the root admin UI, controls, visual state, or operator copy is wrong.

403 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
117
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/vercel-labs/vercel-openclaw --skill admin-ui-debug

The instruction itself

5 sections, as written by the author

Admin UI Debug

Use this skill when the root admin control surface or operator-facing UI behavior is the focus.

Evidence First

Collect:

  • Screenshot or browser reproduction path.
  • API payloads the UI consumes: /api/status, /api/channels/summary, launch verify, preflight, logs.
  • Browser console errors.
  • Whether LOCAL_READ_ONLY=1 is set.
  • Mobile and desktop viewport checks for layout changes.

Design Constraints

This is an operator control surface, not a marketing dashboard. Keep it dense, dark-only, Vercel-native, and restrained. Avoid decorative cards, ornamental color, and copy that explains obvious controls.

Use existing components and patterns before adding abstractions. Keep text small enough for compact panels and ensure button/card text cannot overflow.

Fix Boundaries

  • UI: src/components/designs/command-shell.tsx.
  • Action/request helpers: src/components/admin-{action,request}-core.ts.
  • API shape changes: affected route/shared type only.
  • Design reference: .impeccable.md.

Verification

Run focused tests/typecheck and, for visual changes, use browser verification or screenshots:

node scripts/verify.mjs --steps=test,typecheck
lat check

When a dev server is needed, start it and report the URL.

How to use it

Copy the folder

Take vercel-labs/admin-ui-debug from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.