21st-ui-review
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.
소스 정보
- 저장소
- 21st-dev/skill
- 최근 소스 활동
- 2026년 8월 26일 19:28
- 감지된 SKILL.md 언어
- 영어
- 스타
- 32
- 포크
- 8
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- 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:
```bash
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.
GitHub에서 보기