Skip to content

Commit 314b28a

Browse files
CaldisCaldis
committed
docs: clarify agent integration guidance
1 parent 610c15c commit 314b28a

25 files changed

Lines changed: 160 additions & 108 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ import 'react-zmage/style.css'
5555

5656
Peer deps: `react@>=16.8 <20` and `react-dom@>=16.8 <20`. The library auto-detects React 18+ at runtime and uses `react-dom/client` when available — consumers configure nothing.
5757

58+
AI agents should read [`https://zmage.caldis.me/llms.txt`](https://zmage.caldis.me/llms.txt) first, then keep basic integrations minimal.
59+
5860
---
5961

6062
## Three ways to use it

‎README.zh-CN.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ import 'react-zmage/style.css'
5555

5656
Peer deps：`react@>=16.8 <20`、`react-dom@>=16.8 <20`。库内部用运行时 feature detection 自动选择 mount API（React 18+ 用 `react-dom/client`），消费方无需配置。
5757

58+
AI Agent 应先阅读 [`https://zmage.caldis.me/llms.txt`](https://zmage.caldis.me/llms.txt)，然后保持基础接入最小化。
59+
5860
---
5961

6062
## 三种调用方式

‎docs/404.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<meta name="robots" content="noindex,follow" />
1313
<meta name="theme-color" content="#0a0a0a" />
1414
<link rel="canonical" href="https://zmage.caldis.me/" />
15+
<link rel="alternate" type="text/plain" title="llms.txt" href="/llms.txt" />
1516

1617
<!-- Open Graph -->
1718
<meta property="og:title" content="react-zmage - Page Not Found" />
@@ -124,7 +125,7 @@
124125
document.documentElement.classList.toggle('dark', theme === 'dark')
125126
} catch {}
126127
</script>
127-
<script type="module" crossorigin src="/assets/index-CQiBoPoR.js"></script>
128+
<script type="module" crossorigin src="/assets/index-C9w518gv.js"></script>
128129
<link rel="stylesheet" crossorigin href="/assets/index-p0yuVz9t.css">
129130
</head>
130131
<body>
@@ -138,7 +139,7 @@ <h1 style="font-size: 36px; line-height: 1.15; margin: 0 0 16px;">react-zmage pa
138139
<a href="/playground" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Playground</a>
139140
<a href="/playground/wrapper" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Wrapper playground</a>
140141
<a href="/use-cases" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Use cases</a>
141-
<a href="/ai" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">AI prompt</a>
142+
<a href="/ai" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">AI install guide</a>
142143
<a href="https://github.com/Caldis/react-zmage" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">GitHub</a>
143144
</nav>
144145
</main>

‎docs/ai/index.html‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,27 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77

8-
<title>react-zmage Agent Prompt - Integrate React Image Preview with AI</title>
9-
<meta name="description" content="Generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
8+
<title>react-zmage AI Install Guide - Agent Integration and llms.txt</title>
9+
<meta name="description" content="Read llms.txt and generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
1010
<meta name="keywords" content="react image viewer, react image zoom, react lightbox, react image preview, origin expand, fullscreen image viewer, rich text image preview, react-zmage" />
1111
<meta name="author" content="Caldis" />
1212
<meta name="robots" content="index,follow" />
1313
<meta name="theme-color" content="#0a0a0a" />
1414
<link rel="canonical" href="https://zmage.caldis.me/ai" />
15+
<link rel="alternate" type="text/plain" title="llms.txt" href="/llms.txt" />
1516

1617
<!-- Open Graph -->
17-
<meta property="og:title" content="react-zmage Agent Prompt - Integrate React Image Preview with AI" />
18-
<meta property="og:description" content="Generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
18+
<meta property="og:title" content="react-zmage AI Install Guide - Agent Integration and llms.txt" />
19+
<meta property="og:description" content="Read llms.txt and generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
1920
<meta property="og:type" content="website" />
2021
<meta property="og:url" content="https://zmage.caldis.me/ai" />
2122
<meta property="og:image" content="https://zmage.caldis.me/logo.png" />
2223
<meta property="og:site_name" content="react-zmage" />
2324

2425
<!-- Twitter card -->
2526
<meta name="twitter:card" content="summary_large_image" />
26-
<meta name="twitter:title" content="react-zmage Agent Prompt - Integrate React Image Preview with AI" />
27-
<meta name="twitter:description" content="Generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
27+
<meta name="twitter:title" content="react-zmage AI Install Guide - Agent Integration and llms.txt" />
28+
<meta name="twitter:description" content="Read llms.txt and generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface." />
2829
<meta name="twitter:image" content="https://zmage.caldis.me/logo.png" />
2930

3031
<!-- hreflang (single canonical URL; client-side i18n switches copy after load) -->
@@ -54,8 +55,8 @@
5455
"@type": "WebPage",
5556
"@id": "https://zmage.caldis.me/ai#webpage",
5657
"url": "https://zmage.caldis.me/ai",
57-
"name": "react-zmage Agent Prompt - Integrate React Image Preview with AI",
58-
"description": "Generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface.",
58+
"name": "react-zmage AI Install Guide - Agent Integration and llms.txt",
59+
"description": "Read llms.txt and generate a concise agent prompt for adding react-zmage to an existing React, Next.js, CMS, MDX, or rich text image surface.",
5960
"isPartOf": {
6061
"@id": "https://zmage.caldis.me/#website"
6162
},
@@ -103,7 +104,7 @@
103104
{
104105
"@type": "ListItem",
105106
"position": 2,
106-
"name": "react-zmage agent prompt",
107+
"name": "react-zmage AI install guide",
107108
"item": "https://zmage.caldis.me/ai"
108109
}
109110
]
@@ -130,21 +131,21 @@
130131
document.documentElement.classList.toggle('dark', theme === 'dark')
131132
} catch {}
132133
</script>
133-
<script type="module" crossorigin src="/assets/index-CQiBoPoR.js"></script>
134+
<script type="module" crossorigin src="/assets/index-C9w518gv.js"></script>
134135
<link rel="stylesheet" crossorigin href="/assets/index-p0yuVz9t.css">
135136
</head>
136137
<body>
137138
<div id="app">
138139
<main data-seo-fallback style="max-width: 760px; margin: 72px auto; padding: 0 24px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif; line-height: 1.65; color: #f5f5f5; background: #0a0a0a;">
139-
<h1 style="font-size: 36px; line-height: 1.15; margin: 0 0 16px;">react-zmage agent prompt</h1>
140-
<p style="font-size: 18px; margin: 0 0 24px; color: #d4d4d4;">Generate a short prompt that tells a coding agent how to inspect your project and integrate react-zmage with the right usage mode.</p>
140+
<h1 style="font-size: 36px; line-height: 1.15; margin: 0 0 16px;">react-zmage AI install guide</h1>
141+
<p style="font-size: 18px; margin: 0 0 24px; color: #d4d4d4;">Read llms.txt or generate a short prompt that tells a coding agent how to inspect your project and integrate react-zmage with the right usage mode.</p>
141142
<nav aria-label="react-zmage links" style="display: flex; flex-wrap: wrap; gap: 12px;">
142143
<a href="/" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Home</a>
143144
<a href="/docs" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Docs</a>
144145
<a href="/playground" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Playground</a>
145146
<a href="/playground/wrapper" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Wrapper playground</a>
146147
<a href="/use-cases" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">Use cases</a>
147-
<a href="/ai" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">AI prompt</a>
148+
<a href="/ai" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">AI install guide</a>
148149
<a href="https://github.com/Caldis/react-zmage" style="color: #ffffff; text-decoration: underline; text-underline-offset: 4px;">GitHub</a>
149150
</nav>
150151
</main>

0 commit comments

Comments
 (0)