SEO Setup
Make your app findable — titles, meta, Open Graph, sitemap, robots.
What it adds
The baseline SEO and social-preview setup every public app should have, and most skip.
What your agent is told to do
5
What your agent is told to do
5-
1
Give every public page a unique, descriptive title and meta description. Find the app's layout and add a mechanism for each page to set them.
-
2
Add Open Graph and Twitter Card tags so shared links render a preview instead of a bare URL.
-
3
Generate a sitemap.xml covering every public, indexable page, and a robots.txt pointing at it.
-
4
Add canonical URLs to prevent duplicate-content splits.
-
5
Add structured data (JSON-LD) where the content has an obvious schema.org type.
Edge cases it handles
4
Edge cases it handles
4- Authenticated and private pages MUST be excluded from the sitemap and marked noindex. Leaking a private URL into a sitemap is a real breach.
- Staging and preview environments must be noindex — verify this; it is the most common SEO mistake.
- Paywalled pages need careful handling. Do not cloak.
- Trailing-slash and case variants must canonicalize to a single URL.
Definition of done
8
Definition of done
8- Every public page has a unique title and description.
- Shared links render a correct Open Graph preview.
- sitemap.xml lists only public, indexable pages.
- robots.txt is present and points at the sitemap.
- Private and staging pages are noindex and absent from the sitemap.
- Canonical URLs are set.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Design Token Linter
Design Token Linter
Find the hardcoded colours, spacings, and radii that drifted away from the token set.
What it does
A check over the app's styles and markup that reports raw colour, spacing, typography, radius, and shadow values where an approved token exists.
How it works
- 1 Read the app's existing token definitions as the source of truth for the check, so adding a token to the design system automatically widens what the linter recognises without a second list to maintain.
- 2 Scan every place a value can be written: stylesheets, style objects, inline style attributes, utility class strings, and component props that take a raw value.
- 3 Report the nearest matching token alongside each finding, with the difference, so a developer sees that a 15px gap is one pixel from an existing step and can decide rather than re-derive.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/design-token-linter
Multi-Model Routing
Multi-Model Routing
Send each AI request to the right model using rules you can read and test.
What it does
A deterministic routing layer that picks a model per request from task type, context size, latency budget, and data sensitivity.
How it works
- 1 Express routing as explicit, ordered rules over inputs the app can measure: task type, estimated context size, latency budget, and the sensitivity classification of the data involved. A rule set that can be read line by line can be reviewed and tested.
- 2 Make routing deterministic. The same inputs must always produce the same route, so a bad output can be reproduced and a rule change can be evaluated. Randomised or load-based selection turns every incident into guesswork.
- 3 Classify data before routing and refuse to route restricted content to any destination not approved for it. This check is a hard block, not a preference, and it must run before the request is assembled.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/multi-model-routing
Component Changelog
Component Changelog
Record what changed in the shared components so consumers are not surprised by a release.
What it does
A dated, per-component record of additions, visual changes, deprecations, and breaking interface changes, with migration notes.
How it works
- 1 Keep one changelog for the shared component layer and identify every entry by the component it affects, so a consumer can scan for the three components they use rather than reading the whole release.
- 2 Classify each entry by what it costs the consumer: a new component, a visual change that needs a look, a behavioural change that needs a test, a deprecation with a replacement, or a breaking interface change that needs work.
- 3 Write every deprecation with its replacement, the reason, and the release in which the old form stops working. A deprecation with no removal date is ignored indefinitely.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/component-changelog
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.