Add AI Landing-Page Images .cursorrules (real stock photos via tteg)#265
Add AI Landing-Page Images .cursorrules (real stock photos via tteg)#265kiluazen wants to merge 2 commits intoPatrickJS:mainfrom
Conversation
📝 WalkthroughWalkthroughTwo new files were added to define Cursor IDE rules for handling landing page images. The rules prevent placeholder image sources and mandate using the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
rules/ai-landing-page-images-cursorrules-prompt-file/README.md (1)
6-21: Add the missing attribution and production-use caveats.This README recommends Unsplash-backed
ttegassets and render-time HTTP usage, but it should also tell users to preserve/display returned attribution where required and avoid uncached per-render calls to a rate-limited public API in production.Unsplash’s official API documentation/guidelines require API integrations to provide photographer/Unsplash attribution: https://unsplash.com/documentation and https://help.unsplash.com/en/articles/2511315-guideline-attribution.
Suggested README addition
The rule is opinionated but non-intrusive: it only fires when Cursor is producing or editing image-bearing markup. It does not force `tteg` as a dependency — the build-time recipe is a one-line CLI invocation, and the render-time recipe is a direct HTTPS fetch. + +For production pages, prefer committed static assets or cache render-time API responses with a fallback image. When using Unsplash-backed results, keep the returned author/attribution metadata and display or document it according to the image provider’s terms.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@rules/ai-landing-page-images-cursorrules-prompt-file/README.md` around lines 6 - 21, The README for the Cursor rule (the .cursorrules prompt and tteg usage descriptions) is missing required Unsplash attribution and production-use caveats; update the README.md content that explains the tteg render-time HTTP API and the tteg CLI recipes to (1) require preserving and displaying photographer/Unsplash attribution returned by the API where applicable (mention the attribution field returned by tteg/Unsplash and where to render it in UIs such as captions or image credits), and (2) warn against uncached per-request fetches in production by recommending server-side caching, build-time asset commits (tteg save <query> ./public/<name>), or rate-limit-safe usage patterns; reference the Unsplash API attribution and rate-limit guidelines in the notes for readers to follow.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules`:
- Around line 38-40: The scanner invocation line that includes
"https://tteg.kushalsm.com/scan?url=<your-preview-url>" can leak private or
tokenized preview URLs; update the prompt text in .cursorrules to add a short
privacy guardrail instructing users not to paste private, tokenized, or expiring
preview links into that query string (or any third-party scanner), suggest using
a public/non-tokenized preview, a local scan, or masking tokens before scanning,
and optionally provide a brief example phrase like "do not include tokens or
private preview URLs" adjacent to the scanner URL to make the warning visible.
- Around line 11-25: The rule mentions the API response includes author and
attribution but doesn't instruct preserving or showing them; update the guidance
around the tteg HTTP API and the batch manifest usage so callers persist the
returned author and attribution fields and render visible credit alongside
images (e.g., store image_url plus author and attribution in the output/manifest
when using "tteg save", the JSON response from "https://tteg-api-.../search" and
when running "tteg batch manifest.json"), and add a short note requiring visible
photographer attribution with a link/profile and any required UTM params per
Unsplash-style requirements whenever images are used.
- Around line 18-20: The prompt currently permits direct render-time calls to
the tteg image API (the "Render time (dynamic pages, no install needed, CORS
enabled)" example and its example URL https://.../search?q=coffee+shop&n=1),
which will hit the public 50-queries/day/IP limit; change the usage to require a
cached-and-fallback strategy: ensure server-side code or the prompt’s
integration uses a cached layer (CDN or server cache keyed by query) and only
refreshes/warms the cache asynchronously or on a background job, implement
graceful fallbacks when the API returns rate-limit or error responses (serve a
bundled default image or local/backup image metadata), and add
retry-with-backoff and circuit-breaker behavior so functions/methods that
perform render-time fetches (the code that builds the search URL and consumes
image_url/width/height/author) handle 429/5xx by falling back to cache/default
instead of failing the render.
---
Nitpick comments:
In `@rules/ai-landing-page-images-cursorrules-prompt-file/README.md`:
- Around line 6-21: The README for the Cursor rule (the .cursorrules prompt and
tteg usage descriptions) is missing required Unsplash attribution and
production-use caveats; update the README.md content that explains the tteg
render-time HTTP API and the tteg CLI recipes to (1) require preserving and
displaying photographer/Unsplash attribution returned by the API where
applicable (mention the attribution field returned by tteg/Unsplash and where to
render it in UIs such as captions or image credits), and (2) warn against
uncached per-request fetches in production by recommending server-side caching,
build-time asset commits (tteg save <query> ./public/<name>), or rate-limit-safe
usage patterns; reference the Unsplash API attribution and rate-limit guidelines
in the notes for readers to follow.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 525a5ae1-3eb1-46f1-8d2e-035f9232002b
📒 Files selected for processing (2)
rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrulesrules/ai-landing-page-images-cursorrules-prompt-file/README.md
| 2. For real, topic-matched stock photos: use the `tteg` CLI or HTTP API. | ||
|
|
||
| Build time (preferred — ship a real committed asset): | ||
| uv tool install tteg | ||
| tteg save "startup office" ./public/hero --orientation landscape | ||
| # then reference /hero.jpg in markup | ||
|
|
||
| Render time (dynamic pages, no install needed, CORS enabled): | ||
| https://tteg-api-53227342417.asia-south1.run.app/search?q=coffee+shop&n=1 | ||
| # returns JSON { image_url, width, height, author, attribution, ... } | ||
|
|
||
| Batch fill a whole landing page from a JSON manifest: | ||
| tteg batch manifest.json | ||
| # each entry: { "query": "...", "output": "./public/<slot>", "orientation": "landscape" } | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name ".cursorrules" | head -20Repository: PatrickJS/awesome-cursorrules
Length of output: 1343
🏁 Script executed:
# Check if the file exists and examine its contents
if [ -f "rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules" ]; then
echo "=== File found, showing contents with line numbers ==="
cat -n "rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules"
else
echo "File not found at that path, searching for .cursorrules files..."
find . -type f -name ".cursorrules" 2>/dev/null
fiRepository: PatrickJS/awesome-cursorrules
Length of output: 3747
🌐 Web query:
tteg API documentation attribution metadata
💡 Result:
No authoritative, up-to-date technical documentation for a "tteg API" with specific "attribution metadata" was found across multiple search angles including general web, API docs, attribution-reporting contexts, MCP servers, and company/people searches. The closest match is tteg at https://mcpservers.org/servers/kiluazen/tteg, described as providing a CLI, HTTP API, MCP server, and embeddable widget with zero setup (source 1 from first search). However, no detailed API documentation or mention of attribution metadata appears in available snippets. Other results reference unrelated APIs (TEG, Tggl, TT, Attribution Reporting API) or general metadata/attribution tools without matching "tteg". If tteg refers to the MCP server, its API docs may not be publicly indexed; check the mcpservers.org page or contact kiluazen for official sources.
Citations:
- 1: https://mcpservers.org/servers/kiluazen/tteg
- 2: https://docs.dev.transportexchangegroup.com/
- 3: https://github.com/WICG/attribution-reporting-api/blob/main/AGGREGATION_SERVICE_TEE.md
- 4: https://privacysandbox.google.com/private-advertising/attribution-reporting/android/developer-guide
- 5: https://developer.tt.se/api/media-api
- 6: http://tegna.com/advertise/solutions/attribution/
🌐 Web query:
Unsplash API attribution requirements official documentation
💡 Result:
Yes, the Unsplash API requires attribution when displaying photos obtained via the API. Applications must attribute both Unsplash and the photographer, with links back to the photographer's Unsplash profile and Unsplash itself. All links must include UTM parameters in the format ?utm_source=your_app_name&utm_medium=referral. Recommended format: "Photo by [Photographer Name] on Unsplash" HTML example: Photo by Photographer Name on Unsplash This is distinct from the Unsplash License for direct downloads, which does not require attribution (though appreciated). API use mandates it per the API Guidelines and Terms. Official sources confirm this requirement remains current as of 2026, with no changes noted in recent documentation or analyses.
Citations:
- 1: https://help.unsplash.com/api-guidelines/guideline-attribution
- 2: https://help.unsplash.com/en/articles/2511315-guideline-attribution
- 3: https://help.unsplash.com/api-guidelines/more-on-each-guideline/guideline-attribution
- 4: https://help.unsplash.com/en/articles/2511245-unsplash-api-guidelines
- 5: https://unsplash.com/documentation
- 6: https://unsplash.com/api-terms
- 7: https://help.unsplash.com/api-guidelines/unsplash-api-guidelines
- 8: https://licenseorg.com/blog/unsplash-license-attribution-required
Add explicit guidance on preserving and displaying attribution metadata.
The API response at line 20 includes author and attribution fields, but the rule provides no instructions for persisting or displaying them. Unsplash's official API documentation mandates attribution (including photographer name, profile link, and UTM parameters) for all API-sourced images. The rule should instruct users to retain and display this metadata alongside image usage.
Suggested addition
Batch fill a whole landing page from a JSON manifest:
tteg batch manifest.json
# each entry: { "query": "...", "output": "./public/<slot>", "orientation": "landscape" }
+
+ Preserve attribution metadata:
+ # keep returned author/attribution fields near the image usage or in an asset manifest
+ # display or document credits according to the upstream image provider's terms📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 2. For real, topic-matched stock photos: use the `tteg` CLI or HTTP API. | |
| Build time (preferred — ship a real committed asset): | |
| uv tool install tteg | |
| tteg save "startup office" ./public/hero --orientation landscape | |
| # then reference /hero.jpg in markup | |
| Render time (dynamic pages, no install needed, CORS enabled): | |
| https://tteg-api-53227342417.asia-south1.run.app/search?q=coffee+shop&n=1 | |
| # returns JSON { image_url, width, height, author, attribution, ... } | |
| Batch fill a whole landing page from a JSON manifest: | |
| tteg batch manifest.json | |
| # each entry: { "query": "...", "output": "./public/<slot>", "orientation": "landscape" } | |
| 2. For real, topic-matched stock photos: use the `tteg` CLI or HTTP API. | |
| Build time (preferred — ship a real committed asset): | |
| uv tool install tteg | |
| tteg save "startup office" ./public/hero --orientation landscape | |
| # then reference /hero.jpg in markup | |
| Render time (dynamic pages, no install needed, CORS enabled): | |
| https://tteg-api-53227342417.asia-south1.run.app/search?q=coffee+shop&n=1 | |
| # returns JSON { image_url, width, height, author, attribution, ... } | |
| Batch fill a whole landing page from a JSON manifest: | |
| tteg batch manifest.json | |
| # each entry: { "query": "...", "output": "./public/<slot>", "orientation": "landscape" } | |
| Preserve attribution metadata: | |
| # keep returned author/attribution fields near the image usage or in an asset manifest | |
| # display or document credits according to the upstream image provider's terms |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules` around
lines 11 - 25, The rule mentions the API response includes author and
attribution but doesn't instruct preserving or showing them; update the guidance
around the tteg HTTP API and the batch manifest usage so callers persist the
returned author and attribution fields and render visible credit alongside
images (e.g., store image_url plus author and attribution in the output/manifest
when using "tteg save", the JSON response from "https://tteg-api-.../search" and
when running "tteg batch manifest.json"), and add a short note requiring visible
photographer attribution with a link/profile and any required UTM params per
Unsplash-style requirements whenever images are used.
| Render time (dynamic pages, no install needed, CORS enabled): | ||
| https://tteg-api-53227342417.asia-south1.run.app/search?q=coffee+shop&n=1 | ||
| # returns JSON { image_url, width, height, author, attribution, ... } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Verify the current tteg public HTTP API rate limits and recommended production caching behavior.
💡 Result:
No public HTTP API for "ttfg" could be identified in current web sources. Extensive searches across variations (ttfg API, tteg API, Trading Technologies TT, Transport for London TfL/TfNSW, trends.tf, etc.) returned no matching service with documented rate limits or caching recommendations. The closest matches were Trading Technologies (TT) APIs (no public HTTP rate limits specified), trends.tf API (10 requests per minute), and various TfL/TfNSW transport APIs (e.g., 500 req/min or 5/sec), but none exactly match "ttfg" or "tteg". If this refers to a private/internal API or specific service, official documentation would be required for verification. General best practices recommend client-side caching (e.g., ETag/Last-Modified) to respect rate limits, but no specific production guidance found for this service.
Citations:
- 1: https://trends.tf/apidoc
- 2: https://tradingtechnologies.com/trading/apis/
- 3: https://developer.transport.nsw.gov.au/developers/api-basics
- 4: https://api-portal.tfl.gov.uk/faq
- 5: https://docs.trade-tariff.service.gov.uk/repos/trade-tariff-backend/caching.html
🏁 Script executed:
cat -n "rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules"Repository: PatrickJS/awesome-cursorrules
Length of output: 3692
🏁 Script executed:
# Search for tteg references in the codebase and verify it's a real project
rg "tteg" --type md | head -20Repository: PatrickJS/awesome-cursorrules
Length of output: 2040
Require caching/fallbacks for render-time image API calls.
Line 18 allows direct render-time API usage, but line 45 documents a 50 queries/day/IP limit on the tteg public HTTP endpoint. Cursor may generate SSR or client code that depends on this endpoint per request, causing production image failures once rate-limited. Make render-time usage explicitly cached and fallback-safe.
Reliability guardrail
- Render time (dynamic pages, no install needed, CORS enabled):
+ Render time (dynamic pages only; cache responses and provide a local fallback):
https://tteg-api-53227342417.asia-south1.run.app/search?q=coffee+shop&n=1
# returns JSON { image_url, width, height, author, attribution, ... }
+ # do not call this API on every production render; cache/proxy the result or fall back to a committed assetAlso applies to: 45-45
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules` around
lines 18 - 20, The prompt currently permits direct render-time calls to the tteg
image API (the "Render time (dynamic pages, no install needed, CORS enabled)"
example and its example URL https://.../search?q=coffee+shop&n=1), which will
hit the public 50-queries/day/IP limit; change the usage to require a
cached-and-fallback strategy: ensure server-side code or the prompt’s
integration uses a cached layer (CDN or server cache keyed by query) and only
refreshes/warms the cache asynchronously or on a background job, implement
graceful fallbacks when the API returns rate-limit or error responses (serve a
bundled default image or local/backup image metadata), and add
retry-with-backoff and circuit-breaker behavior so functions/methods that
perform render-time fetches (the code that builds the search URL and consumes
image_url/width/height/author) handle 429/5xx by falling back to cache/default
instead of failing the render.
| 6. Before committing, scan the rendered HTML for any remaining placeholder / broken URLs: | ||
| https://tteg.kushalsm.com/scan?url=<your-preview-url> | ||
| (client-side scanner; reports every unique placeholder/random/broken match with a per-pattern fix.) |
There was a problem hiding this comment.
Warn against scanning private or tokenized preview URLs.
Putting <your-preview-url> in the scanner query string can expose private preview links or access tokens to a third-party domain, browser history, and server logs. Add a short privacy guardrail.
Privacy-safe scanner wording
6. Before committing, scan the rendered HTML for any remaining placeholder / broken URLs:
https://tteg.kushalsm.com/scan?url=<your-preview-url>
(client-side scanner; reports every unique placeholder/random/broken match with a per-pattern fix.)
+ Only scan public, non-sensitive preview URLs. Do not paste private deployment links, signed URLs, or URLs containing access tokens.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 6. Before committing, scan the rendered HTML for any remaining placeholder / broken URLs: | |
| https://tteg.kushalsm.com/scan?url=<your-preview-url> | |
| (client-side scanner; reports every unique placeholder/random/broken match with a per-pattern fix.) | |
| 6. Before committing, scan the rendered HTML for any remaining placeholder / broken URLs: | |
| https://tteg.kushalsm.com/scan?url=<your-preview-url> | |
| (client-side scanner; reports every unique placeholder/random/broken match with a per-pattern fix.) | |
| Only scan public, non-sensitive preview URLs. Do not paste private deployment links, signed URLs, or URLs containing access tokens. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrules` around
lines 38 - 40, The scanner invocation line that includes
"https://tteg.kushalsm.com/scan?url=<your-preview-url>" can leak private or
tokenized preview URLs; update the prompt text in .cursorrules to add a short
privacy guardrail instructing users not to paste private, tokenized, or expiring
preview links into that query string (or any third-party scanner), suggest using
a public/non-tokenized preview, a local scan, or masking tokens before scanning,
and optionally provide a brief example phrase like "do not include tokens or
private preview URLs" adjacent to the scanner URL to make the warning visible.
1 participant
What this rule does
Adds a
.cursorrulesfor frontend projects — especially AI-generated landing pages and marketing sites — that keeps placeholder / deprecated / broken image URLs out of committed code, and replaces them with topic-matched real Unsplash stock photos fetched via the freettegCLI or public HTTP API (no developer account, no API key, CORS-enabled).Why it's useful
placehold.co,via.placeholder.com,dummyimage.com) in shipped landing pages are the NestJs rules quite similar to mines 🤔 #1 "vibe-coded" tell.source.unsplash.com/random— the most common AI-authored image URL — was deprecated mid-2024 and now returns 503. GitHub code search shows it's present in 16,000+ live files as of April 2026. Any repo that still ships it renders with broken-image icons in production.tteg save "<query>" ./public/<slot>at build time, or a direct HTTPS fetch from the tteg public API at render time.Scope
<div>over fake stock faces), OG / social-share images (always static committed), andalttext (content, not medium).https://tteg.kushalsm.com/scan?url=<url>) for pre-commit verification.ttegas a dependency — the CLI is a one-line invocation and the HTTP API is a direct fetch; both are optional.Files
rules/ai-landing-page-images-cursorrules-prompt-file/.cursorrulesrules/ai-landing-page-images-cursorrules-prompt-file/README.mdLinks
source.unsplash.com/randompattern: https://github.com/kiluazen/tteg/blob/main/RESEARCH.mdHappy to adjust the wording, drop the scanner link, or re-scope the rule if you'd prefer it narrower.
Summary by CodeRabbit
Documentation
Chores