Skill LibraryPrompt Skill1 DesignsTop Views

Horizontal Portfolio Rail

Design bounded horizontal rails for architecture, photography, portfolios, case libraries, and visual collections with project metadata, controls, scroll snap, accessibility, and mobile vertical fallback.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines9

Reusable instruction lines for generation.

Author@Interface Lab

Layout

Skill Directive

Description

TagsLayout

Skill Prompt

- Use for horizontal portfolios, gallery rails, project carousels, work archives, case-study indexes, and image-led collections; inputs must include item count, item type, project metadata, selection/detail model, control model, breakpoints, and motion budget.
- Run a fit decision first: use a horizontal rail only when the collection is finite, visual, browseable/comparable, and each item can show title, number, and metadata at rest; do not use horizontal scrolling for long copy, forms, pricing, docs, settings, or dense comparison.
- Each project card must show index, title, visual, at least two metadata facts, and a detail route at rest; hover/focus may add description but must not hide name, current selection, or action entry.
- Desktop uses a bounded horizontal rail: fixed or clamped card width, clear gap, partial next item, previous/next buttons, `03 / 12` progress text, and scroll snap; do not turn the whole page into unbounded horizontal scroll.
- Mobile defaults to a vertical project stack; a thumbnail strip can remain as secondary navigation but not the only path. Preserve filters, selection, and scroll context when returning to the list.
- Frontend implementation prefers CSS Scroll Snap: `grid-auto-flow: column`, `grid-auto-columns: clamp(...)`, `overflow-x:auto`, `scroll-snap-type:x mandatory`, and item `scroll-snap-align:start`; use JavaScript only for button scrolling, selected sync, or complex library integration.
- Accessibility must include visible controls, accessible names, focus-visible, text progress, item position, image alt/decorative decisions, disabled prev/next, reduced motion, and non-hover paths; auto-rotation is off by default, and if required it needs pause plus stop-on-focus/hover behavior.
- Output: fit decision, item hierarchy, breakpoint layout table, interaction contract, accessibility contract, CSS/React implementation notes, and desktop/mobile QA checklist.
- Common mistakes: using horizontal scroll for body copy, drag as the only control, hover resizing cards and shifting the rail, no mobile fallback, dots-only progress, and selected item out of sync with URL/detail. Sources: Awwwards horizontal layout/portfolio examples, W3C APG Carousel, MDN CSS Scroll Snap, and web.dev CSS Scroll Snap/Carousel best practices. The content is rewritten as Interface Lab horizontal portfolio rail 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

Horizontal Portfolio Rail

More pages using Horizontal Portfolio Rail