Build With Simplepdf
SimplePDF/simplepdf-embed
Integrate SimplePDF into a web application for PDF viewing, editing, filling, signing, programmatic control, AI-agent interaction, human-in-the-loop form prefilling, submissions, webhooks, or…
A skill your agent uses when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
Install React Zmage Integration
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Caldis/react-zmage react-zmage-integration --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .claude/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Caldis/react-zmage react-zmage-integration --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .agents/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Caldis/react-zmage react-zmage-integration --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .cursor/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Caldis/react-zmage react-zmage-integration --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .gemini/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Caldis/react-zmage react-zmage-integrationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .github/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Caldis/react-zmage --skill react-zmage-integration -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Caldis/react-zmage react-zmage-integration --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-zmage-integration" agent skill from https://github.com/Caldis/react-zmage/tree/master into .opencode/skills/react-zmage-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-zmage-integration", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
react-zmage-integration- GitHub stars
- 946
- Token cost
- ~370 tokens
- SKILL.md length
- 166 words
- Files
- 450 (incl. scripts)
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
- Adding the react-zmage React image viewer to an existing React
- SKILL.md covers When to use this skill and Read first
- Runs JavaScript scripts from its folder; calls npm
- Rich text image surface
What it does
React Zmage Integration is an agent skill from Caldis/react-zmage. Use when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
Its SKILL.md is about 370 tokens, which your agent loads only when the skill is triggered. The skill folder holds 455 other files, including scripts (for example `.claude/settings.json`, `.eslintrc.js` and `.github/copilot-instructions.md`).
It sits in Documents & Office, covering Markdown. It works with React, Next.js and JavaScript. The repository describes itself as: Turn any <img into an origin-expand fullscreen React image viewer. The licence is MIT.
When your agent uses it
- Adding the react-zmage React image viewer to an existing React
- Rich text image surface
Example prompts
- “/react-zmage-integration”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit bd9b97d. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
zmage.caldis.me
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
React Zmage Integration loads about 370 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 166 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from Caldis/react-zmage at commit bd9b97d, republished under its MIT licence (© Caldis). 166 words, ~370 tokens.
Download SKILL.mdSave it as
.claude/skills/react-zmage-integration/SKILL.md (or your agent's skills folder). This skill also uses 449 other files; get the full folder from GitHub.- name
- react-zmage-integration
- description
- Use when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
react-zmage Integration
When to use this skill
Use this skill when a user wants fullscreen image preview, image zoom, a React lightbox alternative, CMS image preview, MDX image preview, or gallery browsing in a React app.
Do not use this skill for unrelated image processing, server-side media transformation, account automation, OAuth setup, webhook setup, or MCP server work. react-zmage is a client-side React package.
Read first
Fetch https://zmage.caldis.me/llms.txt first. Use https://zmage.caldis.me/llms-full.txt when you need the full README and repository agent notes in one request.
Install with:
npm install react-zmageImport the stylesheet once from the app-level style entry:
import 'react-zmage/style.css'Choose the smallest mode that matches the user's image surface:
- Component mode for owned React image markup:
<Zmage src="..." alt="..." />. - Wrapper mode for CMS, MDX, markdown, rich text, or generated HTML:
<Zmage.Wrapper>{children}</Zmage.Wrapper>. - Imperative mode for buttons, commands, callbacks, or non-image events:
Zmage.browsing(options).
Prefer omitted preset so it resolves to auto. Keep optional behavior props unset during a basic install unless the user asks for them or testing exposes a concrete need.
© Caldis, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 449 other files (scripts) in the repository root of Caldis/react-zmage.
- SKILL.md
- .agents/skills
- .babelrc
- .claude/settings.json
- .cursor/rules/react-zmage.mdc
- .cursorrules
- .eslintignore
- .eslintrc.js
- .github/copilot-instructions.md
- .github/workflows/ci.yml
- .gitignore
- .npmignore
- .stylelintignore
- .stylelintrc.js
- AGENTS.md
- … and 435 more
Open the folder on GitHubat commit bd9b97d
Compare with similar skills
React Zmage Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React Zmage Integration this skillCaldis/react-zmage | 946 | — | ~370 | Automated safety check: Pass | MIT | |
| Build With SimplepdfSimplePDF/simplepdf-embed | 407 | — | ~7k | Automated safety check: Pass | MIT | |
| Writing Docsc15t/c15t | 1.9k | — | ~872 | Automated safety check: Pass | Apache-2.0 | |
| Novu Inbox Integrationnovuhq/novu | 40k | — | ~5.2k | Automated safety check: Pass | Custom licence | |
| Dotlottie WebLottieFiles/dotlottie-web | 892 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Ultraciteagustinusnathaniel/nextarter-tailwind | 125 | 2 repos | ~1.2k | Automated safety check: Pass | MIT |
Similar skills
Writing Docs
c15t/c15t
Author or edit c15t documentation in docs//.mdx — the source for both the c15t.com site and the docs bundled into published packages.
Novu Inbox Integration
novuhq/novu
Integrate Novu's in-app notification inbox into web applications.
Dotlottie Web
LottieFiles/dotlottie-web
Implement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react).
Ultracite
agustinusnathaniel/nextarter-tailwind
Ultracite is a zero-config linting and formatting preset for JavaScript/TypeScript projects.
React Best Practices
shapeshift/web
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.
More from Caldis/react-zmage
Release Workflow
Caldis/react-zmage
A skill your agent uses when the user wants to ship a new version of react-zmage to npm.
Sync Public Docs
Caldis/react-zmage
A skill your agent uses when modifying public API in packages/core (types/global.ts, types/default.ts, index.ts, or package.json exports field), adding/renaming/removing props, changing default…
Related
Works with
Categories
Questions about React Zmage Integration
What does React Zmage Integration do?
A skill your agent uses when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface. React Zmage Integration is an agent skill from Caldis/react-zmage.js, MDX, CMS, markdown, or rich text image surface.
When should I use React Zmage Integration?
React Zmage Integration fits situations like: adding the react-zmage React image viewer to an existing React; rich text image surface.
How do I install React Zmage Integration in Claude Code?
Run `npx skills add Caldis/react-zmage --skill react-zmage-integration -a claude-code`. Or copy the skill folder (the Caldis/react-zmage repository) into .claude/skills/react-zmage-integration in your project. Claude Code loads it when a task matches its description.
How do I install React Zmage Integration in Codex?
Run `npx skills add Caldis/react-zmage --skill react-zmage-integration -a codex`. Or copy the skill folder (the Caldis/react-zmage repository) into .agents/skills/react-zmage-integration in your project. Codex loads it when a task matches its description.
Can I use React Zmage Integration in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Caldis/react-zmage --skill react-zmage-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-zmage-integration, .gemini/skills/react-zmage-integration, .github/skills/react-zmage-integration and .opencode/skills/react-zmage-integration in your project.
What does React Zmage Integration need to run?
Going by SKILL.md and its folder, React Zmage Integration needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does React Zmage Integration access the network?
SKILL.md names 1 domain. As links in the text: zmage.caldis.me. This is read from the text; nothing was executed.
Is React Zmage Integration safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does React Zmage Integration use?
React Zmage Integration is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does React Zmage Integration use?
About 370 tokens (SKILL.md is roughly 1.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to React Zmage Integration?
Skills that share tags, products or a category with React Zmage Integration: Build With Simplepdf (SimplePDF/simplepdf-embed, 407 stars), Writing Docs (c15t/c15t, 1.9k stars), Novu Inbox Integration (novuhq/novu, 40k stars) and Dotlottie Web (LottieFiles/dotlottie-web, 892 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains React Zmage Integration?
Caldis (a GitHub user) maintains it in Caldis/react-zmage, which has 946 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on May 18, 2026.
Source: Caldis/react-zmage on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.