Initial commit with translated description
This commit is contained in:
120
SKILL.md
Normal file
120
SKILL.md
Normal file
@@ -0,0 +1,120 @@
|
||||
---
|
||||
name: Screenshot
|
||||
slug: screenshot
|
||||
version: 1.0.1
|
||||
homepage: https://clawic.com/skills/screenshot
|
||||
description: "捕获、检查和比较屏幕、窗口、区域、网页、模拟器和CI运行的屏幕截图。"
|
||||
changelog: "Improved screenshot guidance with stronger browser, simulator, CI, and visual-stability rules while keeping the skill compact."
|
||||
metadata: {"clawdbot":{"emoji":"📸","os":["linux","darwin","win32"]}}
|
||||
---
|
||||
|
||||
## When to Use
|
||||
|
||||
Use when the task needs a screenshot of a desktop app, browser page, simulator, region, window, or full screen, especially for debugging, QA, documentation, release notes, bug reports, visual review, or before/after comparison.
|
||||
|
||||
This skill is about taking the right screenshot reliably, not about editing images after the fact.
|
||||
|
||||
## Tool Choice
|
||||
|
||||
| Context | Best default | Why |
|
||||
|---------|--------------|-----|
|
||||
| macOS desktop or window | `screencapture` | Built-in, reliable, supports silent, interactive, region, and window capture |
|
||||
| iOS Simulator | `xcrun simctl io booted screenshot` | More reliable than generic desktop capture for simulator output |
|
||||
| Linux Wayland | `grim` + `slurp` | X11 tools often fail or behave oddly on Wayland |
|
||||
| Linux X11 / headless CI | `scrot` or browser-native capture | Works in minimal or virtual-display environments |
|
||||
| Windows desktop capture | `nircmd savescreenshot` or Pillow `ImageGrab` | Easier than verbose PowerShell screen APIs |
|
||||
| Web page or web app | Playwright | Best for stable viewport, element, full-page, masked, and regression screenshots |
|
||||
| Visual diff / screenshot tests | Playwright with fixed viewport | Better control over animations, caret, masks, and reproducibility |
|
||||
|
||||
Default to the most native capture path first. Move to browser-native tooling when determinism, masking, element capture, or visual regression matters more than convenience.
|
||||
|
||||
## Core Rules
|
||||
|
||||
### 1. Pick the capture path by artifact, not by habit
|
||||
|
||||
- Desktop UI screenshots usually want OS-native tools.
|
||||
- Web pages and web apps usually want browser-native capture, not a desktop screenshot of the browser window.
|
||||
- Simulator screenshots should come from the simulator tooling when possible.
|
||||
- Use region, window, or element capture when the point is local; use full screen or full page only when the full context matters.
|
||||
|
||||
### 2. Stabilize the target before capturing
|
||||
|
||||
- Dynamic pages should settle before capture: wait for network idle or the specific element that matters, then give fonts and transitions a brief moment to finish.
|
||||
- Do not take the screenshot before the real rendered state exists.
|
||||
- For browser capture, prefer explicit readiness over blind sleeps when possible.
|
||||
- If the page never truly goes idle, wait for the exact UI state you need instead of chasing perfect stillness.
|
||||
|
||||
### 3. Freeze viewport, scale, zoom, and theme for reproducibility
|
||||
|
||||
- Screenshot comparisons are meaningless if viewport, zoom level, theme, or device scale changed.
|
||||
- For browser captures, fix the viewport before taking baselines or before/after images.
|
||||
- Retina and HiDPI displays can produce more pixels than expected; decide whether you want physical pixels or CSS-scale output and keep that choice consistent.
|
||||
- If dark/light mode matters, capture both intentionally instead of mixing them accidentally.
|
||||
|
||||
### 4. Capture the smallest useful scope
|
||||
|
||||
- Element, region, or window screenshots are usually better than noisy full-screen captures.
|
||||
- Full-page screenshots are useful for audits and archives, but long pages become hard to read and compare.
|
||||
- For browser work, element screenshots or clipped regions usually produce cleaner diffs than full-page output.
|
||||
- If the screenshot is evidence, keep enough surrounding context that the user can understand what they are looking at.
|
||||
|
||||
### 5. Remove noise before you capture
|
||||
|
||||
- Hide or avoid unstable UI when it is not the subject: cursors, carets, toasts, chat widgets, notifications, loading spinners, timestamps, and randomized content.
|
||||
- Mask or avoid secrets, personal data, tokens, and internal URLs before capture.
|
||||
- For Playwright-style browser capture, features like disabled animations, hidden carets, and masking are worth using when visual stability matters.
|
||||
- If the noise is the bug, keep it; otherwise remove it.
|
||||
|
||||
### 6. Use the right output format
|
||||
|
||||
- PNG is the default for screenshots, UI, code, terminals, and text-heavy captures.
|
||||
- JPEG is for photographic content, not normal screenshots.
|
||||
- WebP is fine for sharing or storage when compatibility is acceptable, but do not default to it if the consumer expects plain PNG files.
|
||||
- Avoid recompressing screenshots through JPEG pipelines unless the user explicitly wants smaller lossy output.
|
||||
|
||||
### 7. Make automation and CI captures debuggable
|
||||
|
||||
- On failures, save a screenshot immediately before retrying or moving on.
|
||||
- Use stable filenames for baselines and timestamps for ad hoc or batch captures.
|
||||
- In CI, identical viewport and deterministic state matter more than raw screenshot volume.
|
||||
- Headless runs should prefer browser-native screenshots over trying to screen-grab the host display.
|
||||
|
||||
### 8. Validate that the screenshot is actually useful
|
||||
|
||||
- Check that the important detail is visible, legible, and not cropped away.
|
||||
- Verify that secrets are not still visible in tabs, sidebars, URLs, notifications, or test data.
|
||||
- Before/after comparisons should use the same viewport, zoom, theme, and state.
|
||||
- A screenshot is bad if it is technically correct but useless for the human who needs it.
|
||||
|
||||
## High-Value Patterns
|
||||
|
||||
- macOS: `screencapture -x out.png` for silent capture, `-i` for interactive selection, `-R x,y,w,h` for a fixed region.
|
||||
- iOS Simulator: `xcrun simctl io booted screenshot out.png`
|
||||
- Linux Wayland: `grim -g "$(slurp)" out.png`
|
||||
- Playwright page capture: wait for the target state, then use page, element, clipped, or full-page screenshots deliberately.
|
||||
- Playwright stability features worth remembering: fixed viewport, disabled animations, hidden caret, masks for sensitive regions, and stable theme/media settings.
|
||||
|
||||
## Common Traps
|
||||
|
||||
- Taking a browser-window screenshot when an element or page screenshot was the real need.
|
||||
- Capturing before fonts, data, or layout transitions finish.
|
||||
- Comparing screenshots with different viewport sizes or zoom levels and treating the diff as meaningful.
|
||||
- Using JPEG for screenshots and blurring text, edges, and code.
|
||||
- Letting timestamps, cursor blinks, notifications, or random data ruin visual diffs.
|
||||
- Forgetting that Wayland breaks familiar X11 screenshot tools.
|
||||
- Sharing screenshots with secrets still visible in tabs, sidebars, URLs, or test accounts.
|
||||
- Taking full-page captures of huge pages and ending up with unreadable evidence.
|
||||
|
||||
## Related Skills
|
||||
Install with `clawhub install <slug>` if user confirms:
|
||||
|
||||
- `playwright` — Browser automation, DOM interaction, and web screenshots
|
||||
- `image` — Post-capture format, cropping, compression, and export decisions
|
||||
- `image-edit` — Annotation, cleanup, masking, and targeted edits after capture
|
||||
- `documentation` — Turning screenshots into docs, guides, and release assets
|
||||
- `video` — When a flow should be recorded instead of reduced to still images
|
||||
|
||||
## Feedback
|
||||
|
||||
- If useful: `clawhub star screenshot`
|
||||
- Stay updated: `clawhub sync`
|
||||
Reference in New Issue
Block a user