layouts/tree-list
CommunityEnables effortless creation of dual-pane tree and table layouts.
AuthorChenyCHENYU
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: layouts/tree-list Download link: https://github.com/ChenyCHENYU/wl-skills-ui/archive/main.zip#layouts-tree-list Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.