better-ui — UI 폴리싱 리뷰어

무엇을 해주나

프론트엔드 UI의 '미묘하게 어색한' 부분을 항목별 규칙으로 잡아냅니다.

• 동심원 border-radius: 바깥 radius = 안쪽 radius + padding
• 광학 정렬: 기하학적 중앙이 어색할 때 수동 보정(아이콘 버튼, 재생 삼각형 등)
• 깊이는 그림자, 구조는 보더: 장식용 보더를 레이어드 box-shadow로 교체
• 모션 규칙: 중단 가능한 CSS transition, ~100ms 스태거 등장, 부드러운 exit, 프레스 시 scale(0.96)
• 아이콘 전환: opacity 0→1, scale 0.25→1, blur 4px→0 (motion/framer-motion 있으면 spring, bounce 0)
• 테마 전환 시 transition 일괄 차단 후 리플로우, 다음 프레임에 복구
• 아이콘 스트로크를 텍스트 굵기에 맞추기: 400 → 1.5px, 600 → 2px
• 마지막에 HIGH/MEDIUM/LOW 심각도 표로 위치 / Before / After / 이유를 정리하고, HIGH가 남으면 Block, 아니면 Approve

타이포그래피, 접근성, 레이아웃은 각각 better-typography, better-accessibility, better-layout로 분리되어 있다는 점을 명시합니다.

이런 분께 추천

• React/Tailwind 등으로 웹 UI를 만들며 디자인 완성도를 높이고 싶은 개발자
• 디자이너 없이 혼자 제품 UI를 다듬어야 하는 1인 개발자·스타트업 팀
• PR 단계에서 UI 디테일 리뷰를 자동화하고 싶은 프론트엔드 리드

활용 예시

1. "이 카드 컴포넌트 better-ui 기준으로 리뷰해줘" → 중첩 radius 불일치, transition: all 사용, 아이콘 스트로크 불일치를 심각도별 표로 리포트
2. "다크모드 토글할 때 화면이 번지듯 바뀐다" → 테마 스왑 동안 전역 transition 차단 + 리플로우 코드 삽입
3. "사이드바 등장 애니메이션이 산만하다" → 컨테이너 1개 애니메이션을 의미 단위 청크로 쪼개 100ms 스태거로 재구성

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/aiskillstore/marketplace/HEAD/pending/jakubkrehel/better-ui/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 aiskillstore/marketplace 의 pending/jakubkrehel/better-ui 폴더를 내 ~/.claude/skills/better-ui/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.