Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
Chinese-language final-check method for UI visual changes before delivery, using multi-theme screenshot matrices, pixel-level evidence and a CSS cascade checklist.
SKILL.md written in Chinese; this summary is our English description.
Install Visual Acceptance Review
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptance --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .claude/skills/visual-acceptance && rm -rf skills-srcUse ~/.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/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .claude/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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 install https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptanceType 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.
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptance --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .agents/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .agents/skills/visual-acceptance && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .agents/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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.
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptance --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .cursor/skills/visual-acceptance && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .cursor/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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 https://github.com/huiliyi37/Tianshu-harness.git --path runtime-assets/bundled-skills/visual-acceptance--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptance --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .gemini/skills/visual-acceptance && rm -rf skills-srcUse ~/.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/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .gemini/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptanceInstalls 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).
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .github/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .github/skills/visual-acceptance && rm -rf skills-srcUse ~/.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/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .github/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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.
$ npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install huiliyi37/Tianshu-harness visual-acceptance --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/runtime-assets/bundled-skills/visual-acceptance .opencode/skills/visual-acceptance && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "visual-acceptance" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/runtime-assets/bundled-skills/visual-acceptance into .opencode/skills/visual-acceptance/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-acceptance", 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
visual-acceptance- GitHub stars
- 1.1k
- Token cost
- ~601 tokens
- SKILL.md length
- 136 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Chinese-language final-check method for UI visual changes before delivery, using multi-theme screenshot matrices, pixel-level evidence and a CSS cascade checklist.
- Works in 4 steps: 复现术——不起整个 app 的截图矩阵 → 像素真值判据链 → CSS 层叠陷阱 → …
- Checking a finished UI visual change before it ships
- SKILL.md covers Stage 1: 复现术——不起整个 app 的截图矩阵, Stage 2: 像素真值判据链, Stage 3: CSS 层叠陷阱 and Stage 4: 布局漂移审查, plus 1 more section
- Calls python3
What it does
Written in Chinese, the skill is explicitly an acceptance method, not an implementation one: it checks that someone looked at the finished change before delivery, with evidence rather than an assumption it is fine. The first stage builds a minimal harness instead of running the whole app: it copies compiled production CSS rather than source CSS, since minification can change the cascade; rebuilds the harness HTML with real class names; injects real theme tokens the way the product's loader does; captures a screenshot for every theme, including translucent ones as a stress test; and freezes animations to a chosen frame, archiving each shot with a date and scenario name.
The second stage chains from looking, to a sampled pixel value, to the computed style, to the CSS source, trusting whichever check sits one step lower whenever it contradicts the one above, since a display pipeline can render a light color as dark or hide a background bug as nothing captured. The third stage covers CSS cascade traps, such as an important rule in production code beating a harness's ordinary rule, and a host background the harness must add explicitly or risk misreading missing chrome as a defect. The fourth stage reads every small element's visual ownership, catching a flex sibling pushing a badge out to the end of a row. A closing checklist ties the four stages together.
When your agent uses it
- Checking a finished UI visual change before it ships
- Verifying readability across several themes, including translucent ones
- Suspecting a screenshot's colors are wrong and needing pixel-level evidence
- Reviewing whether an element got pushed out of place by a layout change
Example prompts
- “This change is shipping. Run the multi-theme screenshot matrix before/after check.”
- “This screenshot's background looks off. Read the pixel values to confirm it.”
- “Check whether this badge got pushed out of place by the flex layout.”
Requirements
- A headless browser such as Playwright, to script the screenshot harness
- The project's compiled production CSS and theme token definitions
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit ce4b60a. 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:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Visual Acceptance Review loads about 601 tokens when it runs. Until then it costs about 32 tokens; SKILL.md has 136 words of instructions outside code blocks.
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 huiliyi37/Tianshu-harness at commit ce4b60a, republished under its Apache-2.0 licence (© huiliyi37). 136 words, ~601 tokens.
Download SKILL.mdSave it as
.claude/skills/visual-acceptance/SKILL.md (or your agent's skills folder).- name
- visual-acceptance
- description
- UI/视觉改动交付前的终验方法论——多主题截图矩阵复现、像素真值判据链、CSS 层叠陷阱、布局漂移审查、before/after 存证。当视觉改动需要验收（而非实现）时使用：交付前最后一环，回答「看得见的部分真的对吗」。
- triggers
- 视觉验证|视觉回归|视觉终验|视觉验收|截图对比|截图存证|三主题|收灯验收|visual.?regression|visual.?acceptance|screenshot.?diff|pixel.?check
Visual Acceptance — 视觉终验方法论
你在任意项目中对 UI/视觉改动做交付前的最后一道审视。你可能没写这些代码，项目的主题系统、构建管道你也未必熟——但你必须给出「看得见的部分是对的」这个结论，且结论要有证据形状：截图矩阵、像素值、before/after 对照，而不是「应该没问题」。
分工界线：这是验收技能，不是实现技能。界面怎么做出来是实现者的事； 这里管的是做出来之后，交付前有没有人真的看过、看的方法对不对、证据留没留。
Stage 1: 复现术——不起整个 app 的截图矩阵
完整跑起应用再人肉点到目标界面，慢且不可复跑。正确姿势是搭一个最小 harness：
- 用生产构建的编译 CSS，不用源码 CSS。 找到构建产物里的样式文件（
dist/、build/、.next/等），复制进 harness。源码 CSS 验的是近似，编译产物才是产品——预处理器、压缩、autoprefixer 都可能改变最终层叠。 - harness HTML 用真实类名复刻目标场景。 从产品 DOM 里抄结构和 class，不要手写近似样式。before/after 同页并排——一张截图直接回答「改动好在哪」。
- 主题 token 注入。 读项目的主题定义（CSS variables JSON / theme 文件），用 playwright 的
page.evaluate（或等价手段）把变量批量设到根元素上，与产品的 theme-loader 同语义。 - 多主题矩阵一个不能少。 至少 light/dark 各截一张；若产品有半透明/玻璃/壁纸类主题，它是可读性的极限测试（半透明底 + 任意背景），必须在列。每主题 fullPage 截图。
- 动画冻结成静帧。 shimmer/pulse 类动画用
animation-play-state: paused加负值animation-delay钉在特征帧上，静态截图才可检。 - 截图归档为交付资产。 命名带日期与场景，放进项目的文档资产目录——它们是验收证据，不是临时文件。
Stage 2: 像素真值判据链
目视会骗人，且两个方向都骗：真浅色的图能被显示管道渲成深色（读图工具伪影），真白的底能让人以为「没截到」（实为 CSS 层叠 bug）。判据链逐级下钻，任何一级与上一级矛盾时，信下一级：
目视 → PNG 像素值 → computed style → CSS 层叠来源读像素（三点采样：角落/中部/目标区域）：
python3 -c "from PIL import Image; im=Image.open('shot.png').convert('RGB'); print(im.getpixel((10,10)), im.getpixel((640,400)), im.getpixel((640,780)))"- 像素与目视矛盾 → 显示管道伪影，截图本身没问题，别为不存在的 bug 改代码。
- 像素证实异常但 computed style 正确 → 问题在渲染层之下，查层叠来源与合成（Stage 3）。
Stage 3: CSS 层叠陷阱
!important只向!important低头。 产品 CSS 里的!important规则会静默压掉 harness/宿主环境的普通规则；对抗它需要同 specificity 的!important且源序更靠后。debug 时单独设 class 一切正常、组合路径才踩中——层叠问题的典型形状。- 宿主底色假设要显式补齐。 产品若假设「外壳提供背景」（透明窗体、iframe 宿主、系统壁纸垫底），harness 必须显式补一层底，否则截图里的白/黑是环境缺失，会被误判成产品缺陷（或掩盖真缺陷）。
Stage 4: 布局漂移审查
typecheck 与单元测试都不报的布局问题，静态截图审查一眼现形。逐行扫截图里每个小元素的归属感——它看起来属于谁：
- flex 容器里
flex: 1的元素会把后续兄弟推到行尾。语义上「紧跟」主元素的小标识（序号、徽记、计数）必须嵌进主元素内部，不能做兄弟节点。 - 同一 DOM 模式在不同 flex 上下文中行为不同——一处对不代表处处对，每个使用场景各截一张。
收灯清单
全部满足才算验收通过：
- 多主题矩阵截齐，半透明主题下所有新元素可辨、可读
- before/after 同页对照存在，能一图回答「好在哪」
- 目视存疑处有像素值证据（不是「看着像对的」）
- 截图归档进项目文档资产目录，命名可溯源
- 布局归属感逐行扫过（没有被 flex 推走的孤儿元素）
© huiliyi37, Apache-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
Just SKILL.md in runtime-assets/bundled-skills/visual-acceptance of huiliyi37/Tianshu-harness.
Open the folder on GitHubat commit ce4b60a
Compare with similar skills
Visual Acceptance 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Visual Acceptance Review this skillhuiliyi37/Tianshu-harness | 1.1k | — | ~601 | Automated safety check: Pass | Apache-2.0 | |
| Computed Stylesbitovi/ai-enablement-prompts | 121 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Control UIcursor/plugins | 10k | 2 repos | ~1.2k | Automated safety check: Pass | None | |
| Component CSS Modules MigrationClickHouse/click-ui | 135 | — | ~7.7k | Automated safety check: Pass | Apache-2.0 | |
| Plugin InstallerIgorWarzocha/Opencode-Workflows | 122 | — | ~1.3k | Automated safety check: Pass | None | |
| Browser QAaffaan-m/ECC | 276k | 2 repos | ~1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Control UI
cursor/plugins
Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI.
Component CSS Modules Migration
ClickHouse/click-ui
Migrate a click-ui component from styled-components to CSS Modules with byte-for-byte visual regression coverage.
Plugin Installer
IgorWarzocha/Opencode-Workflows
Find, install, and configure OpenCode plugins from the catalog or community.
Browser QA
affaan-m/ECC
Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction…
- Official
Sanity Visual Regression
sanity-io/sanity
Add, review, and maintain Chromatic visual regression coverage in the Sanity monorepo via dev/storybook stories, the vitest browser-mode suite, and Playwright e2e snapshots.
More from huiliyi37/Tianshu-harness
Agent Harness Testing Methodology
huiliyi37/Tianshu-harness
Guides an agent through probing an unfamiliar project's test setup, then choosing a red-light-first testing strategy matched to the task type.
Frontend Prototype Workflow
huiliyi37/Tianshu-harness
Asks one clarifying question at a time, then builds two or three single-file HTML prototypes checked across phone, tablet, and desktop widths.
Word Document Generator
huiliyi37/Tianshu-harness
Generates and reads Word (.docx) documents such as reports, contracts and bids from heading, paragraph, table, code and list blocks, with a centered title.
Office Excel
huiliyi37/Tianshu-harness
Excel 电子表格读写与编辑最佳实践 — 用 xlsxread/xlsxwrite/xlsxedit 处理 .xlsx 时遵守的公式、数字格式与可维护性纪律
Office PDF Generator and Reader
huiliyi37/Tianshu-harness
Generates formal PDFs from structured content blocks with automatic CJK font handling and page numbers, and reads text back out of existing PDFs.
Office PPT Design Rules
huiliyi37/Tianshu-harness
Sets design rules for building PowerPoint decks with the pptx_create and pptx_read tools: a dominant color, varied layouts, readable type and a read-back check.
Related
Works with
Categories
Questions about Visual Acceptance Review
What does Visual Acceptance Review do?
Chinese-language final-check method for UI visual changes before delivery, using multi-theme screenshot matrices, pixel-level evidence and a CSS cascade checklist. Written in Chinese, the skill is explicitly an acceptance method, not an implementation one: it checks that someone looked at the finished change before delivery, with evidence rather than an assumption it is fine. The first stage builds a minimal harness instead of running the whole app: it copies compiled production CSS rather than source CSS, since minification can change the cascade; rebuilds the harness HTML with real class names; injects real theme tokens the way the product's loader does; captures a screenshot for every theme, including translucent ones as a stress test; and freezes animations to a chosen frame, archiving each shot with a date and scenario name.
When should I use Visual Acceptance Review?
Visual Acceptance Review fits situations like: checking a finished UI visual change before it ships; verifying readability across several themes, including translucent ones; suspecting a screenshot's colors are wrong and needing pixel-level evidence; reviewing whether an element got pushed out of place by a layout change.
How do I install Visual Acceptance Review in Claude Code?
Run `npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a claude-code`. Or copy the skill folder (runtime-assets/bundled-skills/visual-acceptance in huiliyi37/Tianshu-harness) into .claude/skills/visual-acceptance in your project. Claude Code loads it when a task matches its description.
How do I install Visual Acceptance Review in Codex?
Run `npx skills add huiliyi37/Tianshu-harness --skill visual-acceptance -a codex`. Or copy the skill folder (runtime-assets/bundled-skills/visual-acceptance in huiliyi37/Tianshu-harness) into .agents/skills/visual-acceptance in your project. Codex loads it when a task matches its description.
Can I use Visual Acceptance 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 huiliyi37/Tianshu-harness --skill visual-acceptance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-acceptance, .gemini/skills/visual-acceptance, .github/skills/visual-acceptance and .opencode/skills/visual-acceptance in your project.
What does Visual Acceptance Review need to run?
Going by SKILL.md and its folder, Visual Acceptance Review needs the command-line tools its instructions call (python3). Our summary lists: A headless browser such as Playwright, to script the screenshot harness; The project's compiled production CSS and theme token definitions.
Does Visual Acceptance Review access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Visual Acceptance 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 Visual Acceptance Review use?
Visual Acceptance Review is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Visual Acceptance Review use?
About 601 tokens (SKILL.md is roughly 2.4k 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 Visual Acceptance Review?
Skills that share tags, products or a category with Visual Acceptance Review: Computed Styles (bitovi/ai-enablement-prompts, 121 stars), Control UI (cursor/plugins, 10k stars), Component CSS Modules Migration (ClickHouse/click-ui, 135 stars) and Plugin Installer (IgorWarzocha/Opencode-Workflows, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Visual Acceptance Review?
huiliyi37 (a GitHub user) maintains it in huiliyi37/Tianshu-harness, which has 1,080 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 9, 2026.
Source: huiliyi37/Tianshu-harness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.