# Editorial Dot Cover

Create deterministic editorial-style cover images with a warm paper-gray background...

- Repository: https://github.com/Pluviobyte/rnskill (1706 stars)
- Category: Design
- License: see repository
- Last updated: 2026-09-21
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Pluviobyte/rnskill --skill editorial-dot-cover -g -a claude-code -y`
Codex: `npx skills add Pluviobyte/rnskill --skill editorial-dot-cover -g -a codex -y`
Cursor: `npx skills add Pluviobyte/rnskill --skill editorial-dot-cover -g -a cursor -y`
Gemini CLI: `npx skills add Pluviobyte/rnskill --skill editorial-dot-cover -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Pluviobyte/rnskill`

## Description

Create deterministic editorial-style cover images with a warm paper-gray background, oversized black slab-serif/Chinese display typography, generous whitespace, and a dotted vector analysis icon. Use when the user asks for a “点阵编辑风封面”, “暖灰杂志风封面”, “Codex + Hyperframes 同款封面”, or wants to reproduce/adapt the specific minimal left-text/right-icon banner style. Produce editable SVG and a rendered PNG; do not use this skill for generic covers without this visual direction.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Editorial Dot Cover

Create a typographically accurate cover from vectors. Prefer the bundled renderer over image generation so Chinese text and punctuation remain exact.

## Required inputs

Resolve these values from the request or current project:

- `label`: short English/tool label, such as `Codex + Hyperframes:`
- `title`: one concise Chinese headline
- `output`: destination SVG and PNG paths

Default to `3168 × 1267` (about `2.5:1`). If the user provides no label, derive a short tool/topic label. Ask only when the title itself cannot be inferred safely.

## Render

Run:

```bash
python3 <skill-dir>/scripts/render_cover.py \
  --label "Codex + Hyperframes:" \
  --title "拆解抖音爆款·吃上自媒体这碗饭!" \
  --output "/absolute/path/cover.svg" \
  --png "/absolute/path/cover.png"
```

Use `--width` and `--height` only when a different landscape ratio is requested. Use `--font-en` or `--font-cn` when the user specifies a font. Run `--help` for all parameters.

Use `--label-size` or `--title-size` for art-directed pixel sizes when mixed-language font metrics make the automatic fit inaccurate. Preserve the required text-to-icon gap after overriding either value.

Use `assets/style-reference.png` only as a visual comparison target when checking fidelity; generate new covers from the script instead of copying pixels from the sample.

The script keeps an editable SVG as the source of truth and uses an installed Chromium-family browser or `rsvg-convert` for PNG rendering. If neither renderer exists, deliver the SVG and report that PNG rendering remains pending.

## Style contract

Preserve these traits:

The rest: https://github.com/Pluviobyte/rnskill/blob/HEAD/skills/editorial-dot-cover/SKILL.md