# UI Friend

> Use this tool when you need to streamline your UI development process with live previews and hot module replacement. It solves problems such as tedious manual refreshing and debugging, providing a seamless development experience with features like element inspection and responsive viewport switching. It takes your UI code as input and outputs a live preview in the browser, with options to export to popular frameworks like Next.js, Remix, and React.

Canonical page: https://skillsregistry.net/skills/beyondworks-ui-friend  
JSON: https://api.skillsregistry.net/v1/skills/beyondworks-ui-friend

## Description

Launches a Vite-based development server that renders live UI previews in the browser with hot module replacement. Includes a built-in element inspector that identifies source locations and design terminology, responsive viewport switching with real CSS media query breakpoints, and project export to Next.js, Remix, Nuxt, Astro, Vue, and React as ZIP files. Communicates with the preview via WebSocket bridge for real-time updates.

## Trust

- **Trust score (0–1):** 0.57
- **Verification tier:** scanned
- **Last scanned:** 2026-09-28

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** browser-automation
- **Updated:** 2026-09-28

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/beyondworks-ui-friend)
- **Repository:** <https://github.com/beyondworks/ui-inspector>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "beyondworks-ui-friend"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/beyondworks-ui-friend` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/beyondworks-ui-friend/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt