Agent skill

Snapshot

by woocommerce in woocommerce/woocommerce-ios

Use swift-snapshot-testing to visually verify SwiftUI views during implementation.

GPL-2.0Auto-check: notesMobile

Install Snapshot

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/snapshot .claude/skills/snapshot && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .claude/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/snapshot .agents/skills/snapshot && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .agents/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/snapshot .cursor/skills/snapshot && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .cursor/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/woocommerce/woocommerce-ios.git --path .claude/skills/snapshot

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/snapshot .gemini/skills/snapshot && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .gemini/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/snapshot .github/skills/snapshot && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .github/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add woocommerce/woocommerce-ios --skill snapshot -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install woocommerce/woocommerce-ios snapshot --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/woocommerce/woocommerce-ios.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/snapshot .opencode/skills/snapshot && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "snapshot" agent skill from https://github.com/woocommerce/woocommerce-ios/tree/trunk/.claude/skills/snapshot into .opencode/skills/snapshot/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "snapshot", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: snapshot
GitHub stars: 358
Token cost: ~1.8k tokens
SKILL.md length: 531 words
Files: 1
Skills in repo: 13
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: GPL-2.0

At a glance

Use swift-snapshot-testing to visually verify SwiftUI views during implementation.

Works in 4 steps: Read the generated PNG using the Read tool → If a design reference exists, read it… → Identify specific mismatches: layout,… → …
Tasks that involve iOS development
SKILL.md covers When to Use, When NOT to Use, Core Flow and Setup: Add Dependency, plus 7 more sections
Calls git and xcodebuild; reaches github.com

What it does

Snapshot is an agent skill from woocommerce/woocommerce-ios. Use swift-snapshot-testing to visually verify SwiftUI views during implementation. Renders views to PNG for comparison against design references. Fast feedback loop (~25s/cycle).

Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering iOS development. It works with SwiftUI and WooCommerce. The licence is GPL-2.0.

When your agent uses it

Tasks that involve iOS development

Example prompts

“/snapshot”

Requirements

Pre-approved tools (allowed-tools): Bash, Read, Write, Edit, Grep, Glob

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

Read the generated PNG using the Read tool
If a design reference exists, read it side by side
Identify specific mismatches: layout, spacing, missing elements, text wrapping, colors
Copy PNGs to working directory with step labels for history

What it can do on your machine

Read from SKILL.md and the folder at commit 630d986. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
- Bash
- Read
- Write
- Edit
- Grep
- Glob
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- git
- xcodebuild
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Snapshot loads about 1.8k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 531 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~47
When it runs · the whole SKILL.md, loaded when a task matches: ~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
```
allowed-tools: Bash, Read, Write, Edit, Grep, Glob
```

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from woocommerce/woocommerce-ios at commit 630d986, republished under its GPL-2.0 licence (© woocommerce). 531 words, ~1,767 tokens.

Download SKILL.mdSave it as .claude/skills/snapshot/SKILL.md (or your agent's skills folder).

name: snapshot
description: Use swift-snapshot-testing to visually verify SwiftUI views during implementation. Renders views to PNG for comparison against design references. Fast feedback loop (~25s/cycle).
allowed-tools: Bash, Read, Write, Edit, Grep, Glob
user-invocable: true
argument-hint: [view-name or test-target]

Snapshot-Driven UI Iteration

Use swift-snapshot-testing to create a visual feedback loop when implementing UI changes. Render SwiftUI views to PNG after each code change, compare against design goals, fix mismatches, and repeat.

When to Use

Implementing UI from Figma designs or reference screenshots
Multi-step view redesigns where each step should match a target
Any SwiftUI work where you need to visually verify output
When design reference images are available for comparison

When NOT to Use

Simple single-property changes (color, font)
Logic-only changes with no visual impact
When the project already has snapshot tests covering the view

Core Flow

1. SETUP      Add swift-snapshot-testing dependency (temporary)
2. GOAL       Collect design reference images
3. SCAFFOLD   Create snapshot test rendering the target view
4. LOOP       For each implementation step:
                a. Edit code
                b. Run snapshot test (record mode)
                c. Read generated PNG
                d. Compare against design
                e. If mismatch -> fix and re-snapshot
                f. If match -> commit the verified change, move to next step
5. CLEANUP    Revert dependency + delete test file

Setup: Add Dependency

Check if swift-snapshot-testing already exists in Modules/Package.swift. If not, add it temporarily.

In the dependencies array of Modules/Package.swift:

swift

.package(url: "https://github.com/pointfreeco/swift-snapshot-testing", from: "1.17.0"),

In the relevant test target's dependencies array:

swift

.product(name: "SnapshotTesting", package: "swift-snapshot-testing"),

Common test targets in this project:

PointOfSaleTests — for POS views
WooFoundationTests — for shared UI components
YosemiteTests — for business logic views

Remember the original state of Modules/Package.swift so you can revert exactly after cleanup.

Goal: Collect References

If the user provides design reference images (Figma exports, screenshots):

bash

mkdir -p ~/Downloads/snapshot_experiment
cp ~/path/to/design.png ~/Downloads/snapshot_experiment/design.png

Read each reference image to understand the target state before writing code.

If no reference image, the goal is inferred from the user's description of desired UI behavior.

Scaffold: Create Snapshot Test

Create a test file in the appropriate Modules/Tests/*Tests/ directory:

swift

import XCTest
import SnapshotTesting
import SwiftUI
@testable import TargetModule

final class ViewNameSnapshotTests: XCTestCase {
    override func invokeTest() {
        withSnapshotTesting(record: .all) {
            super.invokeTest()
        }
    }

    func test_defaultState_snapshot() {
        let view = YourView(/* props for default state */)
            .frame(width: 375, height: 900)
        assertSnapshot(of: view, as: .image(layout: .sizeThatFits))
    }

    func test_alternateState_snapshot() {
        let view = YourView(/* props for alternate state */)
            .frame(width: 375, height: 900)
        assertSnapshot(of: view, as: .image(layout: .sizeThatFits))
    }
}

Important details for this project:

record: .all in invokeTest() forces PNG generation every run
For POS views, set .environment(\.horizontalSizeClass, .regular) — POS is iPad-first
Use .frame(width:height:) to control render size. Start with height: 900, increase to 1200+ if content is clipped
Tests will always "fail" in record mode — this is expected, they report recording, not comparison
Use POS design tokens (POSPadding, POSSpacing, POSFontStyle, Color+POSColorPalette) when comparing POS designs

Run: Execute Snapshot Tests

Use the /simulator skill approach to discover a booted simulator UDID.

Run only the snapshot tests for fast feedback:

bash

xcodebuild test \
  -workspace WooCommerce.xcworkspace \
  -scheme WooCommerce \
  -destination 'platform=iOS Simulator,id=<SIMULATOR_UDID>' \
  -only-testing:<TestTarget>/<SnapshotTestClass> \
  CODE_SIGNING_ALLOWED=NO 2>&1 | tail -30

Prefer module-level test targets over the full app for faster feedback (~25s vs minutes).

Generated PNGs appear at:

Modules/Tests/<TestTarget>/__Snapshots__/<TestClass>/test_name.1.png

Show full SKILL.md (210 more words)Show less

Compare: Read and Assess

After each run:

Read the generated PNG using the Read tool
If a design reference exists, read it side by side
Identify specific mismatches: layout, spacing, missing elements, text wrapping, colors
Copy PNGs to working directory with step labels for history:

bash

cp Modules/Tests/<Target>/__Snapshots__/<Class>/test_name.1.png ~/Downloads/snapshot_experiment/step1.png

Fix: Iterate on Mismatches

Common issues caught by snapshots:

Text wrapping in pills/badges at narrow widths — add .lineLimit(1).fixedSize(horizontal: true, vertical: false), reduce padding
Back button showing in non-compact context — set .environment(\.horizontalSizeClass, .regular)
Content clipped at bottom — increase frame height in test
Spacing mismatches — check POSPadding/POSSpacing values against design
Wrong section order — compare VStack children order with design

When fixing: edit the code and re-run snapshots to verify. Only commit once the snapshot matches the design goal — don't commit untested changes.

Cleanup: Remove ALL Temporary Artifacts

After implementation is complete, revert ALL temporary changes:

bash

# Revert Package.swift (removes snapshot dependency)
git checkout -- Modules/Package.swift

# Revert Package.resolved if it changed
git checkout -- Modules/Package.resolved

# Also revert workspace Package.resolved if changed
git checkout -- WooCommerce.xcworkspace/xcshareddata/swiftpm/Package.resolved

# Delete the snapshot test file
rm Modules/Tests/<TestTarget>/<SnapshotTestClass>.swift

# Delete generated snapshot directory
rm -rf Modules/Tests/<TestTarget>/__Snapshots__

# Verify clean state
git status

Critical: Never commit snapshot test files, __Snapshots__/ directories, or the swift-snapshot-testing dependency. These are temporary iteration tools only.

Quick Reference

Action	Command/Tool
Add dependency	Edit `Modules/Package.swift`
Run snapshots	`xcodebuild test -only-testing:<Target>/<Class>`
Find PNGs	`Modules/Tests/<Target>/__Snapshots__/<Class>/test_name.1.png`
View snapshot	Read tool on the PNG path
Compare	Read both snapshot PNG and design reference
Fix + re-run	Edit code, re-run xcodebuild, commit once verified
Clean up	`git checkout -- Modules/Package.swift`, `rm` test file + snapshots

Files

Just SKILL.md in .claude/skills/snapshot of woocommerce/woocommerce-ios.

Open the folder on GitHubat commit 630d986

Compare with similar skills

Snapshot next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Snapshot compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Snapshot this skillwoocommerce/woocommerce-ios	358	—	~1.8k	Automated safety check: Notes	GPL-2.0	today
Swiftui Protwostraws/SwiftUI-Agent-Skill	5.2k	2 repos	~1.5k	Automated safety check: Pass	MIT	yesterday
Update Swiftui APIsAvdLee/SwiftUI-Agent-Skill	3.7k	—	~1.2k	Automated safety check: Pass	MIT	3 days ago
Swiftui Liquid Glassharperreed/dotfiles	334	8 repos	~941	Automated safety check: Pass	None	6 days ago
Swiftui Expert Skillomarshahine/HomeClaw	175	4 repos	~2.8k	Automated safety check: Pass	MIT	yesterday
Appkit Swiftui BridgeKartikLabhshetwar/better-shot	2.4k	2 repos	~1.1k	Automated safety check: Pass	Custom licence	today

Similar skills

Swiftui Pro
twostraws/SwiftUI-Agent-Skill
Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance.
5.2k GitHub starsUsed in 2 repos~1.5k tokens
MobileAuto-check passed
Update Swiftui APIs
AvdLee/SwiftUI-Agent-Skill
Scan Apple's SwiftUI documentation for deprecated APIs and update the SwiftUI Expert Skill with modern replacements.
3.7k GitHub stars~1.2k tokensUpdated 3 days ago
MobileAuto-check passed
Swiftui Liquid Glass
harperreed/dotfiles
Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API.
334 GitHub starsUsed in 8 repos~941 tokens
MobileAuto-check passed
Swiftui Expert Skill
omarshahine/HomeClaw
A skill your agent uses when writing, reviewing, or refactoring SwiftUI code for iOS or macOS, including state management, view composition, performance, Liquid Glass adoption, or Instruments .trace…
175 GitHub starsUsed in 4 repos~2.8k tokens
MobileAuto-check passed
Appkit Swiftui Bridge
KartikLabhshetwar/better-shot
Expert guidance for hybrid AppKit-SwiftUI development. An agent skill from KartikLabhshetwar/better-shot.
2.4k GitHub starsUsed in 2 repos~1.1k tokens
MobileAuto-check passed
Swiftui UI Patterns
AFK-surf/OpenBridge
Best practices and example-driven guidance for building SwiftUI views and components.
430 GitHub starsUsed in 4 repos~887 tokens
MobileAuto-check passed

Questions about Snapshot

What does Snapshot do?

Use swift-snapshot-testing to visually verify SwiftUI views during implementation. Snapshot is an agent skill from woocommerce/woocommerce-ios. Use swift-snapshot-testing to visually verify SwiftUI views during implementation.

When should I use Snapshot?

Snapshot fits situations like: tasks that involve iOS development.

How do I install Snapshot in Claude Code?

Run `npx skills add woocommerce/woocommerce-ios --skill snapshot -a claude-code`. Or copy the skill folder (.claude/skills/snapshot in woocommerce/woocommerce-ios) into .claude/skills/snapshot in your project. Claude Code loads it when a task matches its description.

How do I install Snapshot in Codex?

Run `npx skills add woocommerce/woocommerce-ios --skill snapshot -a codex`. Or copy the skill folder (.claude/skills/snapshot in woocommerce/woocommerce-ios) into .agents/skills/snapshot in your project. Codex loads it when a task matches its description.

Can I use Snapshot in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add woocommerce/woocommerce-ios --skill snapshot -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/snapshot, .gemini/skills/snapshot, .github/skills/snapshot and .opencode/skills/snapshot in your project.

What does Snapshot need to run?

Going by SKILL.md and its folder, Snapshot needs the command-line tools its instructions call (git and xcodebuild). Its frontmatter pre-approves these tools: Bash, Read, Write, Edit, Grep, Glob.

Does Snapshot access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Snapshot safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Snapshot use?

Snapshot is published under the GPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Snapshot use?

About 1.8k tokens (SKILL.md is roughly 7.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Snapshot?

Skills that share tags, products or a category with Snapshot: Swiftui Pro (twostraws/SwiftUI-Agent-Skill, 5.2k stars), Update Swiftui APIs (AvdLee/SwiftUI-Agent-Skill, 3.7k stars), Swiftui Liquid Glass (harperreed/dotfiles, 334 stars) and Swiftui Expert Skill (omarshahine/HomeClaw, 175 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Snapshot?

woocommerce (a GitHub organization) maintains it in woocommerce/woocommerce-ios, which has 358 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 9, 2026.

Source: woocommerce/woocommerce-ios on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Snapshot

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Snapshot-Driven UI Iteration

When to Use

When NOT to Use

Core Flow

Setup: Add Dependency

Goal: Collect References

Scaffold: Create Snapshot Test

Run: Execute Snapshot Tests

Compare: Read and Assess

Fix: Iterate on Mismatches

Cleanup: Remove ALL Temporary Artifacts

Quick Reference

Files

Compare with similar skills

Similar skills

More from woocommerce/woocommerce-ios

Related

Questions about Snapshot