Chart Color Tokens
Make every chart in the app draw from one palette that stays readable for everyone.
What it adds
A token set covering series colours, fills, grid lines, axis and label text, and hover, selected, and muted states across the app's charts.
What your agent is told to do
5
What your agent is told to do
5-
1
Collect the colours currently hardcoded in the app's charts and reduce them to a categorical series scale, a sequential scale, a diverging scale, and a small set of neutrals for grid lines, axes, and labels.
-
2
Fix the assignment order of the categorical scale so the same series gets the same colour in every chart on the page and across reloads, keyed on the series identity rather than its index in the current filtered result.
-
3
Define interaction states as derived tokens — hover, selected, muted, and disabled — so a highlighted series is emphasised by dimming the others rather than by swapping in an unrelated colour.
-
4
Check every adjacent pair in the categorical scale for separation under the common colour-vision deficiencies and for contrast against both the light and dark chart backgrounds, and reorder or replace entries until they hold.
-
5
Do not treat colour as the only carrier of meaning. Pair it with a shape, dash pattern, or direct label; the textual alternative to the chart itself is owned by Accessible Chart Summary and should not be duplicated here.
Edge cases it handles
7
Edge cases it handles
7- Series must remain distinguishable to viewers with deuteranopia, protanopia, and tritanopia, so red against green and any pair separated only by hue at similar lightness has to go — vary lightness as well as hue.
- Semantic colours carry an assumption that is not universal: green for up and red for down inverts in some markets, and in a cost or emissions chart a rising line is bad news. Reserve semantic tokens for genuinely semantic quantities and use the neutral categorical scale for everything else.
- Colour alone cannot carry a series identity. Provide dash patterns or markers for lines, fill patterns or direct labels for areas and bars, so a printed or greyscale copy is still readable.
- A chart with more series than the palette holds must not wrap around and reuse colours, which silently implies two series are the same. Define an overflow behaviour — group the tail into an other bucket, or switch to a scale designed for many categories and add direct labels.
- A single-series chart should use one deliberate colour, not the first entry of the categorical scale by accident.
- Grid lines and axis labels need enough contrast to be read but must sit visually behind the data; give them their own neutral tokens rather than a transparency applied to a series colour.
- Charts exported as images take the theme they were rendered in, so a dark-theme export dropped into a light document must still be legible or must be re-rendered on a light background.
Definition of done
9
Definition of done
9- No chart in the app contains a hardcoded colour value.
- The same series renders in the same colour across every chart and across reloads.
- Every adjacent pair in the categorical scale is distinguishable under simulated colour-vision deficiency and in greyscale.
- Series carry a non-colour identifier as well as a colour.
- Hover, selected, and muted states are derived tokens applied consistently.
- Charts with more series than the palette follow a defined overflow rule rather than repeating colours.
- Grid lines, axes, and labels meet contrast requirements in both light and dark themes.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Data Table Cell Primitives
Data Table Cell Primitives
Render every kind of table cell the same way, wherever the table happens to be.
What it does
A shared set of cell renderers for numbers, dates, people, statuses, links, and row actions, used by every table in the app.
How it works
- 1 Catalogue the cell types the app's tables already render and reduce them to a small set: number and currency, date and relative time, person or avatar, status or badge, link or identifier, and an actions cell.
- 2 Separate each cell's underlying value from its presentation, so sorting, filtering, grouping, and export operate on the raw value while the user sees the formatted one.
- 3 Align and format numerically consistent cells the same way everywhere — figures right-aligned with tabular figures and a fixed precision per column, dates in the user's locale and time zone, currency with its code where more than one is possible.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/data-table-cell-primitives
Segment Event Forwarding
Segment Event Forwarding
Send one clean stream of product events to Segment and let it fan out downstream.
What it does
A documented event schema and a single forwarding path emitting track, identify, group, and page calls with consistent identity.
How it works
- 1 Write the event schema before writing any code: the exact set of event names, the properties each carries with their types, and the traits attached to a user and to an account. Every downstream tool inherits this schema, so a name chosen carelessly is expensive to change later.
- 2 Establish one identity model and apply it everywhere. Use a stable internal user identifier that never changes, associate the anonymous identifier from the first visit with it at signup, and attach the account or workspace so downstream tools can roll events up by customer.
- 3 Route every event through one internal emitter rather than calling the provider from feature code. That emitter validates the event against the schema, drops or flags anything unrecognised, and is the single place where identity and default properties are attached.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/segment-event-forwarding
Google Analytics Server Events
Google Analytics Server Events
Report confirmed outcomes to Google Analytics when browser tracking cannot be trusted.
What it does
Server-side delivery of completed conversions to Google Analytics, joined to the browser session and deduplicated against it.
How it works
- 1 Identify the outcomes the browser cannot see or reports unreliably — a payment confirmed by a webhook, a subscription that renewed, a signup completed after a redirect, anything blocked by an ad blocker — and send those from the server.
- 2 Capture the analytics client identifier from the browser when the visit begins, store it against the session or the record, and send it with the server event so the conversion joins the same session and campaign rather than appearing as a new anonymous visit.
- 3 Generate a stable event identifier at the moment the outcome happens and use it for both the browser and the server send, so the provider can collapse the pair into one event. Assign each event type a primary origin and treat the other as the fallback.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/google-analytics-server-events
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.