HeyRenan

Showreel — Design skill for Claude Code

Design community

Claude Code plugin for visual docs — annotated screenshots, feature demos, flow walkthrough recordings (gif/mp4), terminal captures and before/after composites, one command each.

How to install Showreel

This entry records only its repository, not the path inside it, so there is no exact command to give. Open HeyRenan/showreel and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Showreel does

Claude Code plugin for visual docs — annotated screenshots, feature demos, flow walkthrough recordings (gif/mp4), terminal captures and before/after composites, one command each. Self-contained Chromium, self-validated output, no MCP.

Alternatives in Design

Slack GIF Creator — Create animated GIFs optimized for Slack's size constraints 94.1k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
Figma — Fetch design context, screenshots, and assets from Figma for implementation 14.6k ★

README

Showreel

**Turn a URL + CSS selectors into a finished visual — annotated screenshots, flow GIFs, smooth-motion recordings and terminal captures. One command each. The agent never guesses pixels; every output is pixel-verified before it's saved.**

[![ci](https://github.com/HeyRenan/showreel/actions/workflows/ci.yml/badge.svg)](https://github.com/HeyRenan/showreel/actions/workflows/ci.yml) [![version](https://img.shields.io/badge/dynamic/json?url=https://raw.githubusercontent.com/HeyRenan/showreel/main/showreel/.claude-plugin/plugin.json&query=$.version&label=version&color=blue)](showreel/.claude-plugin/plugin.json) [![license](https://img.shields.io/badge/license-MIT-lightgrey)](LICENSE) [![claude code](https://img.shields.io/badge/Claude%20Code-plugin-d97757)](https://claude.com/claude-code)

[English](README.md) · [Português](README.pt-BR.md)

Showcase

[![Watch the full showcase](assets/showcase.gif)](assets/showcase.mp4)

*One pass, one real flow — Showreel walks a deploy: read the pipeline → hit the health gate → auto-rollback → re-run → ship. Camera, marks + legend, spotlight and a rollout bar, each in service of the step, never decoration. Generated entirely by the plugin against the bundled demo page. ([click to play the full MP4](assets/showcase.mp4))*

Every image in this README was generated by Showreel itself, against the bundled "Lumen" demo page. Run the same commands, get the same files.

What it is

A [Claude Code](https://claude.com/claude-code) plugin for **visual documentation** — explaining a change, a bug, a feature flow, a UI/landing-page showcase or a tutorial step with a picture instead of a paragraph. It's built to **inform, not entertain**: for the devs and stakeholders who need to *understand* how something works, so every artifact stays legible and proportional to its content: no invented drama, no filler — but as rich as clarity demands, because restraint is against noise, never against capability.

You point it at a page and