skills.rest
ChenyCHENYU
ChenyCHENYUCOMMUNITY
Explore all skills by this author →
Website𝕏@CHENY_ychenyGitHub

layouts/tree-list

Validate Vue dual-pane tree and table layouts for structural correctness.

3|Updated May 1, 2026
Search Tags:#layout#vue#tree#table#drag#layout-structure
One-click install
npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill layouts-tree-list
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: layouts/tree-list
Source: https://github.com/ChenyCHENYU/wl-skills-ui/tree/main/skills/layouts/tree-list
Command: npx skills add https://github.com/ChenyCHENYU/wl-skills-ui --skill layouts-tree-list

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of building consistent dual-column pages with a collapsible tree and data table, ensuring layout alignment and drag-resize functionality for management interfaces.

Core Features & Use Cases

  • Layout Detection: Recognizes pages with a left tree and right table structure, including drag-resize capability.
  • Layout Diagnosis & Fixes: Identifies common structural issues such as missing classes or improper container setup, providing repair guidance.
  • Use Case: For a page displaying organizational data with a navigable tree on the left and detailed table on the right, this Skill ensures correct structure and interaction.

Quick Start

Apply this Skill to a Vue page by ensuring the container has class 'tree-list', includes elements with classes 'tree-list__aside' and 'tree-list__main', and integrates a 'jh-drag-col' component for resize functionality.

Frequently Asked Questions about layouts/tree-list

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

FAQPage Schema
How do I create a dual-pane tree and table layout in Vue?▼

To create a dual-pane tree and table layout in Vue, use a container with the 'tree-list' class, add 'tree-list__aside' and 'tree-list__main' elements, and integrate a 'jh-drag-col' component for resize functionality.

Why does my drag-resize table layout not align properly?▼

A drag-resize table layout may not align due to missing DOM classes or improper container setup. The Skill diagnoses structural issues like missing 'tree-list__aside' classes and provides repair guidance.

What is a tree-list layout structure for admin dashboards?▼

A tree-list layout structure for admin dashboards features a collapsible navigation tree on the left and a synchronized data table on the right, ensuring consistent layout alignment and drag-resize functionality.

Can I use this dual-pane layout approach for management systems?▼

Yes, this dual-pane layout approach is specifically designed for admin dashboards and management systems requiring synchronized tree and data list displays with structural correctness and interaction handling.

Does this layout validation work with custom Vue components?▼

The layout validation works with Vue pages containing dual-pane tree and table views. It inspects DOM classes, event bindings, and resizable components like 'jh-drag-col' to ensure proper setup.

Related Skills

Explore More Software Engineering Skills→
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
syncfusionsyncfusion

syncfusion-javascript-list-box

Bind and manipulate Syncfusion ListBox data with selection, drag-and-drop, sorting, and grouping.

Official
Intermediate
inference-shinference-sh
688

widgets-ui

Render declarative UI components from JSON schemas for React and Next.js.

Official
Intermediate
rfdiosuaorfdiosuao
30

css-expert

Guide modern CSS layout with Flexbox, Grid, and container queries.

Community
Intermediate