Font Subsetting
Load only the glyphs a page needs, without breaking the alphabets it did not expect.
What it adds
Per-script font subsets with declared character ranges and a fallback order for characters no subset covers.
What your agent is told to do
5
What your agent is told to do
5-
1
Inventory the weights, styles, and families the app genuinely renders. Most projects ship two or three weights they never use, and dropping those is a larger win than any subsetting.
-
2
Split each family by writing system and declare the character ranges each file covers, so a page that renders only Latin text never fetches the Cyrillic or Greek file.
-
3
Choose subsets from the locales the product supports and the languages its users actually write in, not from the words currently on the page.
-
4
Define the fallback chain explicitly and pick system fallbacks with similar metrics, so the swap from fallback to web font does not move the text under the reader's eye.
-
5
Do not subset by scanning the current copy for characters in use. Translations, user-generated names, and pasted content will contain characters that scan never saw, and those characters will render as empty boxes.
Edge cases it handles
7
Edge cases it handles
7- Subsets must be chosen by the language coverage the product commits to. A subset built from today's marketing copy will fail the first customer whose surname carries a diacritic outside it.
- A page mixing scripts — a Japanese comment under an English article, an Arabic name in a Latin table — must fetch each needed subset independently and render both correctly, with no visible mismatch in size or baseline between them.
- The same face requested under two URLs, or reachable through both a subset file and a full file, downloads twice. Confirm each face is served from one canonical source across every route.
- A character no loaded subset covers must fall through to a system font that has it, not render as a blank box. Decide and verify what happens for emoji, mathematical symbols, and rare punctuation.
- Decide deliberately whether text is invisible while the font loads or shown immediately in the fallback, and hold that decision consistently — an app that does both looks broken.
- A variable font carrying every weight may beat several static instances or may be far larger; measure the real files rather than assuming.
- Font declarations, preloads, and loading behaviour belong here; the Critical CSS Strategy brief owns what is inlined for first paint, and the two must not both inline the same font-face rules.
Definition of done
9
Definition of done
9- Only the weights and styles the app renders are shipped.
- Each family is split by writing system with declared character ranges.
- A page containing a single script fetches only that script's files.
- A mixed-language page renders every script correctly, each from its own subset.
- No face is downloaded twice under different URLs across the app.
- Characters outside every subset fall back to a system font that renders them rather than showing empty boxes.
- The fallback stack is metrically close enough that the swap causes no visible reflow.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Component Render Profiler
Component Render Profiler
Show which components re-render, what triggered it, and which of those actually cost anything.
What it does
A development-only instrument that records render counts, their causes, and their durations for the app's live screens.
How it works
- 1 Instrument the app's real screens rather than a test harness. Re-render problems come from the shape of actual data and actual state, and they do not reproduce on three sample rows.
- 2 Record for each render what changed to cause it, distinguishing a changed input, a state update in the component itself, and a shared value that changed above it.
- 3 Report duration alongside count, and sort by total time spent. A component that renders two hundred times cheaply matters less than one that renders four times and blocks the main thread each time.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/component-render-profiler
Layout Shift Guard
Layout Shift Guard
Stop content jumping as a page loads, and catch it when it starts happening again.
What it does
Reserved space for everything that arrives late, plus measurement that reports unexpected movement on the app's main screens.
How it works
- 1 Walk the app's main screens with the network throttled and note everything that moves after first paint. Images, avatars, embeds, banners, ad slots, and asynchronously loaded panels are the usual sources.
- 2 Give every image, video, iframe, and embed explicit dimensions or a fixed aspect ratio so its box exists before its content arrives, including the ones whose size comes from data.
- 3 Control the swap from fallback to web font so the two have compatible metrics, and accept a slightly imperfect fallback over a page that reflows once the real font lands.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/layout-shift-guard
Render Stability Guardrails
Render Stability Guardrails
Make render optimisation provable, so it removes work instead of introducing stale UI.
What it does
A set of rules and checks governing memoisation, keys, and render boundaries on the app's busiest views.
How it works
- 1 Profile a real interaction on a real view before changing anything, and write down the cost being removed. An optimisation with no measured baseline cannot be shown to have worked and cannot be safely reverted.
- 2 Require every cached callback and derived value to declare each value it reads, and treat a missing declaration as a defect — a handler holding last render's values will act on data the user can no longer see.
- 3 Derive list keys from the stable identity of the record. A position-based key silently reuses the wrong element as soon as the list is sorted, filtered, or has an item removed from the middle.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/render-stability-guardrails
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.