# UI Screenshots

Shoot polished, framed screenshots of the open-slide dev UI (editor, inspector, Arrange...

- Repository: https://github.com/open-slide/open-slide (9607 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add open-slide/open-slide --skill ui-screenshots -g -a claude-code -y`
Codex: `npx skills add open-slide/open-slide --skill ui-screenshots -g -a codex -y`
Cursor: `npx skills add open-slide/open-slide --skill ui-screenshots -g -a cursor -y`
Gemini CLI: `npx skills add open-slide/open-slide --skill ui-screenshots -g -a gemini-cli -y`

## Description

Shoot polished, framed screenshots of the open-slide dev UI (editor, inspector, Arrange tab, comment mode, agent panel, assets manager, svgl search, themes, presenter, ⌘K menu, slide overview, export menu) as cropped webp images, the app as a rounded, shadowed window on a soft gray stage, with padding where the window edge shows and bleed where the crop cuts through. This is the house style for docs pages, the changelog, the landing site, and READMEs. Use it whenever the user asks for UI screenshots, docs or changelog images, "nice"/"framed"/"cropped" screenshots, or wants images under apps/web/public/assets refreshed because the UI changed, even if they don't name this skill or describe the style.

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

# Framed UI screenshots

The output is a webp like a product-page detail shot: a crop of the real dev
UI, rendered as a window with rounded corners and a layered shadow on a warm
gray gradient. Window edges that fall inside the crop get 56px of padding;
edges where the crop cuts through the UI bleed off the stage. That contrast is
what makes a crop read as "a detail of a real app" instead of a pasted
rectangle, so choose crops with it in mind.

Everything is captured from a real `open-slide dev` server running on a
throwaway scratch project, so the shots show the current UI, not a mock.

All scripts live in `.claude/skills/ui-screenshots/scripts/` and are run from
the repo root with `node`.

## Before you start

- **Ask before starting a dev server.** The user prefers to start dev
  servers themselves. The inspector, comment mode, Design panel, and agent
  panel only exist under `open-slide dev`, so screenshots need one. Explain
  that and propose the throwaway scratch server below. Approval doesn't carry
  over from an earlier session.
- **Never drive a server that's already running.** Port 5173 is often the
  user's own slides project in another folder, and clicking around a real
  workspace writes `@slide-comment` markers and edits into it.
- Use a scratchpad directory for shot lists and outputs until images are
  final.

## Workflow

1. **Pick the shots.** One image per idea. Show the state that explains the
   feature: a selected element with the panel open, a dialog with real
   results, pins already posted. For docs, the page's hero image usually goes
   right under the frontmatter, with section images under the heading they
   illustrate. For the changelog, only releases worth a picture get one.

The rest: https://github.com/open-slide/open-slide/blob/HEAD/.claude/skills/ui-screenshots/SKILL.md