# ui-to-hierarchy

> ui-to-hierarchy — dovanhuy2298-ui-to-hierarchy. Use this tool when you need to parse a Next.js App Router project and extract its UI component hierarchy. It solves the problem of grounding image or description-based UI edits in exact file and component locations, enabling AI coding agents to make precise modifications. The tool takes a Next.js project as input and returns a structured output in markdown tree and JSON formats.

Canonical page: https://skillsregistry.net/skills/dovanhuy2298-ui-to-hierarchy  
JSON: https://api.skillsregistry.net/v1/skills/dovanhuy2298-ui-to-hierarchy

## Description

MCP (Model Context Protocol) server that parses a Next.js App Router project and returns its UI component hierarchy as structured output (markdown tree + JSON), so AI coding agents can ground image/description-based UI edits in exact file/component locations.

## Trust

- **Trust score (0–1):** 0.50
- **Verification tier:** unverified

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** container
- **Runtime environment:** vm
- **Category:** media
- **Updated:** 2026-09-21

## Source

- **Source listing:** [GitHub](https://github.com/dovanhuy2298/ui-to-hierarchy)

## 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": "dovanhuy2298-ui-to-hierarchy"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/dovanhuy2298-ui-to-hierarchy` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/dovanhuy2298-ui-to-hierarchy/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