skills.rest
NumberOne-AI
NumberOne-AIOFFICIAL
Explore all skills by this author →
GitHub

machina-ui

Trace backend API data flow to React components on the /markers page.

Updated Aug 23, 2026
Search Tags:#automation#frontend#UI#debug#playwright#markers#MachinaMed
One-click install
npx skills add https://github.com/NumberOne-AI/machina-meta --skill machina-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: machina-ui
Source: https://github.com/NumberOne-AI/machina-meta/tree/main/.claude/skills/machina-ui
Command: npx skills add https://github.com/NumberOne-AI/machina-meta --skill machina-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging and understanding how MachinaMed frontend UI data flows from the backend API to React components, enabling quick identification of UI issues on the /markers page.

Core Features & Use Cases

  • Traces data from API to UI components in the /markers page to diagnose rendering issues.
  • Verifies biomarker display, reference ranges, and modal popups in the frontend.
  • Supports browser automation to visually verify UI behavior and collect evidence.

Quick Start

Open the MachinaMed UI at http://localhost:3000/markers and run the browser-automation workflow to verify data flow and reference ranges.

Frequently Asked Questions about machina-ui

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

FAQPage Schema
How do I trace frontend API data flow to React components for UI debugging?▼

Verifying biomarker display and reference ranges in a React UI requires validating that API data transforms correctly before rendering. This Skill automates browser checks on the /markers page to confirm data flow integrity and visual accuracy.

Can Playwright browser automation be used for visual verification of React components?▼

Playwright browser automation can be used to visually verify React component behavior by simulating user interactions and collecting UI evidence. This Skill applies automated workflows to validate modal popups and biomarker rendering on the /markers page.

Why does my frontend biomarker data not match the backend API response?▼

Frontend biomarker data fails to match backend API responses when data transformations between the API and React components introduce errors. This Skill debugs the end-to-end data flow to pinpoint exact transformation failures on the /markers page.

What is the best way to debug React UI rendering issues from backend API data?▼

The best way to debug React UI rendering issues from backend API data is end-to-end tracing from the API endpoint through frontend transformations to the component. This Skill validates the entire data pipeline including reference ranges on the /markers page.

Do I need a running localhost environment to debug MachinaMed UI data flow?▼

You need a running localhost environment at port 3000 to debug MachinaMed UI data flow. This Skill targets the local /markers page directly to execute browser automation workflows and visually verify frontend behavior.

Related Skills

Explore More Software Engineering Skills→
monobaselabsmonobaselabs

dev-api

Start the Bun/Hono API development server on port 7213 with health checks and docs.

Official
Intermediate
mako-aimako-ai
11

react-render-profiling

Instrument React components and collect render metrics to identify performance bottlenecks.

Official
Advanced
telum-aitelum-ai
2

visual-testing-extension

Capture extension UI screenshots with Puppeteer and Playwright for visual regression testing.

Official
Intermediate
serkan-ozalserkan-ozal
7

react-debugging

Inspect React components, props, and the component tree during debugging sessions.

Community
Intermediate