skills.rest
Tairitsua
TairitsuaCOMMUNITY
Explore all skills by this author →
GitHub

monica-ui-bridge-debug

Orchestrate ASP.NET Core bridge launches and Playwright UI artifact capture.

13|6|Updated Feb 19, 2025
Search Tags:#subagent#playwright#bridge#asp.net-core#ui-debugging#monica
One-click install
npx skills add https://github.com/Tairitsua/Monica --skill monica-ui-bridge-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: monica-ui-bridge-debug
Source: https://github.com/Tairitsua/Monica/tree/main/.claude/skills/monica-ui-bridge-debug
Command: npx skills add https://github.com/Tairitsua/Monica --skill monica-ui-bridge-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Monica often has no standalone runnable host for UI verification, making UI inspection, debugging, and iterative fixes difficult to validate in a real browser. This Skill standardizes launching a user-provided ASP.NET Core bridge project, ensures reliable readiness checks across platforms (including WSL), captures browser artifacts with Playwright, and organizes diagnostic artifacts for reproducible verification.

Core Features & Use Cases

  • Bridge orchestration: Uses the bundled bridge_service.py to run, monitor, and wait for readiness of an ASP.NET Core bridge project with robust file-lock retries and process cleanup.
  • Two execution modes: Simple mode for narrow, single-agent fixes and Delegated sub-agent mode for complex, parallel or long-running investigations with explicit sub-agent supervision.
  • Cross-platform handling: WSL path and NAT handling, bind-to-0.0.0.0 logic, and detailed listener PID resolution to make browser access and Playwright captures reliable.
  • Artifact-driven verification: Collects app-run.log, bridge-ready.json, bridge-ready-report.json, Playwright snapshots, screenshots, and task-folder reports to confirm or refute UI errors.
  • Use cases: Rapidly verify a local Monica UI tweak, capture a failing UI state for triage, or coordinate multi-agent UI debugging and implementation across rebuilds.

Quick Start

Provide the bridge project directory, service base URL, target page route, and the UI task, then run the bridge_service script to launch and wait-ready before capturing the page with Playwright.

Frequently Asked Questions about monica-ui-bridge-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug an ASP.NET Core UI when there is no standalone host to run it?▼

To debug an ASP.NET Core UI without a standalone host, you can use a bridge project to launch the service. This Skill orchestrates a user-provided bridge service, waits for readiness, and captures browser artifacts with Playwright for verification.

Can I capture Playwright screenshots from a web service running inside WSL?▼

Yes, you can capture Playwright screenshots from a WSL service. This Skill handles WSL path and NAT translation, applies bind-to-0.0.0.0 logic, and resolves listener PIDs to ensure reliable browser access and artifact collection across platforms.

What do I need to provide to launch a bridge service for UI verification?▼

To launch a bridge service for UI verification, you must provide a bridge project directory, a reachable service base URL with a port, and a target page route. The included bridge_service.py script uses these inputs to manage launch and readiness checks.

How does sub-agent delegation work for long-running UI debugging tasks?▼

Sub-agent delegation for long-running UI debugging works by coordinating delegated agents for parallel or prolonged investigations. This Skill offers a Delegated mode that provides explicit sub-agent supervision across multiple rebuilds, distinct from the Simple single-agent mode.

What artifacts are generated when inspecting a web UI through a bridge service?▼

When inspecting a web UI through a bridge service, the generated artifacts include app-run.log, bridge-ready.json, and bridge-ready-report.json. Additionally, Playwright snapshots and screenshots are collected in task folders to confirm or refute UI errors.

Related Skills

Explore More Software Engineering Skills→
windyskywindysky

moai-lang-csharp

Automate C# 12 and .NET 8 development patterns for ASP.NET Core apps.

Community
Advanced
SkogAISkogAI
1

systematic-debugging

Investigate root causes before implementing fixes for software bugs.

Official
Basic
Xaiver03Xaiver03
16

dev-browser

Automate browser tasks with persistent page state using Node.js and Playwright.

Community
Intermediate
linfordWulinfordWu
1

llama-cpp

Deploy local LLM inference with llama.cpp across CPU, Apple Silicon, and GPUs.

Community
Advanced