Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。
Install UI Validator
$ npx skills add CaoMeiYouRen/caomei-auth --skill ui-validator -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install CaoMeiYouRen/caomei-auth ui-validator --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/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/ui-validator .claude/skills/ui-validator && 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 "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .claude/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validatorType 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 CaoMeiYouRen/caomei-auth --skill ui-validator -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install CaoMeiYouRen/caomei-auth ui-validator --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills/ui-validator .agents/skills/ui-validator && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .agents/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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 CaoMeiYouRen/caomei-auth --skill ui-validator -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install CaoMeiYouRen/caomei-auth ui-validator --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills/ui-validator .cursor/skills/ui-validator && 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 "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .cursor/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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/CaoMeiYouRen/caomei-auth.git --path .github/skills/ui-validator--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 CaoMeiYouRen/caomei-auth --skill ui-validator -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install CaoMeiYouRen/caomei-auth ui-validator --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills/ui-validator .gemini/skills/ui-validator && 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 "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .gemini/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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 CaoMeiYouRen/caomei-auth ui-validatorInstalls 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 CaoMeiYouRen/caomei-auth --skill ui-validator -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills/ui-validator .github/skills/ui-validator && 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 "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .github/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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 CaoMeiYouRen/caomei-auth --skill ui-validator -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install CaoMeiYouRen/caomei-auth ui-validator --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/CaoMeiYouRen/caomei-auth.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills/ui-validator .opencode/skills/ui-validator && 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 "ui-validator" agent skill from https://github.com/CaoMeiYouRen/caomei-auth/tree/master/.github/skills/ui-validator into .opencode/skills/ui-validator/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-validator", 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
ui-validator- GitHub stars
- 220
- Token cost
- ~235 tokens
- SKILL.md length
- 58 words
- Files
- 1
- Skills in repo
- 14
- Repo updated
- First seen
- Licence
- MIT
At a glance
任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。
- Tasks that involve Theming and dark mode
- SKILL.md covers 工作流, 重点检查, 反模式 and 交付前检查
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
UI Validator is an agent skill from CaoMeiYouRen/caomei-auth. 任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。
Its SKILL.md is about 240 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 Theming and dark mode. The repository describes itself as: 草梅 Auth 是一个基于 Nuxt 全栈框架的统一登录平台。支持 OAuth2.0 协议，集成邮箱、用户名、手机号、验证码、社交媒体等多种登录注册方式。 The licence is MIT.
When your agent uses it
- Tasks that involve Theming and dark mode
Example prompts
- “/ui-validator”
What it can do on your machine
Read from SKILL.md and the folder at commit 7bd3bae. 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.
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
UI Validator loads about 235 tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 58 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 CaoMeiYouRen/caomei-auth at commit 7bd3bae, republished under its MIT licence (© CaoMeiYouRen). 58 words, ~235 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-validator/SKILL.md (or your agent's skills folder).- name
- ui-validator
- description
- 任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。
- metadata.internal
- true
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 正常。
- 只看一张截图，不验证交互状态。
- 不说明问题发生条件和视口尺寸。
交付前检查
- 已在真实页面验证关键场景。
- 已留截图、快照或样式值证据。
- 已覆盖至少两种主题或关键视口。
- 结论中明确了通过项与残余问题。
© CaoMeiYouRen, 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 .github/skills/ui-validator of CaoMeiYouRen/caomei-auth.
Open the folder on GitHubat commit 7bd3bae
Compare with similar skills
UI Validator 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 |
|---|---|---|---|---|---|---|
| UI Validator this skillCaoMeiYouRen/caomei-auth | 220 | — | ~235 | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT |
Similar skills
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
More from CaoMeiYouRen/caomei-auth
All 14 skills in this repoCode Reviewer
CaoMeiYouRen/caomei-auth
审查当前 git 变更、PR、提交范围、技能定义文件、架构调整或安全敏感代码时使用。输出结构化 Review Gate 结论（Pass/Reject）、问题分级（blocker/warning/suggest）、最低验证矩阵、证据链与复查基线。覆盖正确性、安全、架构、SOLID、可删除代码、性能、异常处理与测试风险；默认只输出 review，不直接修改代码。用户提到 review、code…
Full Stack Master
CaoMeiYouRen/caomei-auth
需要统筹需求澄清、上下文扫描、技术方案、前后端实现、UI 验证、测试、质量审查、文档同步和提交节奏时使用。它负责编排多技能协作，而不是亲自替代所有专业技能。用户提到 end-to-end workflow、全流程开发、从需求到提交、PDTFC+、多技能编排时都应触发。
Quality Guardian
CaoMeiYouRen/caomei-auth
运行并解读 lint、类型检查、测试等质量门时使用。它不只是执行命令，还要根据变更范围选择最小充分检查、分析失败原因，并给出是否允许继续提交或发布的判断。用户提到 lint、typecheck、tests、quality gate、验证改动时都应触发。
Devops Specialist
CaoMeiYouRen/caomei-auth
修改 Docker、CI/CD、部署配置、环境变量、运行时参数、构建脚本和发布流程时使用。优先覆盖 Docker、Vercel、Cloudflare 与 GitHub Actions 场景。用户提到 deploy、Dockerfile、workflow、CI、CD、environment variables、build pipeline、release config 时都应触发。
Gh CLI
CaoMeiYouRen/caomei-auth
使用 GitHub CLI（gh）处理仓库、issue、pull request、workflow、project、release、codespace、gist、search、api、auth、config、alias、secret、variable、extension、ruleset 和 status 等命令行操作时使用。用户提到 gh、gh cli、GitHub CLI、gh…
Backend Expert
CaoMeiYouRen/caomei-auth
设计或实现后端 API、服务层、数据库读写、鉴权权限控制、输入校验、事务处理与错误处理时使用。用户提到 API、route、handler、server、auth、permission、drizzle、database、zod、Hono、Nuxt server routes、backend bug 修复时都应触发。
Related
Categories
Questions about UI Validator
What does UI Validator do?
任何可见 UI 改动、交互变更、样式修复、响应式适配、暗色模式适配和浏览器侧回归验证都应使用。它负责在真实页面中验证实际渲染效果，而不是只看代码。用户提到 UI validate、screenshot、browser check、responsive、dark mode、视觉回归时都应触发。. UI Validator is an agent skill from CaoMeiYouRen/caomei-auth.
When should I use UI Validator?
UI Validator fits situations like: tasks that involve Theming and dark mode.
How do I install UI Validator in Claude Code?
Run `npx skills add CaoMeiYouRen/caomei-auth --skill ui-validator -a claude-code`. Or copy the skill folder (.github/skills/ui-validator in CaoMeiYouRen/caomei-auth) into .claude/skills/ui-validator in your project. Claude Code loads it when a task matches its description.
How do I install UI Validator in Codex?
Run `npx skills add CaoMeiYouRen/caomei-auth --skill ui-validator -a codex`. Or copy the skill folder (.github/skills/ui-validator in CaoMeiYouRen/caomei-auth) into .agents/skills/ui-validator in your project. Codex loads it when a task matches its description.
Can I use UI Validator 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 CaoMeiYouRen/caomei-auth --skill ui-validator -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-validator, .gemini/skills/ui-validator, .github/skills/ui-validator and .opencode/skills/ui-validator in your project.
What does UI Validator need to run?
SKILL.md names no scripts, command-line tools or credentials: UI Validator is instructions for the agent only.
Does UI Validator 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 UI Validator 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 Validator use?
UI Validator 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 UI Validator use?
About 235 tokens (SKILL.md is roughly 940 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 Validator?
Skills that share tags, products or a category with UI Validator: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Validator?
CaoMeiYouRen (a GitHub user) maintains it in CaoMeiYouRen/caomei-auth, which has 220 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on October 1, 2026.
Source: CaoMeiYouRen/caomei-auth on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.