菜单
Run a browser-based UI review of the WordPress.com Help Center across multiple surfaces, looking for visual and behavioral issues. Use when asked to test the Help Center UI.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Automattic/wp-calypso --skill help-center-ui-test命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | help-center-ui-test |
| description | Run a browser-based UI review of the WordPress.com Help Center across multiple surfaces, looking for visual and behavioral issues. Use when asked to test the Help Center UI. |
| allowed-tools | Read, Glob, Grep, AskUserQuestion, Bash, Agent, ToolSearch |
Performs a systematic browser-based UI review of the Help Center using Chrome automation (Claude in Chrome extension).
/chrome in Claude Code if not connected.ToolSearch to load Chrome tools: select:mcp__claude-in-chrome__tabs_context_mcp.mcp__claude-in-chrome__tabs_context_mcp to get current tabs.mcp__claude-in-chrome__tabs_create_mcp.After opening the Help Center on each surface, and after key interactions, check for errors:
mcp__claude-in-chrome__read_console_messages with pattern: "(error|Error|ERROR)" to capture JS errors.mcp__claude-in-chrome__read_network_requests and check for any requests with HTTP status >= 400.Check for errors at these points:
Log any errors found as issues in the test results, categorized as "Console Error" or "Network Error".
Test the Help Center on both surfaces, one at a time:
https://my.wordpress.com/siteshttps://en.support.wordpress.com/wp-admin/https://en.support.wordpress.com/wp-admin/post-new.phpFor each surface:
mcp__claude-in-chrome__find to locate the ? help icon. If not found, wait 3 seconds with mcp__claude-in-chrome__computer (action: wait) and retry.? icon to open the Help Center.mcp__claude-in-chrome__find to confirm the search bar or home screen content has appeared. If not found, wait 3 seconds and retry.For each surface, verify all of the following:
mcp__claude-in-chrome__find to confirm search results have appeared. If not found, wait 3 seconds and retry. Verify results show titles and descriptions.mcp__claude-in-chrome__find to confirm the empty state has appeared. Verify a fallback action appears (e.g., "Ask AI assistant" button).mcp__claude-in-chrome__find to confirm the article heading has rendered. If not found, wait 3 seconds and retry.mcp__claude-in-chrome__find to confirm the AI response has appeared. If not found, wait 5 seconds and retry (AI responses may take longer).After completing the full test checklist at desktop size on each surface, test responsive layouts at additional viewports.
| Name | Width | Height |
|---|---|---|
| Desktop | 1280 | 800 |
| Mobile | 375 | 812 |
For each surface, after the desktop checklist is complete:
mcp__claude-in-chrome__resize_window to switch to Mobile (375x812).mcp__claude-in-chrome__resize_window to restore Desktop (1280x800) before moving to the next surface.Every test run must produce a structured summary using this format:
## Test Results Summary
### Surface: [Calypso Dashboard / WP Admin]
| # | Check | Viewport | Status | Issue | Evidence |
|---|-------|----------|--------|-------|----------|
| 1 | Home Screen — layout | Desktop | PASS/FAIL | Description | screenshot.png |
| 2 | Home Screen — guides | Desktop | PASS/FAIL | Description | |
| ... | ... | ... | ... | ... | ... |
### Console & Network Errors
| Surface | Type | Message/URL | HTTP Status |
|---------|------|-------------|-------------|
| Calypso | Network | /wpcom/v2/help/search | 500 |
| WP Admin | Console | TypeError: ... | — |
### Overall: X passed, Y failed, Z errors
Only FAIL rows and errors should be filed as Linear issues.
For every issue found during testing, record a GIF using mcp__claude-in-chrome__gif_creator:
gif_creator with action: start_recording on the Help Center tab.gif_creator with action: stop_recording.Name GIFs descriptively (e.g., "search-clear-button-bug.gif"). For static visual issues, a single-frame GIF (start → screenshot → stop) is sufficient.
After completing all tests, if issues were found:
ToolSearch to load Linear tools: +linear save issue.mcp__linear-server__save_issue including:
Title: Clear, concise description of the bug.
Description (Markdown) — use this template:
## Bug Report
### Steps to Reproduce
1. ...
### Expected Behavior
...
### Actual Behavior
...
### Surface
- [X] Calypso Dashboard
- [ ] WP Admin
Team: Ask user or default to "Dotcom Support Infrastructure" (DOTSUP).
Project: The project the user specified.
If the user wants to attempt fixes:
git checkout -b DOTSUP-448).After creating each Linear issue, attach the GIF to the description via drag-and-drop. GIF recordings are scoped to the tab group, so they can be exported directly onto the Linear tab.
Navigate to the Linear issue in a Chrome tab (same tab group as the Help Center tab):
https://linear.app/a8c/issue/<ISSUE-ID>
Use mcp__claude-in-chrome__find to confirm the issue description is visible. If not found, wait 3 seconds and retry.
Export the GIF with mcp__claude-in-chrome__gif_creator using action: export, setting tabId to the Linear tab and coordinate to a point inside the issue description area. The GIF will be embedded in the description (exact placement within the description may vary).
Verify: Take a screenshot of the Linear tab to confirm the image was embedded.
mcp__claude-in-chrome__read_page with filter: interactive to find clickable elements.mcp__claude-in-chrome__find for natural language element search (e.g., "Help Center close button").mcp__claude-in-chrome__computer with action: left_click and ref parameter to click elements by reference ID.mcp__claude-in-chrome__find to confirm elements have appeared after actions instead of fixed-delay sleeps. If an element isn't found, wait 3 seconds with mcp__claude-in-chrome__computer (action: wait, duration: 3) and retry up to 3 times.? icon again to reopen it.