Feed

Problem Context

• Items are posts, stories, comments, collaboration updates, activity cards, status updates, messages, media, or event summaries.
• The stream may be chronological, ranked, personalized, filtered, live, paused, or loaded incrementally.
• Users may read in place for a long time while new content arrives, older content loads, or items are updated, removed, or inserted.
• The surface often mixes browsing, social interaction, lightweight actions, media, and links to related objects.

Selection Rules

• Choose feed when the core experience is consuming a continuing stream rather than managing a fixed set of objects.
• Use card list when the content is a bounded set of object cards with filtering, sorting, and object-management behavior.
• Use list view when users need compact row scanning and row actions instead of rich article-like stream consumption.
• Use timeline when items represent a bounded sequence of milestones or events along an explicit temporal path.
• Use activity log when the surface is durable audit history, provenance, or compliance evidence rather than a consumable stream.
• Use notification center when items need unseen and unread semantics, badge behavior, retention, preferences, and mark-read lifecycle.
• Use recommendations when the surface is a ranked suggestion set requiring reason labels, feedback, dismissal, and personalization controls.
• Label feed order honestly as latest, ranked, following, popular, sponsored, recommended, or mixed.
• Offer a deliberate control for new incoming items when automatic insertion above the viewport would move the reader's place.
• Prefer Load more or explicit page boundaries when users need footer access, comparison, task completion, or resumable position.
• Avoid feed when users need aligned attribute comparison, spreadsheet interaction, named collection management, or exact search result review.

Required States

• Default feed with heading, order label, rendered item count or range, and article-like items.
• New item waiting, live updates paused, jump to latest, loaded newer, and loaded older states.
• Loading more, busy, end-of-feed, failed-load, retry, offline, and partial-load states.
• Unread, read, new, updated, removed, muted, hidden, saved, liked, replied, and shared item states when supported.
• Sponsored, promoted, recommended, following-only, filtered, ranked, chronological, and mixed-order disclosure states.
• Empty feed, no matching updates, first-run follow suggestions, permission-limited, blocked-author, and stale-content states.
• Focused item, focused action, keyboard reading boundary, and restored-position states.
• Responsive state where item identity, source, timestamp, action ownership, and loading controls remain visible.

Interaction Contract

• Each feed item has a stable identity, source, timestamp, item boundary, and primary destination or action.
• New items do not move focus or scroll position unless the user explicitly chooses to jump or refresh.
• Loading older or newer items preserves the reader's position and places focus on the triggering control, the newly loaded boundary, or a clear status message.
• The feed communicates whether ordering is chronological, ranked, filtered, or personalized before users rely on recency.
• Dismiss, mute, save, like, reply, share, and report actions affect the named item and give immediate feedback without collapsing unrelated items.
• Sponsored, promoted, recommended, and following content remain distinguishable even when they share the same card anatomy.
• If virtualization removes items from the DOM, article positions, labels, and focus recovery remain stable.
• If the feed is used for work activity, notification or audit obligations are handled by notification center or activity log instead of being implied by the feed alone.

Implementation Checklist

• Define feed item identity, article heading, source or author, timestamp, type, body summary, media, primary route, and item-scoped actions.
• Choose ordering rules and expose them in text: latest first, oldest first, ranked, following, recommended, sponsored, or mixed.
• Use feed and article semantics when automatic reading and loading behavior benefits assistive technology; otherwise use semantic lists with equivalent labels and loading status.
• Maintain aria-busy or loading status while inserting or removing feed items and avoid changing the middle of the stream unexpectedly.
• Add queued-new-item, pause live updates, jump to latest, load newer, load older, end-of-feed, retry, and restored-position behavior.
• Preserve scroll and focus position across refreshes, item updates, media expansion, filters, route return, and incremental loading.
• Label promoted, sponsored, recommended, filtered, muted, hidden, and stale items in the item UI and data model.
• Test keyboard reading order, screen-reader item boundaries, long posts, nested actions, media fallback, virtualization, reduced motion, mobile wrapping, and footer reachability.

Common Generated-UI Mistakes

• Calling any vertical card list a feed even when it is a bounded object collection.
• Auto-prepending new content and moving the reader away from the item they were reading.
• Mixing ranked, sponsored, recommended, and chronological items without labels.
• Using infinite scroll when users need a footer, exact position, task completion, or a known end.
• Hiding timestamps or source labels until hover.
• Letting action buttons in one item affect a different item after virtualization or live insertion.
• Using a feed as audit history or notification history without the required lifecycle semantics.
• Removing article boundaries and loading status from assistive technologies.

Critique Questions

• Is the user consuming a stream, managing a collection, scanning object rows, reviewing audit history, or triaging notifications?
• What order is the feed using, and can users tell whether an item is latest, ranked, recommended, sponsored, or filtered?
• What happens to the reader's position when new content arrives, older content loads, media expands, or the route is reopened?
• How are new-item counts, unread state, loaded boundaries, failures, and end-of-feed communicated?
• Which actions belong to one item, and how does the UI prevent action ownership errors after live updates?
• Would card list, list view, timeline, activity log, notification center, recommendations, pagination, or saved view better fit the task?