ui-review

Agent Skills › di-sukharev/vibe › ui-review

ui-review

GitHub

自动化UI视觉审查工具，通过截图对比设计规范修复前端样式问题并验证主题配置。

.agents/skills/ui-review/SKILL.md di-sukharev/vibe

Trigger Scenarios

用户要求审查或优化界面外观新增页面或布局变更后的视觉检查

Install

npx skills add di-sukharev/vibe --skill ui-review -g -y

More Options

Non-standard path

npx skills add https://github.com/di-sukharev/vibe/tree/master/.agents/skills/ui-review -g -y

Use without installing

npx skills use di-sukharev/vibe@ui-review

指定 Agent (Claude Code)

npx skills add di-sukharev/vibe --skill ui-review -a claude-code -g -y

安装 repo 全部 skill

npx skills add di-sukharev/vibe --all -g -y

预览 repo 内 skill

npx skills add di-sukharev/vibe --list

SKILL.md

Frontmatter

{
    "name": "ui-review",
    "description": "Runs the screenshot tour, reviews the images against the UI guide, fixes issues in the source, and re-checks. Use after a new screen or a layout change, or when the user asks to review, polish, or restyle the UI."
}

Steps

Run bun run screens -- -g "<route or website>". UI says where the images land; TESTING says how the demo data is seeded.
Review every image against UI:
- 375 px and 1280 px widths, light and dark themes;
- every data state (loading, empty, error, success), and visible keyboard focus;
- design tokens only, with consistent spacing and typography;
- no overflow or clipping, and only real API data.
Fix issues in the source. Compose from src/components/ui and existing compositions; never restyle shadcn. No raw colors or arbitrary values — tokens and the Tailwind spacing scale only.
Re-run the screens. Stop after two rounds and report what remains.
Theme change: when the user wants a different look, edit theme.json as UI describes, run bun run theme, then re-run the screens. Say how theme.json relates to the visual-style answer in CHECKLIST.
Do not drive a browser interactively unless the user asks.