High-Contrast Theme
Offer a stronger-separation theme for users the default palette does not serve.
What it adds
An additional theme raising the separation between text, surfaces, borders, and every interactive state.
What your agent is told to do
5
What your agent is told to do
5-
1
Build the mode as another theme on the app's existing token layer so it inherits every component automatically. An override stylesheet layered on top will drift the moment a new component ships.
-
2
Raise non-text contrast alongside text: icon strokes, input borders, table rules, chart lines, focus rings, and the boundary between a card and the page all need to survive the change.
-
3
Keep focus, selection, hover, error, and disabled visually distinct from one another in the high-contrast theme. Cranking everything to maximum separation is a common way to make selected and focused look identical.
-
4
Detect and honour the operating system's forced-colours setting where it exists, and let the system palette win rather than fighting it with the app's own colours.
-
5
Do not reach for contrast by thickening borders alone. Heavier borders change the box size and reflow the layout, and they do nothing for the text sitting inside the box.
Edge cases it handles
7
Edge cases it handles
7- Focus, selection, and error must stay tellable apart, which means differing in more than intensity — position, thickness, and shape carry the distinction when colour has been pushed to its limits.
- The system forced-colours mode replaces the app's colours wholesale, so anything drawn with backgrounds, shadows, or gradients disappears there and needs a border or outline to remain visible.
- Thicker borders alone are not sufficient and are actively harmful when they shift layout; contrast must come from the colours themselves.
- Charts and icons must remain interpretable, which usually means direct labels and pattern fills rather than a legend keyed to twelve near-identical high-contrast hues.
- Images, logos, and screenshots carry their own contrast and cannot be themed — supply an alternative asset or a bounding outline so they do not float on the background.
- Shadows used as the only boundary between an overlay and the page vanish in high contrast; give every overlay a real border in this theme.
- The choice must persist per user and apply before first paint, or every reload flashes the default theme at the person least able to tolerate it.
Definition of done
8
Definition of done
8- The high-contrast mode is defined as a theme in the token layer and covers every component with no per-screen patching.
- Text and non-text elements both meet the raised contrast target, including borders, icons, and chart strokes.
- Focus, selection, hover, error, and disabled remain mutually distinguishable in the mode.
- The app renders correctly under the operating system's forced-colours setting.
- Every overlay and card has a visible boundary that does not depend on a shadow.
- The preference persists and is applied before the first paint.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Auto Captions
Auto Captions
Every uploaded video gets timed captions without anyone typing them out.
What it does
An automatic captioning pass over uploaded video that produces a timed caption track shown in the player.
How it works
- 1 Extend the app's existing Voice Transcription rather than adding a second speech pipeline. What is new here is timing, storage as a caption track, and player integration, not the recognition itself.
- 2 Run captioning as a background job triggered after the upload finishes, and reuse the app's existing job progress reporting so the user can see where a long file has got to.
- 3 Store the caption track as its own record linked to the media, with a language, a status, and a source marking it as machine-generated so a human correction can supersede it later.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/auto-captions
Accessible Name Validator
Accessible Name Validator
Find every control a screen reader announces as nothing useful.
What it does
An audit of the computed accessible name of each interactive element in the rendered interface.
How it works
- 1 Compute the name the way assistive technology does — following the resolution order through labels, referenced elements, attributes, and text content — rather than reading the source markup and guessing.
- 2 Report three separate failures: an empty name, a generic name such as button, link, or here, and duplicate names within the same context where several controls announce identically.
- 3 Prefer a fix that adds a visible label. A control given a hidden name is announced but still mysterious to the sighted user who cannot tell two identical icons apart.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/accessible-name-validator
Focus Ring System
Focus Ring System
Give every focusable control one clear focus indicator that belongs to the design.
What it does
A single focus treatment applied consistently across buttons, links, inputs, cards, rows, and custom controls.
How it works
- 1 Inventory every focusable element in the app, including the ones made focusable by hand — clickable rows, cards, canvas objects, custom selects — and confirm each shows the shared treatment.
- 2 Distinguish focus arriving from the keyboard from focus arriving from a click, and show the ring for keyboard and programmatic focus. A ring appearing on every mouse press reads as a rendering fault and invites someone to remove it entirely.
- 3 Compose the ring so it stays visible on every surface the control can sit on: page background, card, coloured button, dark toolbar, selected row. A single-colour ring will disappear against at least one of them.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/focus-ring-system
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.