AddThisFeature
Sign in

Relative Time Component

Show times as ages people can read, without losing the exact moment underneath.

moderate User Experience

What it adds

One shared timestamp element that renders an age in words and carries the precise local date with it.

What your agent is told to do

5
  1. 1

    Find every place the app prints a date or a time — activity feeds, comment headers, audit rows, table cells, tooltips — and route them all through one component so the wording is identical everywhere.

  2. 2

    Render from a machine-readable instant supplied by the server in a single unambiguous format, and do the conversion to the viewer's zone at display time rather than storing a formatted string.

  3. 3

    Refresh the visible text on a schedule that matches its own granularity: something a few seconds old updates often, something two days old does not need to update at all.

  4. 4

    Cross over to an absolute date once relative wording stops helping. Anything older than about a week reads better as a real date than as a count of days.

  5. 5

    Do not run one global timer that re-renders every timestamp on the page each second. On a long feed that is a repeated layout cost for text that has not changed.

Edge cases it handles

7
  • Update intervals must follow the age of the value — a per-second tick on a timestamp measured in months is wasted work, and a per-minute tick on something seconds old reads as frozen.
  • There has to be a defined threshold at which relative wording gives way to an absolute date, because 'in 428 days' tells a reader nothing they can act on.
  • A device clock that is wrong, or a record written a moment ago on a server that is slightly ahead, will produce a timestamp in the future. Clamp small skew to 'just now' rather than printing a negative age.
  • The exact local time must be reachable, not just visible on hover. Put it in the element's accessible text and its title so keyboard and screen reader users get the same detail as a mouse user.
  • Time zone and locale come from the viewer, not the server, and a user who travels or changes their profile zone must see the new zone without a hard reload.
  • Boundaries like 'yesterday' and 'today' shift at local midnight, so a page left open overnight must not still be claiming that a two-day-old event happened today.
  • Durations and ranges are a different problem from ages — do not force a start-to-end span through the same wording.

Definition of done

8
  • Every rendered date and time in the app comes from the single shared component.
  • Relative text updates at an interval proportional to the value's age, with no global per-second re-render.
  • Values past the defined threshold render as absolute dates in the viewer's locale.
  • Timestamps slightly in the future render as 'just now' rather than as a negative or nonsensical age.
  • The precise local date and time are available to screen readers and keyboard users, not only on hover.
  • Zone and locale follow the viewer's settings and update when those settings change.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.