Context Menu Primitive
Offer right-click actions as a shortcut to controls that are also visible elsewhere.
What it adds
A contextual menu bound to right-click and a keyboard equivalent, scoped to the item under the pointer.
What your agent is told to do
5
What your agent is told to do
5-
1
Identify the surfaces where a contextual menu genuinely helps — table rows, file and item grids, canvas objects, tree nodes — and leave the rest of the app to the browser's own menu.
-
2
Treat the context menu as an accelerator, never as the only route to an action. Every item in it must also be reachable from a visible control, because a right-click menu is undiscoverable and unavailable to many users.
-
3
Bind a keyboard equivalent that opens the menu for the currently focused item and positions it against that item rather than against the last pointer coordinates.
-
4
Build the menu's contents from the item actually targeted, and filter by the current user's permissions on that specific record before the menu opens.
-
5
Item navigation, typeahead, disabled handling, submenus, and dismissal are owned by the Dropdown Menu Primitive; this feature owns only the trigger, the target resolution, and the positioning at a point. Do not fork a second menu implementation.
Edge cases it handles
7
Edge cases it handles
7- There must be a keyboard route to the same menu — the context menu key and Shift-F10 on the focused item — otherwise the actions exist only for pointer users.
- The browser's own menu is the right answer in places, and suppressing it universally is hostile. Leave it in text inputs, on selected text, on links, and on images, where copy, paste, spellcheck, and save-image are what the user actually wants.
- Opened at the bottom or right edge of the window, the menu must flip back over the click point rather than extending beyond the viewport, and must never open partly off-screen on a second monitor arrangement.
- The menu must reflect permissions on the specific record targeted, not on the collection. A row the user may view but not delete must not offer Delete and then fail.
- Right-clicking a row inside a multi-selection should act on the whole selection, and right-clicking outside it should reset the selection to the clicked item — pick one rule and apply it everywhere.
- Long-press is the touch equivalent, and if it is implemented it must not fire during a scroll gesture or a drag.
- The menu must close when the underlying item is deleted or moved while it is open, rather than acting on a record that is no longer there.
Definition of done
9
Definition of done
9- Right-click opens a contextual menu only on the surfaces where it was deliberately added.
- Every action in a context menu is also reachable from a visible control.
- A keyboard shortcut opens the same menu for the focused item.
- The native browser menu still appears in text fields, on selected text, on links, and on images.
- The menu stays fully within the viewport when opened near any edge.
- Menu items reflect the current user's permissions on the targeted record.
- Item behaviour and dismissal are delegated to the dropdown menu primitive.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Avatar Group
Avatar Group
Show who is involved in a compact space without a pile of broken images.
What it does
A stacked set of member avatars with deterministic ordering, an overflow count, and access to the full list.
How it works
- 1 Find the places that show several people at once — assignees, collaborators, workspace members, comment participants — and render them through one grouped component.
- 2 Order the stack deterministically by a stable rule such as role then name, so the same group renders in the same order on every load and every device.
- 3 Cap the number shown and collapse the remainder into a single count that is announced meaningfully, not as a bare number sitting after a row of pictures.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/avatar-group
Screen Reader Only Utility
Screen Reader Only Utility
One tested way to add text for assistive technology without it appearing on screen.
What it does
A single visually hidden utility used for labels, instructions, and context that assistive technology needs and sighted users do not.
How it works
- 1 Find every place the app currently hides text from sight — off-screen positioning, zero dimensions, transparent colour, tiny font sizes, aria-label strings duplicating nearby copy — and consolidate them onto one utility.
- 2 Build it by clipping the element to nothing while keeping it rendered and in the accessibility tree: it must occupy no visual space and contribute nothing to layout, yet still be read in document order.
- 3 Provide a second variant that becomes visible when it receives focus, and use it for skip links and any other hidden content that is itself focusable.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/screen-reader-only-utility
Landmark Shell
Landmark Shell
Give every page the same navigable regions so people can jump straight to the content.
What it does
A reusable application shell providing labelled banner, navigation, main, complementary, and contentinfo regions on every route.
How it works
- 1 Find the layouts the app already renders and identify what each region actually is — the top bar, the primary navigation, the page body, any inspector or sidebar, the footer — then express them as landmarks once in the shell rather than per page.
- 2 Give the shell exactly one main region per rendered page, and make it the target of a skip link that is the first focusable thing in the document.
- 3 Label every landmark that appears more than once so they can be told apart — primary navigation, breadcrumb, pagination — using a short distinct name rather than the word navigation repeated.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/landmark-shell
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.