readme-images
Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.
Best use case
readme-images is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.
Teams using readme-images should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/readme-images/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How readme-images Compares
| Feature / Agent | readme-images | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Readme Images
README.md 中的图片引用规范。
## 核心规则
**所有图片统一使用相对路径**，GitHub 和 Gitee 共用同一份 README，无需区分平台、无需转换。
```markdown
```
## 工作原理
- **GitHub**：自动解析为 `https://raw.githubusercontent.com/user/repo/branch/path`
- **Gitee**：自动解析为 `https://gitee.com/user/repo/raw/branch/path`
两个平台都官方支持相对路径，零外部依赖，最稳定。
## 图片目录规范
```
project/
├── README.md
├── docs/
│ └── screenshots/ # 推荐：功能截图
│ ├── feature.avif
│ └── demo.webp
└── images/ # 备选：通用图片
└── logo.png
```
## 必须遵守
1. **图片文件必须提交到仓库** — 两个平台都需要文件存在
2. **使用相对路径** — 以 `./` 开头或直接写相对路径
3. **不使用绝对 URL** — 不用 CDN、不用 raw.githubusercontent.com、不用七牛云
4. **图片需压缩** — 遵循 `image-compress` skill 规则，确保图片 < 100KB
5. **推荐格式** — avif > webp > png > jpg
## 禁止的写法
```markdown
<!-- ❌ 七牛云 URL -->
<!-- ❌ GitHub Raw URL -->
<!-- ❌ jsdelivr CDN -->
```Related Skills
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
ui-ux-pro-max
Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
tailwindcss
Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
run-tests
后端代码测试验证规则。此技能在以下情况下自动触发： - 任何后端代码修改（backend/ 目录下的 .py 文件） - 新增功能开发 - Bug 修复 - 代码重构 核心原则： 1. 后端代码修改必须有对应的测试用例 2. 修改业务逻辑时必须同步更新相关测试用例 3. 测试全部通过才算功能完成 触发关键词：后端、backend、python、测试、test、pytest、功能、feature、修复、fix、实现、修改、完成、验证 alwaysApply: true
release
发版流程 - 仔细阅读上个版本到现在版本的内容，把更改功能放到项目CHANGELOG.md目录下，处理README图片引用，然后提交且推送所有源码到GitHub和Gitee双平台，再之后打tag 触发条件：用户要求发版、发布、release、打tag
qiniu-upload
Upload images to Qiniu Cloud (七牛云) via local PicList/PicGo service and return the public access URL. Use when the user needs to upload images, screenshots, or any picture files to Qiniu cloud storage, get image hosting URLs, or publish images to http://qiniu.biomed168.com/pic/.
mobile-automation
Mobile MCP + 飞书 MCP 双协作自动化测试专家。
image-compress
图片压缩检查规则。当添加或修改 README 引用的图片时自动触发。检查图片是否超过 100KB，超出则压缩。推荐使用 avif/webp 格式。触发场景：添加新图片到仓库、更新 README 中的截图、发版前检查。
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.