Browse commands

/impeccable harden

Harden

인터페이스를 프로덕션 준비 상태로 만듭니다. 엣지 케이스, i18n, 에러 상태, 오버플로우.

사용 시기

/impeccable harden은 인터페이스가 현실과 마주하는 날을 위한 것입니다. 실제 사용자 데이터는 지저분합니다: 60자 이름, 독일어 제품명, 수십억의 가격, 500 에러, 오프라인 모드, 오른쪽에서 왼쪽 텍스트. 완벽한 데이터에서만 작동하는 디자인은 프로덕션 준비가 아닙니다.

런치 전, 새 시장 오픈 전, 또는 버그 리포트가 “사용자가 정말 긴 이름을 가지고 있어서…”로 시작할 때마다 사용하세요. 첫 실행 흐름, 빈 상태 활성화, 온보딩 디자인은 /impeccable onboard를 대신 사용하세요.

작동 방식

스킬은 4가지 실제 복원력 차원을 통해 작동합니다:

  1. 텍스트와 데이터 극단. 긴 텍스트, 짧은 텍스트, 특수 문자, 이모지, RTL, 수십억 단위 숫자, 1000개 항목 목록.
  2. 에러 시나리오. 네트워크 실패, API 4xx/5xx, 검증 에러, 권한 에러, 속도 제한, 동시 작업.
  3. 국제화. 긴 번역(독일어는 영어보다 30% 긴 경우가 많음), RTL 언어, 날짜와 숫자 포맷, 통화 기호, 문자셋.
  4. 기기와 컨텍스트. 터치 타겟, 오프라인 동작, 느린 연결, 저전력 모드.

각 차원에 대해 실패 모드를 식별한 다음 구체적 수정을 적용합니다: 오버플로우 처리, 유익한 에러 UI, i18n 안전 레이아웃, 복수형, 합리적 대체.

직접 해보기

한 페이지와 한 차원으로 시작하세요:

/impeccable harden the user profile page for long names

예상 출력:

  • .user-nametext-overflow: ellipsis와 전체 값에 대한 툴팁 추가
  • .bio가 고정 높이에서 “더 보기” disclosure가 있는 max-height로 전환
  • bio가 없는 사용자를 위한 빈 상태 추가
  • 비동기 아바타 페치를 위한 스켈레톤 로더 추가
  • 이름 길이 1, 20, 60, 200자에서 테스트

한꺼번에 모든 것을 하지 말고 페이지별로 실행하세요. 첫 실행이 가장 크고, 이후 실행은 패턴이 확고해지면서 더 적은 이슈를 찾습니다.

주의 사항

  • 버그 리포트를 기다리기. Harden은 예방입니다. 같은 종류의 버그를 두 번 고치고 있다면 기능 전체에 /impeccable harden을 실행하세요.
  • 에러와 빈 상태를 사후 처리로 취급하기. 대부분의 harden 작업은 에러와 빈 상태 UI입니다. 그냥 catch 블록이 아니라 시간을 배정하세요.
  • “지금은 영어만 지원해요”라며 i18n 건너뛰기. i18n 안전 레이아웃은 더 나은 레이아웃입니다. 유연한 컨테이너, 적절한 텍스트 줄바꿈, 넉넉한 line-height. 영어에도 해가 되지 않습니다.