360 Secure SkillHub
360 安全技能中心

21st-ui-review

该 Skill 面向现有 UI 的设计审查：读取项目设计上下文与源码，运行 21st 的确定性审查，按严重程度归类可访问性、交互、响应式、设计系统漂移和生产规则问题，并仅对低歧义缺陷执行修复。它要求修复后运行相关测试并复查，不进行主观品牌重设计。

21st-dev
热度 0.00
最近更新 2026-10-19 01:59:29
分类：开发依赖：代码执行 / 读写文件应用场景：代码审查 / 报告撰写

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add 21st-dev/skill/21st-ui-review
Metadata
name
21st-ui-review
description
Review existing UI against the project's design context, accessibility expectations, responsive behavior, interaction quality, and high-confidence production rules. Use for UI audits, design QA, frontend review, accessibility review, consistency checks, or requests to find and safely fix visual defects. Trigger for requests such as "review this UI", "audit this page", "find design issues", "check responsiveness", or "fix obvious UX problems". Use 21st-ui-build when the request is primarily to create new UI.

Review UI with evidence

Separate deterministic defects from subjective design recommendations.

Workflow

  1. Read .21st/design.json, project instructions, and the relevant source.

  2. Run the deterministic review first:

    21st review <path>
21st review <path> --json

  3. Inspect the actual component composition and runtime states. Validate claims against code rather than inferring behavior from names.

  4. Group findings into:

    • deterministic defects;
    • design-system drift;
    • accessibility and interaction defects;
    • responsive risks;
    • subjective product/design recommendations.

  5. Prioritize by user impact and include exact file and line attribution.

  6. Use 21st review <path> --fix only for deterministic, low-ambiguity fixes. Never silently redesign, change brand identity, or alter product behavior.

  7. Run relevant project tests after fixes and rerun review to prove resolution.

Review priorities

  • semantic controls and accessible names;
  • keyboard access, focus visibility, and dialog/menu behavior;
  • image alternatives and meaningful labels;
  • touch target size and disabled/loading states;
  • responsive overflow and fixed-width assumptions;
  • reduced-motion handling;
  • hardcoded visual values that conflict with project tokens;
  • duplicate primitives instead of existing components;
  • inconsistent typography, radius, spacing, shadows, and icons;
  • fake data, placeholder copy, or missing empty/error states.

Output

Lead with actionable findings ordered by severity. Keep subjective suggestions clearly labeled. If no issue is proven, say so and state what was inspected.