Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
@opentiny/next-sdk 的 page-agent-tool / a11y / registerPageAgentTool 相关开发。
Install Next SDK Page Agent
$ npx skills add opentiny/webmcp-sdk --skill next-sdk-page-agent -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install opentiny/webmcp-sdk next-sdk-page-agent --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/opentiny/webmcp-sdk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .claude/skills/next-sdk-page-agent && 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 "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .claude/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agentType 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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install opentiny/webmcp-sdk next-sdk-page-agent --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/webmcp-sdk.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .agents/skills/next-sdk-page-agent && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .agents/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install opentiny/webmcp-sdk next-sdk-page-agent --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/webmcp-sdk.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .cursor/skills/next-sdk-page-agent && 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 "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .cursor/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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/opentiny/webmcp-sdk.git --path packages/next-sdk/skills/page-agent--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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install opentiny/webmcp-sdk next-sdk-page-agent --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/webmcp-sdk.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .gemini/skills/next-sdk-page-agent && 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 "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .gemini/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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 opentiny/webmcp-sdk next-sdk-page-agentInstalls 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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/opentiny/webmcp-sdk.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .github/skills/next-sdk-page-agent && 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 "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .github/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install opentiny/webmcp-sdk next-sdk-page-agent --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/opentiny/webmcp-sdk.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/next-sdk/skills/page-agent .opencode/skills/next-sdk-page-agent && 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 "next-sdk-page-agent" agent skill from https://github.com/opentiny/webmcp-sdk/tree/dev/packages/next-sdk/skills/page-agent into .opencode/skills/next-sdk-page-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "next-sdk-page-agent", 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
next-sdk-page-agent- GitHub stars
- 121
- Token cost
- ~815 tokens
- SKILL.md length
- 161 words
- Files
- 1
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
@opentiny/next-sdk 的 page-agent-tool / a11y / registerPageAgentTool 相关开发。
- Tasks that involve Accessibility
- SKILL.md covers 动手前（硬门禁）, 何时使用, 入口 and 关键 API（符号级）, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Next SDK Page Agent is an agent skill from opentiny/webmcp-sdk. @opentiny/next-sdk 的 page-agent-tool / a11y / registerPageAgentTool 相关开发。 在修改 page-tools、无障碍配置、console-cloud 预设、runtime 注入时使用。
Its SKILL.md is about 820 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 Frontend & Design, covering Accessibility. The repository describes itself as: OpenTiny NEXT-SDKs is a front-end AI and browser automation toolkit. It implements WebMCP + WebSkills to build AI-native apps, and leverages webmcp-cli to enable LLM agents to…. The licence is MIT.
When your agent uses it
- Tasks that involve Accessibility
Example prompts
- “/next-sdk-page-agent”
What it can do on your machine
Read from SKILL.md and the folder at commit 47a2b03. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
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
Next SDK Page Agent loads about 815 tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 161 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 opentiny/webmcp-sdk at commit 47a2b03, republished under its MIT licence (© opentiny). 161 words, ~815 tokens.
Download SKILL.mdSave it as
.claude/skills/next-sdk-page-agent/SKILL.md (or your agent's skills folder).- name
- next-sdk-page-agent
- description
- @opentiny/next-sdk 的 page-agent-tool / a11y / registerPageAgentTool 相关开发。 在修改 page-tools、无障碍配置、console-cloud 预设、runtime 注入时使用。
next-sdk Page Agent Skill
动手前（硬门禁）
先遵守根 AGENTS.md「任务分流」。修改下列任一内容前，必须先创建或更新 packages/next-sdk/specs/REQ-YYYYMMDD-slug/（仅当用户明确豁免时可例外）：
- 公开 API / 类型（含
A11yRoleRule、A11yConfig、PageAgentToolOptions等） consoleCloudPageAgentToolOptions或其他默认/预设行为- 无障碍树构建、剪枝、Static-Lift、序列化语义
- 需要更新
docs/webmcp-sdk/page-agent-tool.md的行为说明
近期示例：specs/REQ-20260904-contenteditable-a11y-ref/、specs/REQ-20260903-mask-cursor-lifecycle/、specs/REQ-20260817-clipboard-handler/。
拿不准是否琐碎 → 先问用户，不要默认开写。
何时使用
- 改
packages/next-sdk/page-tools/** - 注册或配置
registerPageAgentTool - 调整
a11yConfig、站点预设consoleCloudPageAgentToolOptions - 改
runtime.ts挂载的 page-agent API
权威长文：docs/webmcp-sdk/page-agent-tool.md
入口
| 入口 | 用途 |
|---|---|
index.ts | 完整浏览器侧导出 |
core.ts | 无 DOM 精简入口（不含完整 page-agent API） |
runtime.ts | CDN/IIFE：挂 API，不自动 registerPageAgentTool |
关键 API（符号级）
import {
registerPageAgentTool,
getPageAgentToolConfig,
setPageAgentToolConfig,
defineA11yConfig,
consoleCloudPageAgentToolOptions,
isConsoleCloudHost,
buildA11yTree,
searchA11yTree,
PAGE_AGENT_TOOL_CALL_EVENT,
PAGE_AGENT_TOOL_RESULT_EVENT,
} from '@opentiny/next-sdk'registerPageAgentTool(options?)：注册page-agent-tool，内部调用initializeBuiltinWebMCP()（默认forcePolyfill: true，覆盖会崩溃的 Chromium 实验性 native）；重复调用为 replace 式重新初始化。返回{ showMask, hideMask }。Chrome 146+ 原生registerTool在非 origin-keyed 文档上抛SecurityErrorDOMException；SDK 会中和document/navigatornative 并把 JS polyfill 挂到 document 实例。polyfill 在originAgentCluster === false时也会抛空消息SecurityError，仅对 polyfill 实例绕过该检查。- 运行期唯一配置面：
getPageAgentToolConfig/setPageAgentToolConfig（a11yConfig数组合并；enableHighlight/cursorMode覆盖；支持mode: 'replace'）。 cursorMode：'actionOnly'（默认，仅操作类出光标） /'always'/'never'。无参showMask()默认不出光标；操作类结束后若遮罩仍开着且cursorMode !== 'always'则收光标。always下显式{ showCursor: false }仍可临时隐藏；never覆盖显式showCursor: true。whitelist/blacklist中的选择器字符串在构建无障碍树时 动态解析。A11yRoleRule.name：可选声明可访问名（不改 DOM），用于 landmark / 布局容器在 YAML 中保留分区名。- 站点预设：云控制台用
consoleCloudPageAgentToolOptions+isConsoleCloudHost()（含ti-app-layout-*landmark）。 clipboardaction：text有值写剪切板、无值读剪切板；不依赖index、不展示 mask；handler 见page-tools/handlers/clipboard.ts。- contenteditable：
browserState将自身声明contenteditable的编辑宿主标为textbox（显式 role 优先）、分配 ref、输出[contenteditable]token；fill用该 ref 填写。继承可编辑的子孙不单独占 ref。见REQ-20260904-contenteditable-a11y-ref。
测试落点
packages/next-sdk/test/page-tools/（Vitest + jsdom）
修 Bug 须在用例中用中文写清复现场景，例如：
it('复现：… —— 前置…；步骤…；期望…', () => {})注意
- 不要再引入已废弃的独立
getA11yConfig/setA11yConfig。 - 包约定见
packages/next-sdk/AGENTS.md。
© opentiny, MIT. 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 packages/next-sdk/skills/page-agent of opentiny/webmcp-sdk.
Open the folder on GitHubat commit 47a2b03
Compare with similar skills
Next SDK Page Agent 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 |
|---|---|---|---|---|---|---|
| Next SDK Page Agent this skillopentiny/webmcp-sdk | 121 | — | ~815 | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None | |
| Accessibility Reviewmarkmead/hyperui | 12k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Accessibility Fixeribelick/ui-skills | 9.6k | 4 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Wcag Audit PatternsvmDeshpande/ai-agent-automation | 178 | 11 repos | ~610 | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
More from opentiny/webmcp-sdk
Webmcp CLI Cdp
opentiny/webmcp-sdk
面向第三方 AI Agent 的 CDP 直连模式执行指南：通过 Chrome DevTools Protocol 独立沙箱操作浏览器，自动注入 page-agent-tool 及领域工具。
Webmcp CLI Wxt
opentiny/webmcp-sdk
面向第三方 AI Agent 的 WXT 扩展桥接模式执行指南：通过 Tiny Robot 扩展 WebSocket 桥接操控用户真实浏览器，复用登录态/Cookie，支持双向本地 Bash 协同与高层自主 Agent 委托。
Drawer Expert
opentiny/webmcp-sdk
擅长绘制各种图表、流程图、架构图等，能够提供专业的设计建议和方案
Month Report Expert
opentiny/webmcp-sdk
擅长通过工具调用帮助用户生成月报。
Related
Categories
Questions about Next SDK Page Agent
What does Next SDK Page Agent do?
@opentiny/next-sdk 的 page-agent-tool / a11y / registerPageAgentTool 相关开发。. Next SDK Page Agent is an agent skill from opentiny/webmcp-sdk.
When should I use Next SDK Page Agent?
Next SDK Page Agent fits situations like: tasks that involve Accessibility.
How do I install Next SDK Page Agent in Claude Code?
Run `npx skills add opentiny/webmcp-sdk --skill next-sdk-page-agent -a claude-code`. Or copy the skill folder (packages/next-sdk/skills/page-agent in opentiny/webmcp-sdk) into .claude/skills/next-sdk-page-agent in your project. Claude Code loads it when a task matches its description.
How do I install Next SDK Page Agent in Codex?
Run `npx skills add opentiny/webmcp-sdk --skill next-sdk-page-agent -a codex`. Or copy the skill folder (packages/next-sdk/skills/page-agent in opentiny/webmcp-sdk) into .agents/skills/next-sdk-page-agent in your project. Codex loads it when a task matches its description.
Can I use Next SDK Page Agent 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 opentiny/webmcp-sdk --skill next-sdk-page-agent -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/next-sdk-page-agent, .gemini/skills/next-sdk-page-agent, .github/skills/next-sdk-page-agent and .opencode/skills/next-sdk-page-agent in your project.
What does Next SDK Page Agent need to run?
SKILL.md names no scripts, command-line tools or credentials: Next SDK Page Agent is instructions for the agent only.
Does Next SDK Page Agent 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 Next SDK Page Agent 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 Next SDK Page Agent use?
Next SDK Page Agent is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Next SDK Page Agent use?
About 815 tokens (SKILL.md is roughly 3.3k 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 Next SDK Page Agent?
Skills that share tags, products or a category with Next SDK Page Agent: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Next SDK Page Agent?
opentiny (a GitHub organization) maintains it in opentiny/webmcp-sdk, which has 121 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on September 21, 2026.
Source: opentiny/webmcp-sdk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.