[Anchor-Shi]

Why

The README read like developer docs. #42 and #43 improved the opening text, install commands and capability keywords, but a visitor still saw no pictures of what ChatCut actually produces. Popular agent repositories lead with clear visuals: HyperFrames shows a sharp thumbnail grid where each card links to a live template page. This version opens with ChatCut Skills from chatcut.io/skills, then lets each visitor find the install line for their own agent.

A first draft used six demo GIFs made from website marketing clips. Compressed to about 2 MB each, they looked blurry, and they weren't Skills. They're replaced by the Skill cards below.

What changed

Six Skill cards, right under the Works with row. There's no heading or intro above them and no line below them, so the grid follows the host icons directly and Install comes next. Each card is a sharp still with the Skill's name and one line, linking to its page on chatcut.io/skills. The cards are fixed-width images that wrap: three per row on a computer (both the README view and the repository home page), one per row on a phone.

Anchor picked the lineup: two rows of three, with Viral Video Cloner in the center of the top row. The two motion-graphics packaging styles are titled MG Packaging · Runway Rebel and MG Packaging · Editorial Explainer, Their one-line descriptions say what they do: "Talking-head video with bold type, yellow digits." and "Talking-head video with news-style charts." The alt text gives the full version, for example "packages your talking-head video in bold white type and slim yellow numerals". Each title fits on one line at 44 px, against 46 px on the other cards; the longer one is 712 px wide in a 736 px text area. The cards stay 800×618, so the rows line up. Names, covers and previews follow the latest admin data (agent_skill, read from production on 2026-11-10), and every still is regenerated from the admin thumbnail or preview video.

Card (admin name)	Link	Still taken from
Speech Cleanup	/skills/speech-cleanup	its 1080p preview, 0.97s (eyes open, with the filler-word chips on screen)
Viral Video Cloner	/viralvideocloner	its "hero crowd" preview (admin 2026-11-01), 8.35s, mid-wipe so the same pose shows in two looks
Add captions	/skills/add-captions	its caption-style preview (admin 2026-11-04), 6.5s
Talking-Head Edit Recreation	/skills/recreate-a-video	its preview, 0.5s
MG Packaging · Runway Rebel	/skills/mg-packaging-runway-rebel	its preview, 0.9s: "STOP POSTING 365"
MG Packaging · Editorial Explainer	/skills/mg-packaging-editorial-explainer	its preview, 9.6s

• Every link points to chatcut.io and carries the README UTM tags.
• Viral Video Cloner links straight to /viralvideocloner, because /skills/viral-video-cloner redirects there with a 302 that drops the query string.
• Removed from earlier lineups: AI Avatar Video, Voice Cloning, Video Translation, SaaS Kinetic Type Launch, Claymotion, Sugar Crystal Storm and Long video to shorts, along with their images.
• Earlier drafts had a "What you can make" heading and intro above the cards, plus a "Skill | Paste this into your agent" table and a "More Skills … Not set up yet?" line under them. All are gone. The cards already link to each Skill, the links row at the top already has Skills, and the install table below covers every host. Nothing linked to the old heading's anchor.
• None of the card media shows third-party links, logos or brand marks. I checked the headphones and microphone in the Runway Rebel still at full resolution.

Media. The six cards are committed in docs/media/skills/: 800×618 JPGs, about 560 KB in total.

• GitHub's image proxy loads the catalog's CloudFront and S3 covers fine.
• Most of those covers are only 640×360 and a few KB, though, so the cards are made from the preview videos instead.
• The six earlier GIFs are deleted. They're still in this branch's first commit, so please use "Squash and merge" to keep those 12 MB out of main's history.

Demo animation. A centered, auto-looping GIF (docs/media/hero-demo.gif) sits between Works with and the cards. It has no player controls and no file title.

• It's 720×406, 10 fps, 207 frames and 20.7 seconds: the full demo, with nothing cut. The file is 11.2 MB (10.65 MiB).
• Its six segments match the six cards: Viral Video Cloner first, then Speech Cleanup, Add captions, Talking-Head Edit Recreation, MG Packaging · Runway Rebel and MG Packaging · Editorial Explainer.
• GitHub doesn't autoplay video in READMEs. This ffmpeg build can't write animated WebP, so it's a GIF (one palette, ordered dither). 720 px at 12 fps came to 12.8 MB, and 640 px blurred the on-screen text, so I picked 720 px at 10 fps.
• Loop check: in a signed-out browser I captured the GIF once a second for 48 s on the branch page. It played all six segments in order and restarted at Viral Video Cloner at about 21 s and again at about 42 s.
• The video player from the previous version is gone, along with its user-attachments link.

One Install section.

• It opens with one sentence: ChatCut's plugin (MCP) works with ChatCut Desktop on your computer (recommended; your media stays local) or with hosted ChatCut Web. Find your agent and follow its row.
• The table has one row per host, 11 in all, with three columns: Agent, How to install, Setup guide.
  • It doesn't sort hosts into Desktop and Web, since most hosts can use either.
  • Setup guide link text reads " guide", whether it opens a chatcut.io page or a package README.
• I checked every row against a live entry point:

Host	Live entry point	Result
Codex	chatcut.io/codex-plugin (redirects to the ChatGPT plugin page)	Shows Read ChatCut.io/desktop to install ChatCut
ChatGPT	chatcut.io/chatgpt-plugin	Shows the same prompt, plus Plugins → search ChatCut → Install
Claude Code	chatcut.io/claude-code-plugin	Shows the same prompt
Cursor	cursor.com/marketplace	Not listed: searching "ChatCut" finds nothing and /marketplace/chatcut is a 404. The row and a Web setup snippet give the install that works today: add the hosted server to ~/.cursor/mcp.json and sign in. The README doesn't mention the marketplace. That uses Cursor's documented remote-server config and OAuth with dynamic client registration, which ChatCut's server advertises (/auth/mcp/register, PKCE S256).
Grok Bot	chatcut.io/grok-plugin	Shows Read ChatCut.io/grok to connect the ChatCut app
Gemini CLI	Gemini CLI extension docs, and gemini-extension.json at the root of main	gemini extensions install <GitHub URL> is the documented syntax
Google Antigravity	chatcut.io/antigravity-plugin	Shows Read ChatCut.io/antigravity to install ChatCut, which installs Desktop
Kimi Work	Kimi help center: plugin creation and import	The documented import is Plugin Builder (type /) with a repository link, then install under 插件 → 个人. The row now says that, with the kimi/ folder link. That folder already has kimi.plugin.json.
WorkBuddy	chatcut.io/workbuddy (Desktop install guide); WorkBuddy app V5.9.3, from Anchor's 11/12 screenshots	The Desktop route matches the page. Experts route: 专家·技能·连接器 → 专家, search ChatCut, open the official ChatCut 视频剪辑师 (v1.0.6, 56.1w uses), then 召唤. The search also shows three experts ChatCut doesn't publish.
Doubao Work	Doubao Work app, from Anchor's 11/12 screenshots	插件 · 技能 → 插件, search ChatCut (3.6万人在用), open it, then 安装 on the ChatCut connector (it connects to the local ChatCut Desktop), then 在对话中使用
Qwen Work	Qwen Work app (English UI), from Anchor's 11/12 screenshots	Skills & extensions → Connectors → Market, + next to ChatCut, then Install ChatCut. The old "Extensions → Connectors" path was wrong.

• Desktop setup has the prompt and what it does, the macOS and Windows installers (run on that computer, graphical desktop needed, no Node.js or npm), the Antigravity Desktop package, and a sentence that video recreation needs Desktop's video-gen Skill and submit_video_remake.
• Web setup says Web projects aren't migrated to Desktop and that connecting Desktop may replace the hosted connection. It has the Claude Code, Codex CLI, Gemini CLI and Cursor setups, the Grok Bot and Antigravity Web guides, and the endpoint for other MCP clients that support OAuth.
• The README used to repeat install steps further down, under Install ChatCut Desktop (recommended) and Optional hosted Web plugin authentication. Both sections are gone, and what only they said now lives in the subsections above.
• doubao/README.md, qwen/README.md and workbuddy/README.md use the same in-app paths as the table. The Qwen kit's own Chinese docs (CONNECTORS.md, references/connector-readiness.md) still say 「扩展 → 连接器」. They're left as submitted in the 2.0.4 ZIP.
• The Gemini CLI and Cursor pills and table rows link to #web-setup. Every relative link and anchor in the README resolves.

Layout. The top of the README is centered to line up with the cards: the title, the Product Hunt award and badges, the links row and Works with. The bold intro paragraph between the badges and the links row is left-aligned, so it reads as a paragraph. The centering uses <h1 align="center">, <p align="center"> and <div align="center">. From Install down, the README stays left-aligned as reference docs. On GitHub, the host icons sit about 22 px above the first row of cards, and the Install heading keeps its usual margin below the grid.

Header. The title is now ChatCut AI Video Editor; the README used "ChatCut Agent Plugins" nowhere else. The word "ChatCut" in the title is the ChatCut logotype, with "AI Video Editor" as text after it. Both copies live in docs/media/brand/:

• Dark mode uses the white original from apps/editor/public/CC_LOGOTYPE.svg in the main repo.
• Light mode uses a copy filled #2C1B09, the color the chatcut.io header uses for its logo on a light background.
• <picture> switches between the two with the theme, the image's alt text is "ChatCut", and on a phone "AI Video Editor" moves to the line below the logo.

From top to bottom:

• Product Hunt award. The "Add Claude Code plugin manifests for claude plugin install #1 Product of the Day" badge, using the same self-hosted light and dark SVGs as the website footer (chatcut.io/producthunt/badge-{light,dark}.svg, served through GitHub's image proxy). It's wrapped in <picture> so it switches with the theme, and links to the same Product Hunt URL as the footer. Product Hunt shows Cloudflare's bot check to automated clients, so I couldn't open that page here.
• One row of live badges.
  • shields.io style=flat: stars, latest release (v1.11.1) and license (Apache-2.0).
  • Discord members (24,113) for the official server linked in the website footer. Shields' standard Discord badge reads "widget disabled" for this server, so this one is a dynamic badge that reads approximate_member_count from Discord's public invite endpoint.
  • The existing Glama score.
  • skills.sh has no badge. Its 2.7K figure adds up installs across 30 Skills, so I left it out.
• The intro sentence, left-aligned.
• A fuller links row. Website · Skills · Docs · Setup guide · Pricing · Discord · X. All return 200.
• Works with. One small pill per host, each with its app icon and linking to its guide:
  • Codex, ChatGPT, Claude Code, Grok Bot, Google Antigravity and WorkBuddy link to their chatcut.io plugin pages. Their icons are the ones chatcut.io uses. The Grok Bot app icon comes from chatcut-landing#830, which isn't merged yet.
  • Cursor, Gemini CLI, Kimi Work, Doubao Work and Qwen Work link to their package README or install section, on a second row. The chatcut.io Plugin menu doesn't list these hosts. Kimi's icon is the one chatcut.io already uses; the other four come from each product's own site: Cursor's app icon, Gemini's sparkle, Doubao's app icon and Qwen's app icon.
  • Icons that have their own background (Cursor, Kimi, Grok) fill a rounded tile. Transparent marks sit on a white tile with a light border.
  • Each pill is a single image, so a name never splits from its icon when the row wraps on a phone, and the white pills read on both light and dark backgrounds. The 11 pills total 88 KB in docs/media/hosts/.
• The old "ChatGPT and Codex" and "Claude Code" links are now covered by the Works with row.

Link tracking. Every clickable chatcut.io link carries utm_source=github&utm_medium=readme&utm_campaign=agent-plugin: the Skill cards, the install table guides, the header links, the Works with pills and the guides further down. That's 27 links across 18 distinct URLs, and all of those URLs return 200 with the parameters. Some things stay untagged on purpose:

• The Product Hunt link keeps the website's own parameters.
• Install prompts (Read ChatCut.io/desktop …), code blocks and image URLs. Agents read the prompt URLs, and some agent web tools can't open URLs with query strings. The capability list is renamed Everything ChatCut can make, and the "Under the hood…" sentence moves into it. Every other section is unchanged, apart from the two duplicate install sections removed above.

Verification

• Branch README on GitHub (blob/claude/readme-demos-20261110/README.md and the branch's repository home page):
  • At 1440 px and 1280 px, the cards sit three per row and the install table fits without scrolling.
  • At phone width (375 px emulation), the cards stack one per row, centered, and the page doesn't scroll sideways. The install table scrolls inside its own box, GitHub's usual treatment of wide tables.
• The demo GIF auto-plays and loops signed out.
• Every card image is served with 200 image/jpeg, and the six card pages and the host guide links return 200.
• node --test tests/*.test.mjs: 118/118 pass. git diff --check is clean.

🤖 Generated with Claude Code