Skill LibraryPrompt Skill1 DesignsTop Views

Split View Master Detail Flow

Design breakpoints, selection state, return paths, empty detail, and mobile fallback for list-detail, sidebar-detail, supporting-pane, and wide-screen productivity interfaces.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Layout

Skill Directive

Description

Design breakpoints, selection state, return paths, empty detail, and mobile fallback for list-detail, sidebar-detail, supporting-pane, and wide-screen productivity interfaces.

TagsLayout

Skill Prompt

- Inputs must include object collection, detail hierarchy, list-item metadata, default selection rule, multi-select/batch needs, wide/tablet/mobile breakpoints, detail actions, and supporting-pane need.
- Classify the layout first: list-detail is for homogeneous object collections and detail; supporting pane is for comments, properties, contextual help, or related files; sidebar carries top-level navigation or collections, not the main detail body.
- Breakpoint rules must be explicit: compact shows list or detail as a single page with a back path; medium may use list plus detail or a temporary pane; expanded can keep two or three panes visible.
- List items need enough identity: title, status, time/owner, tag, or summary; users should not need to open every item to tell objects apart.
- Selection state is visible and recoverable: current item, hover, focus, loading detail, not found, permission denied, deleted/archived, and unsaved detail each have a distinct state.
- Empty detail is not a blank area: first visit, no selection, filtered-empty, object load failure, and permission issue each need explanation, next action, and return path.
- Action ownership follows panes: list toolbar handles filter/sort/batch, detail toolbar handles the current object, and supporting pane holds contextual actions; do not put current-object deletion in a global list toolbar.
- Frontend implementation stores selected id, pane visibility, scroll position, dirty state, and back behavior in URL or a state machine; mobile back must not lose filters or list scroll.
- Deliver a pane map, breakpoint table, selection state machine, empty/detail-error copy, keyboard focus path, mobile return strategy, and desktop/mobile QA checklist.
- Sources referenced: Apple HIG Split views/Sidebars, Material 3 canonical layouts/list-detail, and SAP Fiori list-detail. The content is rewritten as Interface Lab split-view skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Split View Master Detail Flow

More pages using Split View Master Detail Flow