react-zmage-integration
Use when adding the react-zmage React image viewer to an existing React, Next.js, MDX, CMS, markdown, or rich text image surface.
适合你，如果你需要在 React 或 Next.js 项目中添加图片查看功能。
npx oh-my-skill add caldis/react-zmage/react-zmage-integrationcurl -fsSL https://oh-my-skill.com/install.sh | bash -s -- caldis/react-zmage/react-zmage-integrationnpx oh-my-skill verify caldis/react-zmage/react-zmage-integration怎么用
商店整理自技能原文 · 版本 bd9b97d · 表述以原文为准安装后，Claude 能帮你为 React 应用添加图片查看器，支持全屏预览、缩放和画廊浏览。
当用户想在 React、Next.js、MDX、CMS、Markdown 或富文本中实现图片全屏预览或缩放时触发。
技能原文 SKILL.md
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-zmage
Import 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.