skills.rest
silentbalanceyh
silentbalanceyhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

r2mo-ui-tree

Render hierarchical data as tree views, selectors, and tree-tables from R2MO note specs.

2|1|Updated Nov 20, 2025
Search Tags:#typescript#frontend#hierarchy#tree#tree-select#tree-table
One-click install
npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-tree
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r2mo-ui-tree
Source: https://github.com/silentbalanceyh/r2mo-lain/tree/main/docs/skills/r2mo-ui-tree
Command: npx skills add https://github.com/silentbalanceyh/r2mo-lain --skill r2mo-ui-tree

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to build consistent, scalable tree-based UI components for hierarchical data. This skill provides a spec-driven model for trees, tree selectors, and tree-tables aligned with R2MO notes to unify behavior across projects.

Core Features & Use Cases

  • Tree view: standalone or embedded hierarchical visualization with expand/collapse.
  • Tree selector: in forms with single or multi-select and customizable selection rules.
  • Tree-table: hierarchical data presented in a tabular format with lazy loading capabilities.
  • API-driven: binds to backend hierarchy endpoints defined by spec; derives node identity and relationships from front-matter keys.
  • Use Case: when building an admin panel displaying organizational structures or category trees.

Quick Start

Create a minimal R2MO tree spec and render a lazy-loading, selectable tree.

Frequently Asked Questions about r2mo-ui-tree

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

FAQPage Schema
How do I build a hierarchical tree view in TypeScript without hardcoding data paths?▼

You can build a hierarchical tree view by defining R2MO front-matter keys like tree_key and parent_key to derive node identity and relationships dynamically. This spec-driven model unifies tree rendering behavior across frontend projects without hardcoded paths.

Can I implement lazy loading for tree selectors using frontend API definitions?▼

Yes, tree selectors support lazy loading by binding to backend hierarchy endpoints defined through api_refs in the spec. Node identity and API contracts are derived directly from parsed front-matter attributes.

What's the best way to render a hierarchical tree-table in a frontend application?▼

Rendering a hierarchical tree-table involves using a spec-driven tree model based on R2MO notes to present tabular hierarchical data. It supports expand/collapse interactions and lazy loading capabilities derived from front-matter configuration.

Does this spec-driven tree model support multi-select and checkable nodes in forms?▼

Yes, the spec-driven tree model supports selectable and checkable nodes for single or multi-select scenarios in forms. Selection rules are customized using front-matter keys like selectable and checkable.

When do I need front-matter attributes for hierarchical data visualization?▼

You need front-matter attributes when rendering hierarchical data structures like organizational charts or category trees. Keys such as children_key and lazy drive expand/collapse behavior and API contracts without relying on hardcoded structural paths.

Related Skills

Explore More Software Engineering Skills→
silentbalanceyhsilentbalanceyh
2

r2mo-ui-login

Generate R2MO-specified login, SSO, and recovery flows for Vue/React projects.

Community
Advanced
jiaiyanjiaiyan
21

el-tree-select

Combine Tree and Select components for hierarchical data selection in forms.

Community
Intermediate
silentbalanceyhsilentbalanceyh
2

r2mo-ui-route

Generate runtime frontend routing trees and guard configurations from R2MO design specifications.

Community
Advanced
RomualdPRomualdP

React State Management

Implement Zustand stores and custom hooks for React client-side state.

Community
Intermediate