admin-ui-debug

par vercel

Débogage de l'interface d'administration et de la surface opérateur pour vercel-openclaw : conception de l'invite de commande, actions d'administration, noyau de requêtes, panneaux d'état, interface de vérification de lancement, canal…

npx skills add https://github.com/vercel-labs/vercel-openclaw --skill admin-ui-debug

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.

Plus de skills de vercel

benchmark-sandbox
vercel
Exécute les scénarios d'évaluation de vercel-plugin dans des sandbox Vercel au lieu de panneaux WezTerm locaux. Provisionne des microVM éphémères avec Claude Code et le plugin préinstallé,…
official
emil-design-eng
vercel
Cette compétence encode la philosophie d'Emil Kowalski sur le polissage UI, la conception de composants, les décisions d'animation et les détails invisibles qui rendent un logiciel agréable.
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de l'équipe Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
write-guide
vercel
Produire un guide technique qui enseigne un cas d'usage concret à travers des exemples progressifs. Les concepts ne sont introduits que lorsque le lecteur en a besoin.
official
release
vercel
Release vercel-plugin — exécuter les gates, incrémenter la version, générer les artefacts, commiter et pousser. Utiliser lorsqu'on demande de "release", "ship", "bump and push" ou "cut a release".
official
deepsec
vercel
Exécuter DeepSec sur un checkout de projet Vercel depuis dev3000. Utiliser pour la configuration DeepSec en un clic, l’amorçage du contexte du projet, le traitement limité de premier passage, et…
official
backport-pr
vercel
Effectuer un backport d'une pull request Next.js fusionnée depuis canary vers une branche de version précédente telle que next-16-2. Utiliser lorsque l'utilisateur demande de faire un backport, un cherry-pick ou d'ouvrir un…
official