Date and Time Display Component
Render every date and time through one component so none of them are ambiguous.
What it adds
A single shared way of displaying dates and times, covering absolute format, time zone, and optional relative phrasing.
What your agent is told to do
5
What your agent is told to do
5-
1
Find every place the app renders a date or a time — tables, activity feeds, audit logs, exports, emails, tooltips — and route them all through one display path rather than formatting at each call site.
-
2
Never render an all-numeric date whose day and month could be swapped. Spell or abbreviate the month, or use an unambiguous ordering consistently, because a reader has no way to tell 04/07 from 07/04.
-
3
State the time zone whenever the value is a specific moment rather than a calendar day, and be explicit about whose zone it is — the viewer's, the record's, or the account's — rather than leaving it implied.
-
4
Where a relative phrase is shown, keep the exact timestamp reachable on hover, on focus, and to assistive technology, so nobody has to guess what two months ago means.
-
5
Do not compute relative phrasing during server rendering. The server and the browser will disagree about now, producing a mismatch on hydration and a value that is already wrong when it reaches the page.
Edge cases it handles
7
Edge cases it handles
7- All-numeric dates are read differently in different regions, and a date that could be either is worse than a longer one that is clear.
- A missing, null, or unparseable value must render a defined placeholder rather than an error string or a date at the epoch, and a timestamp in the future must not be phrased as though it has already happened.
- Relative phrasing misleads at both extremes: last week is fine, three years ago on a legal record is not. Use absolute format past a defined threshold and always keep the exact value available.
- Server-rendered output must be stable and identical to the first client render; anything depending on the current time has to settle after mount.
- A date-only value has no time zone and must not be shifted by one. Converting a birthday or an invoice date into the viewer's zone moves it by a day.
- Relative labels must update while the page stays open, without a timer per row on a long list.
- Numeric quantities, counts, and percentages are handled by Number Formatting Component; this component owns only temporal values.
Definition of done
8
Definition of done
8- Every date and time in the app renders through the shared component.
- No displayed date can be read as two different calendar dates.
- Moments in time carry an explicit time zone and a stated frame of reference.
- The exact timestamp is available wherever a relative phrase is shown, including to screen readers.
- Null, invalid, and future values render defined states rather than errors or nonsense.
- Server-rendered and client-rendered output match on first paint.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Feedback Widget
Feedback Widget
Let anyone report a bug or send a comment from the page they are looking at.
What it does
An always-available launcher that opens a short feedback form and submits it with page context attached.
How it works
- 1 Put a single persistent launcher in one corner of the app and open a compact form in place. Do not route the user to a separate feedback page and lose the context they were about to describe.
- 2 Attach the current URL, the app version, the viewport size, the signed-in account, and a short trail of recent client errors automatically, so the reporter does not have to describe where they were.
- 3 Show the captured context to the user before they send it, in a collapsible section, and let them remove it. Silent collection of screen state is a trust problem.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/feedback-widget
Interactive Transcript
Interactive Transcript
Put the transcript next to the player so clicking any line jumps playback to that moment.
What it does
A time-aligned transcript panel beside the audio or video player, with click-to-seek, a moving highlight, and in-transcript search.
How it works
- 1 Render the transcript from the timestamps the app already stores. If Voice Transcription exists, extend its output and its data model rather than producing a second transcript with its own timings.
- 2 Make every line a real seek target: clicking or pressing enter on a line moves playback to that time and keeps focus where the user left it.
- 3 Highlight the line currently being spoken and keep it in view as playback advances, using the player's own time updates rather than a separate timer.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/interactive-transcript
Permission-Aware Action
Permission-Aware Action
Decide once how a control behaves when the user is not allowed to use it.
What it does
A shared wrapper for buttons, menu items, and links that resolves visibility, disabled state, and the reason a user cannot proceed.
How it works
- 1 Inventory every action in the app that any role can be denied, and give each one a named capability rather than scattering role comparisons through the components that render it.
- 2 Pick one of three treatments per action and record the choice: hide it, show it disabled with a reason, or show it enabled and let the attempt fail into an upgrade or request-access path. Defaulting everything to hidden makes the product look smaller than it is.
- 3 Whenever an action is disabled, say why in words the user can act on — the role that is required, the prerequisite that is missing, the plan limit that has been reached — and where possible offer the next step.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/permission-aware-action
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
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.