1weiho skills
Two skills for product shots: cinematic UI films with macro close-ups and clean framed screenshots on a soft stage
- 240 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- clean-ui-shot runs Playwright with Chromium, opens your app and saves images to disk
- Real user data can end up in the frame if the app is not run with demo data
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/1weiho-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- clean-ui-shot runs Playwright with Chromium, opens your app and saves images to disk
- Real user data can end up in the frame if the app is not run with demo data
This is third-party code. Review the repository files before installing.
What it does
A collection of two skills that turn a product's interface into finished visuals. They install with `npx skills add 1weiho/skills`, and one skill can be taken alone with the `--skill` flag. `cinematic-shot` shoots a UI like a film. The film is a sequence of hero shots: a steep, oblique extreme close-up of the interface floating on a stage (a black void for dark products, a high-key studio for light ones), a razor-thin focal plane, a slow camera drift, UI that acts on its own and hard cuts on the action. It ends on one line of copy and a still logo. The same rules cover single frames: a hero image, a launch post, a social card, a poster. The skill first asks for the story and a shot list, then picks the stage from the product's real theme and never fakes a dark theme the product lacks. Concrete camera, light and type recipes live in `references/look.md`. `clean-ui-shot` makes framed, cropped screenshots of a running web app for docs, changelogs, landing pages and READMEs: the app as a rounded window with a shadow on a stage. Before shooting the skill asks for a style: `clean` (a soft warm-gray stage, a neutral shadow, 56 px of padding) or `glass` (a gradient taken from the shot's own colors, a frosted bezel, 96 px of padding). Capture comes from the live app, ideally a throwaway copy with demo data.
Who it is for. Front-end developers and product designers who need UI films and screenshots for launches, docs and social posts without a separate shoot.
Good fit when
- A feature release needs a 45 to 55 second film with macro close-ups of the interface and one line of copy at the end
- A homepage or post needs one striking image of the interface in the same cinematic look
- Docs and a changelog should hold matching screenshots of settings, dialogs and pages
- Landing page screenshots should be in the glass style with a palette taken from the app itself
- The shooting stage should follow the product's real theme rather than a template
Not a fit when
- You need mobile app screenshots: `clean-ui-shot` captures web apps through Playwright
- You need a ready video editor: `cinematic-shot` describes the direction and cuts, and you build the render with your own stack
- The interface sits behind a login with no demo data: shooting must not use real customer data
- The product needs mockups with no real interface: both skills shoot the live app
Example request
Make a cinematic launch film for our new search feature, then take clean screenshots of the settings page and the export dialog for the docsLimitations
- `clean-ui-shot` needs Node, `playwright` with Chromium and `sharp`. If the project lacks them the skill asks you to run `npm i playwright sharp` and `npx playwright install chromium` in a scratch folder.
- `cinematic-shot` defines the language of camera, light and edit, and the agent builds the render with any stack. Every frame must be a pure function of time, or the film will not render deterministically.
- The stage theme follows the product's real theme: a light-only product never gets a dark stage.
- The author's skills are written in English, and the result depends on the quality of demo data in the interface.
How to disable. Delete the cinematic-shot and clean-ui-shot folders from the agent's skills directory. The playwright and sharp packages installed for shooting stay in the scratch folder, which you can delete by hand.
FAQ
How do I install the 1weiho skills in Claude Code?
Run `npx skills add 1weiho/skills`. To take one skill add `--skill cinematic-shot` or `--skill clean-ui-shot`.
How is cinematic-shot different from clean-ui-shot?
`cinematic-shot` builds a film or striking frames with depth of field and camera drift. `clean-ui-shot` makes calm screenshots of a live app in a window on a plain or gradient stage.
Which styles does clean-ui-shot have?
`clean` with a soft warm-gray stage and 56 px of padding, and `glass` with a gradient from the shot's colors, a frosted bezel and 96 px of padding. The skill asks for the style before shooting.
What does clean-ui-shot need?
Node, `playwright` with Chromium and `sharp`. If they are missing the skill suggests installing them in a scratch folder with `npm i playwright sharp` and `npx playwright install chromium`.
How long is a cinematic-shot film?
By the skill's rules 45 to 55 seconds: 8 to 10 UI shots, then a copy line and a logo. Process shots such as typing run 5 to 9 seconds and accents such as a tab 2 to 3.5 seconds.
Discussion
No questions or reviews yet.
Related
SkillsA director skill for AI video: turns a script into a shot list, keyframes and motion prompts for Runway, Kling and Veo
A Claude Code skill that records a product in the browser, composes a video with chapters and captions and masters the MP4 locally
Раскадровка в одном скилле: из сценария выходит сетка 3 на 3 с режиссерскими кадрами и таблица таймкодов по сценам.
Thirteen HyperFrames video skills: script, motion samples, A/B shot review, voiceover, captions and final checks
A skill that walks an agent through ten gates, from customer pain to final render, so a launch film looks directed.
The Video by Reference skill learns style from a sample clip and builds an animated short from code with an original soundtrack
README in short
The short page says this is the author's collection of skills and gives the install command for the whole set. For each skill it then gives a description, a sample prompt, the install command for that single skill and a link to its SKILL.md. A support block for the author closes the page.
README badge
Original SKILL.md
--- name: clean-ui-shot description: Shoot polished, framed screenshots of a web app's real UI as cropped images, the app as a rounded, shadowed window on a stage, with padding where the window edge shows and bleed where the crop cuts through. Two styles, asked up front, clean (a soft gray stage) or glass (a gradient coloured from the UI itself, with a frosted white bezel). A house style for docs pages, changelogs, landing pages, and READMEs. Use whenever the user asks for UI screenshots, docs or changelog images, "nice", "framed", "clean", or "cropped" screenshots of their app, or wants existing product screenshots refreshed because the UI changed, even if they don't name this skill or describe the style. --- # Clean UI shot The output is an image like a product-page detail shot: a crop of the real UI, rendered as a window with rounded corners and a shadow on a stage. Window edges that fall inside the crop get 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. There are two styles. Both use the same crops and render the UI at the same scale; only the stage and frame differ. - **clean** (default): a soft warm-gray gradient stage, a layered neutral shadow, 56px of padding. Quiet and consistent; suits docs, changelogs, and READMEs, where many shots sit together. - **glass**: a gradient stage coloured from the shot itself, a frosted, semi-transparent white bezel around the window, and 96px of padding. The script samples the capture, picks its main hues (saturated brand accents count more than large pale areas), and lays soft tints of them into the corners, so every product gets its own palette. A dark UI gets deep tones; a UI with no colour falls back to the clean stage. Suits landing pages, launch posts, and social images. Everything is captured from the real app running locally, ideally a throwaway instance with demo data, so the shots show the current UI, not a mock. The scripts live in the `scripts/` folder next to this file (written `<skill>/scripts/` below). They need Node, `playwright` with Chromium, and `sharp`, resolved from the directory you run them in. If the project doesn't have them, `npm i playwright sharp` in a scratch directory, run `npx playwright install chromium` there once, and run the scripts from that directory. ## Before you start - **Ask which style the user wants before shooting**, unless they already said. Describe both in a sentence each (as above), say which you'd pick for where the images will go, and wait for the answer. Use one style per batch, so images that sit together match. If the project already has shots