스킬: 리디자인 & 감사
동작을 보존하는 감사 우선 리디자인.
단계
workflows/redesign-audit.md(전체 스캔 → 진단 → 지시 → 적용 → 검증 시퀀스 + 출력 완전성)를 읽습니다.- 코드베이스 스캔: 프레임워크, 스타일링 방식(→ 일치하는
frameworks/어댑터로 라우팅), 토큰 현황, 컴포넌트, 보존해야 할 요소를 파악합니다. - 진단: Banned Defaults 체크리스트(
taste/design-taste.md) + 리뷰 루브릭(design-review스킬)을 사용합니다. 우선순위가 매겨진 결과표를 생성합니다. - 지시: 브랜드에 맞는 아키텍처/시스템(
apply-aesthetic스킬)을 선택합니다. - 적용: 순서대로 — 토큰 우선, 그 다음 타이포그래피/간격, 컴포넌트 상태, 모션 — 라우트/데이터/마크업 시맨틱스를 변경하지 않습니다(접근성 수정 제외).
- 검증:
design-review+a11y-audit을 재실행합니다. 이전에 작동하던 모든 흐름을 스모크 테스트합니다. 다크 모드 + 반응형을 샘플 점검합니다. 토큰 소스에 대해scripts/validate_contrast.py를 실행하고 변경된 코드에 대해scripts/lint_hardcodes.py를 실행합니다.
가드레일
작동하는 기능을 미관을 위해 절대 희생하지 마십시오. 대비 조건을 충족하지 못하는 브랜드 색상을 절대 배포하지 마십시오. 기존 접근성 기능을 절대 제거하지 마십시오. 완전한 파일을 제공하십시오 — 플레이스홀더를 사용하지 마십시오.
단일 테마 일관성 (다중 페이지 앱에 매우 중요)
하나의 공유 토큰 테마로 통합하고 모든 페이지가 이를 사용하도록 하십시오 — 서로 다른 페이지가 다른 팔레트를 사용하는 리디자인은 실패한 것입니다. 페이지별/임시 색상을 시맨틱 토큰으로 교체하고 scripts/lint_hardcodes.py로 어떤 페이지도 테마 외 값을 재도입하지 않는지 확인하십시오. 테마 전환은 페이지 편집이 아닌 단일 토큰 소스에서 이루어져야 합니다(.claude/rules/tokens-and-color.md → 단일 테마 일관성).