UI Screenshots
Shoot polished, framed screenshots of the open-slide dev UI (editor, inspector, Arrange...
Install
npx skills add open-slide/open-slide --skill ui-screenshots -g -a claude-code -y- Repository
- open-slide/open-slide9.6k
- Category
- Design
- Updated
- 6d ago
- License
- MIT
- Context cost
- Mediumabout 2,095 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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-commentmarkers and edits into it. - Use a scratchpad directory for shot lists and outputs until images are final.
Workflow
- 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.
