skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amvcp-layout-shells

Build IDE-style 3-panel layout shells with collapsible sidebars.

Updated May 8, 2026
Search Tags:#ui layout#css grid#app shell#collapsible sidebar#web selection#inspector panel
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-shells
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amvcp-layout-shells
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-layout-shells
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-layout-shells

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Layout shells solve the problem of building consistent, IDE-style page chrome (sidebar/main/inspector) without breaking selection behavior, responsiveness, or creating nested scrollbars.

Core Features & Use Cases

  • IDE 3-panel application-shell scaffolds: provides a CSS Grid-based shell (sidebar + main + inspector) with a collapse toggle.
  • Sidebar collapse behavior with safe layout invariants: uses a documented data-la-sidebar="open|closed" state and collapse clipping to prevent visual bleed-through.
  • Selection + decision mini-pill readiness: stamps data-ve-id/data-ve-type atoms for region-level interaction and supports the per-panel approve/reject/skip decision model for reviewers.

Quick Start

Use amvcp-layout-shells when the user asks for an IDE shell, 3-panel layout, sidebar shell, app shell, collapsible sidebar, split-pane tool UI, inspector panel, or collapsible workspace.

Frequently Asked Questions about amvcp-layout-shells

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

FAQPage Schema
How do I build an IDE-style app shell with a collapsible sidebar and inspector panel?▼

To build an IDE-style app shell with a collapsible sidebar and inspector panel, use this Skill's CSS Grid-based scaffolds. They provide a 3-panel layout with a collapse toggle and safe layout invariants to prevent visual bleed-through.

Why do my CSS grid 3-panel layouts create nested scrollbars?▼

Your CSS grid 3-panel layouts create nested scrollbars due to missing min-width:0 grid-child constraints. This Skill enforces no-nested-scrollbar rules and logical CSS properties to prevent overflow issues in split-pane tool UIs.

How do I manage sidebar collapse state without breaking responsive layout?▼

To manage sidebar collapse state without breaking responsive layout, use the documented data-la-sidebar open or closed DOM attribute. This ensures safe layout invariants and clipping behavior that prevent visual bleed-through during toggling.

Can I add selection behavior and decision tracking to an inspector panel UI?▼

Yes, you can add selection behavior and decision tracking to an inspector panel UI. The Skill stamps data-ve-id and data-ve-type atoms for region-level interaction, supporting a per-panel approve, reject, or skip decision model for reviewers.

Do I need specific DOM attributes to set up a split-pane tool UI?▼

Yes, setting up a split-pane tool UI requires specific DOM attributes like data-la-sidebar and data-ve-id stamping. You must also integrate the root SKILL-driven amvcp-layout.css and amvcp-layout.js files to function correctly.

What is the best way to scaffold a top-nav and split-pane application workspace?▼

The best way to scaffold a top-nav and split-pane application workspace is using these CSS Grid application-shell layouts. They provide persistent IDE-style page chrome variants designed specifically for split-pane and top-nav scaffolding.

Related Skills

Explore More Design & Creative Skills→
EmasoftEmasoft

amvcp-layout-chrome

Create persistent page chrome with sticky headers, toolbars, and scroll-spy TOC navigation.

Community
Advanced
EmasoftEmasoft

amvcp-wf-screens

Generate multi-screen wireframe prototypes with anchor-based navigation and reviewable atoms.

Community
Intermediate
EmasoftEmasoft

amvcp-diag-time

Generate time-axis diagrams for sequences, state machines, timelines, and Gantt schedules.

Community
Intermediate
syncfusionsyncfusion

syncfusion-aspnetcore-splitter

Build responsive multi-pane Splitter layouts for ASP.NET Core applications.

Official
Advanced