Customizable Dashboard Widgets
Let people arrange the panels that matter to them.
What it adds
A widget system with a catalog, add and remove, drag-to-arrange layout, and persisted per-user layouts that survive permission and data changes.
What your agent is told to do
6
What your agent is told to do
6-
1
Define a widget contract — identifier, title, size constraints, required permissions, and configuration schema — and register every widget against it.
-
2
Give users a catalog to add from, removal, and rearranging, with the layout saved per user.
-
3
Persist layout per breakpoint, or persist one layout and define deterministic reflow rules for narrow screens. Do not save absolute positions and hope they still make sense on a phone.
-
4
Revalidate every widget on load against current permissions and data. A widget the user can no longer see must be removed or shown as unavailable, never rendered with someone else's numbers.
-
5
Put a ceiling on cost: cap concurrent expensive widgets, load them lazily below the fold, and give each one its own error boundary.
-
6
Do NOT implement metric computation, pre-aggregation, date ranges, or chart accessibility here — those are owned by Analytics Dashboard. Generic list and table preference storage is owned by Persistent View Preferences. Widgets consume those; they do not reimplement them.
Edge cases it handles
7
Edge cases it handles
7- A widget removed from the catalog in a later release will still appear in saved layouts — handle the unknown identifier instead of crashing the dashboard.
- A widget whose underlying data source is deleted must degrade to an unavailable tile, not an error page.
- Overlapping or off-grid tiles after a resize must be reflowed deterministically; two users on the same layout must see the same result.
- One slow widget must not block the rest of the dashboard from rendering.
- Always offer a reset to the default layout — it is the only recovery when a saved layout is unusable.
- An empty dashboard needs a real empty state pointing at the catalog, not blank space.
- Layouts saved by one user and cloned to another must be re-validated against the second user's permissions before rendering.
Definition of done
8
Definition of done
8- Users can add, remove, and rearrange widgets, and the layout persists across sessions and devices.
- Widget configuration is revalidated against current permissions and data on every load.
- No layout produces overlapping or unreachable widgets at any supported width.
- Expensive widgets are capped, lazily loaded, and individually error-bounded.
- A reset-to-default action exists and works from a broken layout.
- Metric computation and chart rendering are deferred to Analytics Dashboard.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
UI Event Naming Schema
UI Event Naming Schema
Give every tracked interaction a name that still means the same thing in a year.
What it does
A documented vocabulary and structure for event names and properties, applied across the app's existing tracking.
How it works
- 1 Audit the events the app already sends and list them. The duplicates, the near-synonyms, and the ones nobody can explain are the reason the schema is needed, and they are also the migration list.
- 2 Fix a structure of object, action, and context: what was acted on, what happened to it, and where. Fix a closed set of actions — viewed, clicked, opened, submitted, selected, failed — and require every new event to reuse one of them.
- 3 Keep variable detail in properties, never in the name. A record identifier, a plan name, or a workspace slug baked into an event name produces thousands of unaggregatable one-off events.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/ui-event-naming-schema
Amplitude Event Tracking
Amplitude Event Tracking
Send behavioural events to Amplitude with stable users, devices, and account grouping.
What it does
A server-side pipeline that forwards behavioural events, user properties, and account-level groupings to Amplitude.
How it works
- 1 Identify the behaviours worth measuring and emit them from one place in the application layer, so that the set of events is readable in a single file rather than inferred by grepping the codebase.
- 2 Establish the identity model before writing any send code: what identifies a signed-in user, what identifies a device or anonymous session, and how the two are stitched at sign-up and sign-in.
- 3 Map the app's own tenancy — workspace, organisation, or team — onto Amplitude's group concept, and derive it from the record the event belongs to rather than from whatever context the request happened to carry.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/amplitude-event-tracking
Component Analytics Hook
Component Analytics Hook
Instrument shared components once instead of hand-writing events on every screen.
What it does
Interaction tracking attached to the app's shared components, emitting named events carrying the context of where they were used.
How it works
- 1 Identify the shared components that account for most interaction — buttons, links, menus, dialogs, tabs, table rows, form submits — and attach tracking inside them rather than at each of the hundreds of call sites.
- 2 Have each component emit its own identity and the context it was rendered in: the screen, the surface, and a stable identifier supplied by the caller. Position on the page and visible label are not identity.
- 3 Emit exactly one event per user action. A menu item inside a card inside a table row must not produce three overlapping records of the same click.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/component-analytics-hook
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.