# Ui Validator

> 任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。

- **Type:** Skill
- **Install:** `agentstack add skill-caomeiyouren-cmyr-skills-agents-ui-validator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [CaoMeiYouRen](https://agentstack.voostack.com/s/caomeiyouren)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [CaoMeiYouRen](https://github.com/CaoMeiYouRen)
- **Source:** https://github.com/CaoMeiYouRen/cmyr-skills-agents/tree/master/skills/ui-validator

## Install

```sh
agentstack add skill-caomeiyouren-cmyr-skills-agents-ui-validator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI Validator

铁律：没有真实渲染证据，就不能宣布 UI 改动完成。

## 工作流

- [ ] Step 1: 开发环境自检 ⚠️ REQUIRED
    - [ ] 1.1 先确认目标服务是否已启动，避免重复拉起开发服务器。
    - [ ] 1.2 明确要访问的页面、组件演示路径或交互入口。
- [ ] Step 2: 执行浏览器验证 ⚠️ REQUIRED
    - [ ] 2.1 至少检查默认主题和暗色模式。
    - [ ] 2.2 必要时检查移动端与桌面端视口。
    - [ ] 2.3 对关键交互执行点击、悬停、输入或状态切换。
- [ ] Step 3: 留证据
    - [ ] 3.1 优先使用截图、可访问性快照或计算样式值作为证据。
    - [ ] 3.2 记录问题发生条件，而不是只说“样式不对”。
- [ ] Step 4: 回归结论
    - [ ] 4.1 明确哪些场景通过、哪些仍有问题。
    - [ ] 4.2 如果发现回归，反馈到前端实现阶段处理。

## 重点检查

- light / dark 模式。
- desktop / mobile 布局。
- 关键交互状态。
- 对比度、间距、圆角、层级、溢出和禁用态。

## 反模式

- 不开页面，只读代码就宣布 UI 正常。
- 只看一张截图，不验证交互状态。
- 不说明问题发生条件和视口尺寸。

## 交付前检查

- [ ] 已在真实页面验证关键场景。
- [ ] 已留截图、快照或样式值证据。
- [ ] 已覆盖至少两种主题或关键视口。
- [ ] 结论中明确了通过项与残余问题。

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [CaoMeiYouRen](https://github.com/CaoMeiYouRen)
- **Source:** [CaoMeiYouRen/cmyr-skills-agents](https://github.com/CaoMeiYouRen/cmyr-skills-agents)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-caomeiyouren-cmyr-skills-agents-ui-validator
- Seller: https://agentstack.voostack.com/s/caomeiyouren
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.