Activity Feed Skill
How this skill behaves (read first)
This is a generative skill. A feed's job is to surface what matters and let the noise fade — and the defaults work against that: each entry crammed with every available field, loud exact timestamps, every social control on every row, ungrouped notifications buzzing one-by-one, and a blank feed greeting brand-new users in the exact window where they decide whether to stay. There's also a consequential upfront choice — chronological vs. algorithmic/ranked — that teams often make by accident. So this skill gates:
- Establish the feed type and what the feed is for — chronological vs. ranked is hard to change later and reshapes everything downstream.
- Apply the always-true core — curate each entry, keep text legible, downplay timestamps, never show an empty feed, show refresh status.
- Surface the context-dependent decisions (notification aggregation, follow recommendations, per-entry controls) with trade-offs.
Then it hands off to ux-aesthetics-audit, ux-heuristics-audit, ux-accessibility-audit, ux-microcopy-audit, ux-dark-patterns-audit, and ux-mobile-responsiveness-audit for validation.
Scope & composition (per docs/orchestration-policy.md §9): this skill covers the feed screen and its entries and composes lower-scope skills rather than re-deriving them. Core children (built as part of the feed): per-entry card anatomy via ux-cards. Peers that own a sub-part (defer): notification component behavior to ux-notifications-and-toasts and loaders/skeletons to ux-loaders-and-progress (they own those sub-parts if reached). Downstream (offer, don't auto-build): the empty-feed screen craft via ux-empty-states. Inherit, don't regenerate: under an existing design system, take color/type/spacing from its tokens — only set those when designing from scratch.
Step 0 — Establish context before designing
Ask if not known; state the assumption if proceeding without an answer:
- Chronological or ranked? Chronological (newest→oldest) presents a true timeline — right when when it happened is the point (a transaction log, a team activity history). Ranked/algorithmic curates by relevance, trending, sponsored, or editorial picks — right when what's worth seeing matters more than recency. Key warning: don't ship a chronological feed you intend to replace with an algorithm later — that switch upsets users badly. Choose deliberately now.
- What's the feed for? Social engagement, transactional/account updates, or a notifications digest — this sets which controls and content each entry needs.
- What will a new or quiet account see? New users with no connections, or a lull in activity, will hit an empty feed — plan for it from the start (the post-install window to hook users is ~3–7 days).
The always-apply core (correct for almost every feed)
- Curate each entry — minimalism over completeness. A feed item may have lots of data behind it; show only what a user needs to decide and move on. Overcrowded rows, mismatched fonts, and verbose labels pull attention off the task. Clarity lets users scan fast.
- Keep text legible. Feeds exist to be consumed quickly — large, clear fonts and strong background contrast, tested with accessibility tools. This matters most for users with visual impairments.
- Downplay timestamps. They're a tertiary signal — a rough "how long ago," not an exact clock. Abbreviate ("3h," "2d") and don't let them compete with the content.
- Never show an empty feed. A blank feed at first run or during a lull kills engagement. Seed it: "suggested people to follow" during onboarding, popular/trending content, an invite-friends prompt, or a nudge to complete the profile — anything that produces immediate activity.
- Only the essential controls per entry. Include the interactions that matter (e.g. like/comment/share for social; maybe none for a read-only updates feed) and trim the rest — every extra control is overhead that clutters the row.
- Show feed status on refresh. When users pull-to-refresh or load more, a clear loading indicator (spinner/skeleton) keeps them informed of system status rather than staring at a frozen screen.
The context-dependent decisions (surface, don't auto-apply)
| Decision | Apply when | Avoid / adapt when | Default recommendation |
|---|---|---|---|
| Feed type: chronological vs. ranked | Chronological when recency is the value (logs, histories, real-time team activity); ranked when relevance/volume makes pure recency noisy | Pure chronological if you'll later switch to an algorithm (the change upsets users); ranked where users expect a literal timeline | Pick by whether when or what matters most — and commit, don't retrofit |
| Aggregate / group notifications | High-volume or power users — combine similar alerts ("256 people followed you today") by time, type, or interaction | Low-volume feeds where each event is individually meaningful | Group similar updates once volume would otherwise bombard |
| Personalized follow recommendations | Social/discovery products — suggest profiles from connections, shared interests, or influential accounts to spark exploration | Letting recommendations narrow into a filter bubble | Offer suggestions, but deliberately mix in diverse/cross-interest content |
| Per-entry control set | Social feeds: like/comment/share; transactional feeds: maybe a single "view" or none | Copying social controls onto a feed that doesn't need them | Match controls to the feed's purpose; fewer is usually better |
| Sponsored / editorial injection (ranked only) | When the business model requires promoted items | Disguising ads as organic activity | Clearly label sponsored/promoted entries (→ dark-patterns) |
Validate the result (orchestration)
Hand-offs name each lens by its installable skill
name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After generating or revising, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, heuristics, microcopy, and dark-patterns are Tier A (auto-run); accessibility, aesthetics, and mobile-responsiveness are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage; mobile-responsiveness applies only on mobile. If the user invoked this skill for one specific thing, respect that scope.
ux-aesthetics-audit(Tier B — offer; suppress under a design system) — entry density and scannability, one consistent treatment across rows, timestamps subordinate, clutter-free composition.ux-heuristics-audit(Tier A) — visibility of system status (refresh/loading), recognition over recall, match between feed order and user expectation (especially for ranked feeds).ux-accessibility-audit(Tier B — offer; narrow under a design system) — text size and contrast for fast reading, control labels and targets, screen-reader order of feed items.ux-microcopy-audit(Tier A) — abbreviated timestamps, aggregated-notification phrasing ("256 people followed you today"), entry labels, empty-feed prompts.ux-dark-patterns-audit(Tier A) — the feed-specific traps: undisclosed sponsored content dressed as organic, engagement-maximizing manipulation, and filter-bubble narrowing. Ranking should serve the user, not just time-on-app.ux-mobile-responsiveness-audit(Tier B — offer) — pull-to-refresh and infinite-scroll behavior, tap targets on per-entry controls, legibility and one-handed reach on small screens.
If the audits surface a conflict (e.g., business wants more promoted entries vs. a trustworthy stream), resolve back toward the primary task: the user opened the feed to catch up on what matters — protect signal over noise.
Common do/don't patterns
| ❌ Don't | ✅ Do |
|---|---|
| Pick chronological vs. ranked by default | Choose deliberately by whether when or what matters — and commit |
| Start chronological, then swap in an algorithm | Decide upfront; the surprise switch upsets users |
| Cram every available field into each entry | Curate to what's needed to decide and move on |
| Loud, exact timestamps | Abbreviated, relative, visually subordinate |
| One buzz per follower/like | Aggregate similar notifications ("256 people followed you today") |
| Greet new users with a blank feed | Seed it: follow suggestions, popular content, invite/profile prompts |
| Every social control on every row | Only the controls the feed's purpose needs |
| Promoted items disguised as organic | Clearly labeled sponsored/editorial entries (→ dark-patterns) |
| Frozen screen on refresh | Visible loading indicator / skeleton |
| Ship without checking | Hand off to aesthetics + heuristics + accessibility + microcopy + dark-patterns + mobile-responsiveness |
