New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

UI Review

by woocommerce in woocommerce/woocommerce-android

Generate screenshot coverage for screen-level Compose previews from the current diff or a specific target, check required visual and data variations, and produce a compact visual report

GPL-2.0Auto-check passedMobile

Install UI Review

skills CLI
$ npx skills add woocommerce/woocommerce-android --skill ui-review -a claude-code

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

GitHub CLI
$ gh skill install woocommerce/woocommerce-android ui-review --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-android.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-review .claude/skills/ui-review && 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/

Facts

Skill name
ui-review
GitHub stars
319
Token cost
~3.1k tokens
SKILL.md length
1,751 words
Files
2 (incl. assets)
Skills in repo
11
Repo updated
First seen
Licence
GPL-2.0

At a glance

Generate screenshot coverage for screen-level Compose previews from the current diff or a specific target, check required visual and data variations, and produce a compact visual report

  • Works in 8 steps: Chooses a starting point from the… → Traces that starting point up to… → Prefers existing screen previews → …
  • Mobile work in your project
  • SKILL.md covers Input Modes, Kickoff, What This Skill Does and Output Rules, plus 10 more sections
  • Calls git

What it does

UI Review is an agent skill from woocommerce/woocommerce-android. Generate screenshot coverage for screen-level Compose previews from the current diff or a specific target, check required visual and data variations, and produce a compact visual report

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including assets.

It sits in Mobile. It works with WooCommerce and Android. The repository describes itself as: WooCommerce Android app. The licence is GPL-2.0.

When your agent uses it

  • Mobile work in your project

Example prompts

  • “/ui-review”

Workflow steps

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

  1. Chooses a starting point from the current diff or an explicit user-provided target
  2. Traces that starting point up to screen-level composables
  3. Prefers existing screen previews
  4. Creates temporary previews only when coverage is missing
  5. Deletes any previous ui-review report output
  6. Runs the Android screenshot generation task
  7. Builds a user-facing visual report
  8. Deletes every temporary input and raw screenshot artifact

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    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

UI Review loads about 3.1k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 1,751 words of instructions outside code blocks.

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

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 passed

The automated check found no risky patterns in SKILL.md.

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-android at commit be5a50f, republished under its GPL-2.0 licence (© woocommerce). 1,751 words, ~3,096 tokens.

Download SKILL.mdSave it as .claude/skills/ui-review/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
ui-review
description
Generate screenshot coverage for screen-level Compose previews from the current diff or a specific target, check required visual and data variations, and produce a compact visual report
user-invocable
true

UI Review

Run a visual review for the screens affected by the current diff or a specific target.

Input Modes

This skill supports two starting modes:

  • Diff mode: use the current diff to find the affected Compose code and trace it to the right screen previews
  • Target mode: when the user explicitly provides a Compose name, class name, or file name, use that as the starting point instead of the diff

In Target mode:

  • treat the provided Compose, class, or file as the source of truth for what to inspect
  • trace from that target to the most relevant screen-level preview
  • if the target is already a screen-level preview, use it directly
  • if the target cannot be resolved to a usable screen or preview, stop and report that clearly instead of guessing
  • if the target resolves to a non-Compose screen, Fragment, XML view, RecyclerView screen, or custom Android View screen, stop and report that this skill does not support that target
  • do not convert, port, wrap, mirror, or recreate non-Compose UI in Compose just to make this skill run
  • do not run screenshot generation when the resolved target is not Compose-based

Kickoff

When the user explicitly invokes this skill, default to Diff mode.

At the start:

  • if the user already gave a Compose name, class name, or file name, use Target mode
  • otherwise, use Diff mode

What This Skill Does

  1. Chooses a starting point from the current diff or an explicit user-provided target
  2. Traces that starting point up to screen-level composables
  3. Prefers existing screen previews
  4. Creates temporary previews only when coverage is missing
  5. Deletes any previous ui-review report output
  6. Runs the Android screenshot generation task
  7. Builds a user-facing visual report
  8. Deletes every temporary input and raw screenshot artifact

Output Rules

The final output is a visual report at:

WooCommerce/build/reports/ui-review/index.html

The report may keep a small assets/ folder next to it for images used by the report.

Keep the output contract fixed:

  • WooCommerce/build/reports/ui-review/index.html
  • WooCommerce/build/reports/ui-review/assets/...

These are the final artifacts and must remain after the run.

After the skill finishes, git status should not show screenshot junk.

Before starting a new run, delete any existing WooCommerce/build/reports/ui-review folder so the report is always rebuilt from a clean slate.

Preview Usage

Because this skill runs Android's Compose Preview Screenshot Testing tasks, every screenshot preview must live in WooCommerce/src/screenshotTest/kotlin/... and must be annotated with @PreviewTest.

This skill only supports Compose UI targets.

Supported targets:

  • screen-level composables
  • Compose previews
  • Compose files that can be traced to a screen-level Compose preview

Unsupported targets:

  • Fragments whose primary UI is XML or View-based
  • custom Android Views
  • RecyclerView screens that are not Compose
  • screens that would require recreating a non-Compose UI in Compose

Do not modify preview annotations in the main source set for this workflow. Keep the main project preview files unchanged and create screenshot-specific previews only in UiReviewTemp.kt.

Reuse existing screen preview coverage by recreating the same Compose screen and state in UiReviewTemp.kt. If the original preview or its sample data is private, copy only the minimum required setup into the temp file.

Do not default to isolated component previews. Only create a component-level preview when the changed UI cannot be seen clearly in any selected screen preview.

For screenshot previews in UiReviewTemp.kt, use explicit @Preview(...) definitions so each rendered image changes only one intended variable.

For each screenshot preview:

  • use exactly one @PreviewTest
  • create one preview function per final rendered variant
  • use clear preview names such as Light, Dark, Large Font, RTL, and Landscape
  • do not use shared multi-preview annotations from the project — always write a single explicit @Preview(...) per function

Use these exact @Preview definitions for each variant:

  • Light: @Preview(name = "Light", showBackground = true, uiMode = UI_MODE_NIGHT_NO)
  • Dark: @Preview(name = "Dark", showBackground = true, uiMode = UI_MODE_NIGHT_YES)
  • Large Font: @Preview(name = "Large Font", showBackground = true, fontScale = 2.0f, uiMode = UI_MODE_NIGHT_NO)
  • RTL: @Preview(name = "RTL", showBackground = true, locale = "ar", uiMode = UI_MODE_NIGHT_NO)
  • Landscape: @Preview(name = "Landscape", showBackground = true, device = Devices.PIXEL_9, widthDp = 640, heightDp = 360, uiMode = UI_MODE_NIGHT_NO)

Treat Data variation 1 - Long strings, Data variation 2 - Null data, and any additional data variations as separate data previews. Only create a data variation when the affected screen has visible inputs that make that variation meaningful. For example:

  • Data variation 1 - Long strings applies only when visible string content can be made longer
  • Data variation 2 - Null data applies only when visible nullable inputs can be set to null

Do not mix them into every visual variation.

If the screen is Compose-based but has no usable preview at all, create a full temp screen preview for that screen.

Required Visual Variations

Every affected screen should be checked in these visual conditions when practical:

  • Light
  • Dark
  • Large font
  • Landscape
  • RTL

Data Variations

Data variations are optional. A screen may have zero data variations if none of its visible inputs support them.

When they exist, use these slots first:

  • Data variation 1 - Long strings
  • Data variation 2 - Null data

After those, add zero or more additional data variations only when the affected screen needs them:

  • Empty list
  • Other screen-specific data variations when they are justified by the changed UI

Data Variation Rules

Rules:

  • Data variation 1 - Long strings: make the visible strings longer in that preview only
  • Data variation 2 - Null data: set the visible nullable fields to null in that preview only
  • Empty list: use emptyList() in that preview only
  • Additional data variations: add them only when the changed UI has a meaningful input or state worth isolating

For each Data variation 2 - Null data preview, keep a short list of which fields were set to null.

If the app already has a dedicated empty-screen composable or preview, treat it like any other screen and include it through normal coverage. Do not give it special handling just because it is an empty state.

Temporary Preview Rules

Temporary previews are required for this workflow, and they must follow these rules:

  • Put them under WooCommerce/src/screenshotTest/kotlin/...
  • Use a stable temporary file name
  • Annotate every screenshot preview with @PreviewTest
  • Make every screenshot preview single-variation and explicit
  • Do not stack annotations in a way that can change theme, direction, font scale, and orientation at the same time
  • If the changed UI would be off-screen or too small to review in a required variation, adjust only the sample data or screen state so the changed area stays visible
  • Reuse existing preview sample data whenever possible
  • Only create previews for affected screens
  • Only create temp previews for Compose-based affected screens
  • Do not commit them
  • Delete them before finishing

Use stable names:

  • temporary preview file: UiReviewTemp.kt
  • final report folder: ui-review
  • final report file: index.html
Show full SKILL.md (659 more words)Show less

Screenshot Command

Generate screenshots with:

bash
./gradlew --no-configuration-cache -Pandroid.experimental.enableScreenshotTest=true :WooCommerce:updateVanillaDebugScreenshotTest

Do not run this in the background.

Report Template

Use the fixed HTML template at:

$skill_path/assets/report-template.html

Do not redesign the report on each run. Only fill the placeholders in the template.

The hero section is fixed:

  • show a summary badge at the top of the hero with the total number of issues found
  • format the badge text as 0 issues found, 1 issue found, or N issues found
  • use the title UI Review
  • use the subtitle Reviewed screens, followed by only a bullet list of the reviewed screen names in the hero body

The report should:

  • show issues first
  • put the most important problem at the top
  • label issue cards as Issue 1, Issue 2, Issue 3, and so on
  • number issue cards in the same order they appear in the report
  • do not add extra explanatory text outside the parts explicitly defined by these report rules
  • include annotated screenshots only where needed
  • stay visually clean and compact
  • add text below a variant title only for issue cards and data variation cards

When you need text below a variant title, use the fixed template classes directly:

  • wrap the line in .meta
  • use .meta-label for the label
  • use .meta-value for the value text

For Data variation 1 - Long strings cards in the report:

  • do not add any text below the variant title

For Data variation 2 - Null data cards in the report:

  • add one .meta line under the variant title
  • list only the fields that were set to null
  • example: Null fields: customerName, billingAddress

Asset Selection Rules

Copy only the screenshots that will actually be shown in the final report into ui-review/assets.

If dark mode is part of the generated set, make sure the final report includes at least one dark screenshot.

The final report must use only the screenshots copied into ui-review/assets. After those files are copied, the raw screenshot output folders can be deleted.

When variants are shown in the report, always keep this order:

First, show any issue variants.

After that, keep this order for the remaining variants:

  1. Light
  2. Dark
  3. Large Font
  4. RTL
  5. Data variation 1 - Long strings
  6. Data variation 2 - Null data
  7. Additional data variations in an order that matches their importance to the changed UI
  8. Landscape

If one of these variants does not exist for the current screen, skip it and keep the remaining order unchanged.

Analysis Rules

Look for:

  • wrapped or clipped tab labels
  • text overflow
  • overlap
  • broken spacing
  • unreadable contrast
  • RTL mirroring problems
  • landscape-specific awkwardness
  • large-font breakage

Treat the following as issues when they are clearly visible in the rendered images:

  • text is clipped, wrapped badly, or becomes hard to read
  • UI elements overlap each other
  • spacing breaks the layout in an obvious way
  • important content such as buttons, titles, prices, or notices becomes hidden or hard to use
  • large-font rendering breaks the layout
  • landscape rendering becomes awkward or broken
  • RTL rendering shows incorrect order, alignment, or direction
  • light or dark theme rendering makes content hard to read
  • long strings, null data, or empty lists expose a visible layout problem

These are common examples, not an exhaustive list. Also report any other clearly visible visual regression that would likely matter to a user of the screen.

Only report issues that are clearly visible in the rendered images. Do not report an issue against a required variation if the screenshot also contains an unintended second variation.

Cleanup

Before finishing:

  1. Delete temporary preview source files
  2. Copy the screenshots needed by the report into WooCommerce/build/reports/ui-review/assets
  3. Delete only generated reference screenshots for UiReviewTemp under the screenshot reference source set for the variant that was run, for example WooCommerce/src/screenshotTest<Variant>/**; do not delete the source-set directory or any non-UiReviewTemp files
  4. Delete WooCommerce/build/outputs/screenshotTest-results
  5. Delete WooCommerce/build/reports/screenshotTest
  6. Delete only the report and test-result directories for the screenshot task that was run, for example WooCommerce/build/reports/tests/<screenshotTaskName> and WooCommerce/build/test-results/<screenshotTaskName> if they were created by this run

© woocommerce, GPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (assets) in .agents/skills/ui-review of woocommerce/woocommerce-android.

  • SKILL.md
  • assets/report-template.html

Open the folder on GitHubat commit be5a50f

Compare with similar skills

UI Review 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.

UI Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Review this skillwoocommerce/woocommerce-android319—~3.1kAutomated safety check: PassGPL-2.0
Engine Whats Newflutter/flutter179k—~978Automated safety check: PassBSD-3-Clause
Android Hidden API and R8 Checkgkd-kit/gkd43k—~1.5kAutomated safety check: PassGPL-3.0
Android API Diffgkd-kit/gkd43k—~796Automated safety check: PassGPL-3.0
App Store Screenshots GeneratorParthJadhav/app-store-screenshots7.2k—~16kAutomated safety check: PassMIT
Android Readme Screenshot Studiopermissionlesstech/bitchat-android7.8k—~3kAutomated safety check: PassGPL-3.0

Similar skills

  • Engine Whats New

    flutter/flutter

    Generates the "what's new" release summary and diff file for changes in the Flutter engine (//engine/src/flutter) between two releases (e.g., 3.47 vs 3.44).

    179k GitHub stars~978 tokensUpdated today
    MobileAuto-check passed

  • Android Hidden API and R8 Check

    gkd-kit/gkd

    Checks whether Android hidden-API implementations and system callbacks survive R8 minification, and diagnoses Release-only failures such as AbstractMethodError.

    43k GitHub stars~1.5k tokensUpdated today
    MobileAuto-check passed

  • Android API Diff

    gkd-kit/gkd

    Looks up Android framework Java and AIDL APIs across versions with the android-api-diff CLI: signatures, availability, source files and hidden-API access code.

    43k GitHub stars~796 tokensUpdated today
    MobileAuto-check passed

  • App Store Screenshots Generator

    ParthJadhav/app-store-screenshots

    Scaffolds a Next.js editor for designing App Store and Google Play screenshots as ads and exporting them at every required size, for iOS, Mac and Android.

    7.2k GitHub stars~16k tokensUpdated today
    MobileAuto-check passed

  • Android Readme Screenshot Studio

    permissionlesstech/bitchat-android

    Create or refresh polished, high-resolution screenshots of the Bitchat Android app for README and repository showcase use.

    7.8k GitHub stars~3k tokensUpdated 3 days ago
    MobileAuto-check passed

  • Mobilerun Docs Reference

    droidrun/mobilerun

    Answers questions about Mobilerun, the LLM-agent framework for automating Android and iOS devices, by pointing the agent to the right page of its v5 documentation.

    9.6k GitHub stars~943 tokensUpdated today
    MobileAuto-check passed

More from woocommerce/woocommerce-android

All 11 skills in this repo

  • PR

    woocommerce/woocommerce-android

    Create a pull request following project conventions. An agent skill from woocommerce/woocommerce-android.

    319 GitHub stars~1.3k tokensUpdated today
    Auto-check: notes

  • PR Feedback

    woocommerce/woocommerce-android

    Address PR reviewer feedback by evaluating comments, proposing fixes, and executing after user approval.

    319 GitHub stars~1.3k tokensUpdated today
    Auto-check: notes

  • Setup Test Stores

    woocommerce/woocommerce-android

    Provision a disposable Jurassic Ninja store for the Maestro smoke suite, connect Jetpack to the developer's own WordPress.com test account, create WooCommerce API keys, and write .maestro/.env.local.

    319 GitHub stars~1.4k tokensUpdated today
    Auto-check: notes

  • Review

    woocommerce/woocommerce-android

    Review code changes against project architecture, style, and conventions

    319 GitHub stars~600 tokensUpdated today
    Auto-check: notes

  • Smoke Tests

    woocommerce/woocommerce-android

    Prepare the local environment for the Maestro smoke-test suite — verify tooling, select a device, collect the APK if needed, validate the .env file by variable name only, then hand the user the…

    319 GitHub stars~1.7k tokensUpdated today
    Auto-check: notes

  • Verify On Device

    woocommerce/woocommerce-android

    Build, install, and visually verify the app on an Android emulator or device.

    319 GitHub stars~10k tokensUpdated today
    Auto-check: notes

Works with

Categories

Questions about UI Review

What does UI Review do?

Generate screenshot coverage for screen-level Compose previews from the current diff or a specific target, check required visual and data variations, and produce a compact visual report. UI Review is an agent skill from woocommerce/woocommerce-android.

When should I use UI Review?

UI Review fits situations like: mobile work in your project.

How do I install UI Review in Claude Code?

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

How do I install UI Review in Codex?

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

Can I use UI Review 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-android --skill ui-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-review, .gemini/skills/ui-review, .github/skills/ui-review and .opencode/skills/ui-review in your project.

What does UI Review need to run?

Going by SKILL.md and its folder, UI Review needs the command-line tools its instructions call (git).

Does UI Review access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is UI Review safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Review use?

UI Review 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 UI Review use?

About 3.1k tokens (SKILL.md is roughly 12k 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 UI Review?

Skills that share tags, products or a category with UI Review: Engine Whats New (flutter/flutter, 179k stars), Android Hidden API and R8 Check (gkd-kit/gkd, 43k stars), Android API Diff (gkd-kit/gkd, 43k stars) and App Store Screenshots Generator (ParthJadhav/app-store-screenshots, 7.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Review?

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

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