skills.rest
Aurelian1974
Aurelian1974COMMUNITY
Explore all skills by this author →
GitHub

ui-split-layout

Implements SplitLayout master-detail and SidePanel drawer patterns for ERP interfaces.

Updated Aug 18, 2026
Search Tags:#layout#react#erp#shadcn#drawer#master-detail#sidepanel
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-split-layout-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-split-layout
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-split-layout
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-split-layout-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right layout pattern for ERP pages is a recurring decision: users need to browse large record lists, edit entries quickly, or work through complex forms, and picking the wrong pattern hurts usability. This Skill provides guidance and quick-reference code for two React layout components—SplitLayout and SidePanel—so you apply the correct pattern consistently. ## Core Features & Use Cases - SplitLayout master-detail: Renders a list on the left and a detail view on the right with a configurable master width, ideal for high-volume pages where users navigate quickly between records. - SidePanel drawer: A right-side drawer built on shadcn/ui Sheet with sm/md/lg sizes and a footer for action buttons, suited for quick edits without leaving the current page. - Decision guidance: A comparison table clarifies when to use SplitLayout, SidePanel, or a separate full page for complex forms with sections like EditableGrid or Attachments. - Use Case: Building an invoice management page, you render the invoice list in a SplitLayout master pane, show the selected invoice detail on the right, and open a SidePanel for quick edits of a few fields. ## Quick Start Ask the AI to build an ERP page using SplitLayout with a record list on the left and a detail view on the right, plus a SidePanel drawer for quick editing.

Frequently Asked Questions about ui-split-layout

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

FAQPage Schema
How do I build a master-detail layout in React for an ERP page?▼

Use the SplitLayout component with a master prop containing your record list and a detail prop for the selected record view. Set masterWidth (for example 320px) to control the list pane width, and render an empty-state component when no record is selected.

How to create a right-side drawer for editing records with shadcn/ui?▼

Use the SidePanel component, which is built on the shadcn/ui Sheet. Pass open, onClose, title, a size of sm, md, or lg, and a footer with action buttons such as Cancel and Save, then place your form inside as children.

When should I use a drawer versus a separate page for editing?▼

Use a SidePanel drawer for quick edits of a few fields without leaving the current page. Use a separate page for complex forms with many sections, such as editable grids or attachment managers, where the drawer space is insufficient.

What sizes does the SidePanel drawer support?▼

SidePanel supports three sizes: sm, md, and lg. Choose the size based on the form content; for example, use lg when editing an invoice form that needs more horizontal room.

When is SplitLayout not the right choice?▼

SplitLayout is designed for high-volume pages where users navigate quickly between records. For complex editing workflows with many form sections, a dedicated full page is the recommended pattern instead of fitting everything into the detail pane.

Related Skills

Explore More Software Engineering Skills→
AleksanderEvensenAleksanderEvensen

shadcn-ui

Install and configure shadcn/ui React components with Radix UI accessibility.

Community
Intermediate
dominikpalatynskidominikpalatynski

backend-ui-design

Standardize backend admin pages with shared Page, DataTable, and CrudForm components.

Community
Advanced
tonehqtonehq
11

frontend_forms

Generate and wire create/edit forms with Zod schemas and react-hook-form.

Official
Advanced
mailtrapmailtrap
7

using-email-templates

Send Mailtrap email templates by UUID with Handlebars variables.

Official
Intermediate