spnngl/agent-skills

UI 전문가

이 스킬은 인터페이스가 무엇인지 결정하고, 사람들을 위해 제대로 작동함을 입증합니다. 코드 관용구(TypeScript, React, Next.js, 테스트, 린트)는 ts-coding 스킬에서 가져옵니다. .ts 또는 .tsx 파일을 다룰 때는 항상 이 스킬을 함께 로드하세요.

워크플로

1. 방향 설정. UI의 진실 공급원을 읽습니다: package.json (react, next, tailwindcss, 기본 라이브러리: react-aria-components, @radix-ui/*, @base-ui-components/react, 또는 shadcn의 components.json; 아이콘 세트; @playwright/test, @axe-core/playwright), @import "tailwindcss"와 @theme를 포함하는 스타일시트, 다크 모드 메커니즘, 공유 컴포넌트 디렉토리, 그리고 변경 중인 화면 옆에 있는 두세 개의 기존 화면. 프로젝트의 기존 선택이 이 스킬의 기본값보다 우선합니다. 프로젝트의 프리미티브, 토큰, 간격 리듬, 용어를 재사용하세요. 완료 조건: 스타일링 시스템, 토큰 파일, 기본 라이브러리, 아이콘 세트, 테마 전환, 작업을 렌더링하는 개발 명령어와 URL, 브라우저 테스트 러너(또는 해당 항목이 없음을)를 말할 수 있어야 합니다.

2. 브리핑 구성. 마크업 전에, 다음 블록을 답변에 작성하고 이를 기준으로 구축하세요:

   사용자와 작업: 이 화면을 사용하는 사람과 그것이 제공하는 하나의 작업
   시선을 끄는 요소: 눈이 가장 먼저 닿는 단일 요소
   기본 작업: 하나의 긍정적인 작업; 파괴적 작업은 별도로 명명
   밀도: 희소 | 편안함 | 조밀, 주변 화면과 일치하도록
   분위기: 결과물이 얻어야 할 하나의 형용사 ("정확한", "차분한", "따뜻한")
   상태: 빈 상태, 로딩, 오류, 부분, 오버플로, 권한 없음: 해당하는 것들
   

   레이아웃, 구성, 시각적 장인정신: references/taste.md. 완료 조건: 모든 필드가 이 화면에 대한 구체적인 답변을 가지고 있어, 검토자가 이를 놓친 빌드를 거부할 수 있을 정도로 구체적이어야 합니다.

3. 토큰 해결. 모든 색상, 크기, 공간, 반경, 그림자, 지속 시간을 1단계의 시맨틱 토큰에 매핑합니다. references/tokens.md에 따라 밝음과 어두운 값을 가진 소스에 누락된 토큰을 추가하세요. 완료 조건: diff에 원시 색상, 임의 값(p-[13px], bg-[#1a1a1a]), 또는 테마 가능 속성에 대한 인라인 스타일이 없고, 모든 새 토큰에 밝은 값과 어두운 값이 있으며, node scripts/contrast.ts <theme.css> (이 스킬 디렉토리 기준 상대 경로)가 통과해야 합니다.

4. 빌드. 프로젝트의 프리미티브(React Aria Components, 프로젝트에 없는 경우)로 모바일 우선으로 구성하고, 규칙 및 references/components.md를 따르세요. 시맨틱, 키보드, WCAG 세부사항: references/accessibility.md. 인터페이스 텍스트: references/copy.md. 완료 조건: 모든 대화형 요소가 해당하는 각 상태를 다루고, 모든 데이터 뷰가 브리핑에 명명된 각 상태를 렌더링하며, 접두사 없는 스타일이 320px 레이아웃이어야 합니다.

5. 검증. ts-coding의 검사를 실행한 다음, references/verification.md의 정적 및 브라우저 게이트를 실행합니다: 토큰 드리프트, 이모지, 토큰 대비, 밝음과 어두움에서의 axe, 키보드, 320px에서의 리플로우, 타겟 크기, reduced motion. 완료 조건: 모든 게이트가 0으로 종료되고 각 게이트가 출력한 내용을 보고해야 합니다. 실행할 수 없었던 게이트는 이유와 함께 "확인되지 않음"으로 보고되어야 합니다.

6. 확인. 1280px와 390px 너비, 밝음과 어두움, 그리고 브리핑의 각 상태에 대해 작업물을 스크린샷으로 찍습니다. 모든 이미지를 읽기 도구로 열고 모든 컨트롤을 클릭합니다. 그런 다음 references/review.md를 사용하여 거부 사유를 주장합니다. 하위 에이전트 도구를 사용할 수 있는 경우, 스크린샷과 해당 파일을 새 에이전트(화면을 빌드하지 않은 비평가가 더 명확하게 볼 수 있음)에 전달합니다. 완료 조건: 모든 스크린샷을 보았고, 모든 컨트롤이 눈에 띄는 변화를 생성했으며, 모든 Critical 또는 Major 발견 사항이 수정되거나 사용자에게 보고되어야 합니다.

작은 변경 (기존 컴포넌트 내의 간격, 색상, 또는 카피 조정): 1, 3, 5단계의 정적 게이트를 실행한 다음, 밝음과 어두움에서 변경된 요소를 스크린샷으로 찍고 둘 다 확인합니다.

기존 UI 검토: 1단계를 실행하고, 2단계의 브리핑을 추론하여 작성한 다음, 5, 6단계를 실행하고 references/review.md 형식으로 보고합니다. 렌더링이 없으면 그렇게 말하고 소스가 증명하는 것으로 발견 사항을 제한합니다.

규칙

증거

• 명령이 방금 출력한 경우에만 대비 비율, 통과 또는 점수를 명시하십시오. 그렇지 않으면 "확인되지 않음"이라고 말하십시오. 건너뛴 게이트(브라우저 없음, 서버 없음)는 아무것도 측정하지 않았습니다.
• 게이트는 정확성을 증명할 뿐, 품질을 증명하지 않습니다: 스크린샷에서 계층 구조와 장인 정신을 판단하십시오.

계층 구조

• 하나의 요소가 주도합니다: 브리핑의 시선을 끄는 요소는 가장 크고, 가장 무겁거나, 가장 높은 대비를 가진 요소여야 하며, 그 주변 요소는 더 차분해집니다. 마케팅 및 랜딩 페이지에서 디스플레이 타입은 본문 크기의 최소 2.5배입니다; 제품 화면은 페이지 제목을 본문보다 한두 단계 위로 유지하고, 무게와 위치가 나머지를 처리합니다.
• 간격은 바깥쪽으로 커집니다: 그룹 내의 간격 < 컨테이너의 패딩 < 섹션 간의 공간.
• 빈 상태는 해당 영역을 채우고 첫 번째 작업을 지정합니다. 페이지는 의도적으로 끝납니다: 요약, 바닥글, 다음 단계.

토큰 및 색상

• 의도별 토큰: 동작과 일치하는 의미의 토큰을 선택하십시오. 파괴적 동작은 트리거와 확인 모두에서 파괴적 토큰을 사용합니다; 기본(primary)은 보기당 하나의 주요 긍정적 동작을 표시합니다.
• 모든 상태는 색상과 아이콘 또는 텍스트를 쌍으로 사용합니다. 하나의 강조색; 나머지는 중립색이 처리합니다.
• 테마는 토큰 소스에서 한 번 편집하면 됩니다: 모든 화면이 동일한 시맨틱 토큰을 읽습니다.
• 밝음과 어두움은 시스템 환경 설정을 따릅니다. System / Light / Dark 설정이 이를 재정의하고 유지합니다 (references/tokens.md).

상태

• 대화형 요소: 기본, 호버, focus-visible, 눌림, 비활성화, 대기 중, 유효하지 않음, 선택됨. 각각 해당하는 경우 밝음과 어두움에서 시각적으로 구별됩니다. 선택자는 references/components.md를 참조하십시오.
• 대기 중은 스피너 또는 진행 레이블(isPending, aria-busy)로 컨트롤을 최대 강도로 유지합니다. 비활성화는 사용자가 지금 수행할 수 없는 동작을 표시하며, 그 이유를 근처에 표시합니다.
• 피드백은 발생한 일을 보고합니다: 데이터가 변경된 후 성공 토스트가 나타나고, 보기에는 이미 변경 사항이 표시됩니다.

레이아웃

• 모바일이 기본입니다: 접두사 없는 유틸리티는 휴대폰 레이아웃입니다. sm:, md:, lg:는 더 넓은 화면에 계층을 추가합니다. 다른 너비에서 재사용되는 컴포넌트는 컨테이너에 반응합니다 (@container, @md:).
• 수평으로 스크롤되는 영역은 눈에 띄는 신호(가장자리 페이드, 스크롤바)를 보여줍니다.

보호 장치

• 아이콘은 lucide-react (또는 프로젝트 세트)에서 currentColor를 사용하는 SVG로 가져옵니다. UI, 카피, 코드, 커밋에 이모지가 전혀 없어야 합니다.
• 표면은 전체 실선 테두리, 표면 단계 또는 간격으로 구분합니다. 카드, 알림, 토스트, 또는 콜아웃의 한쪽 면에만 색상 테두리를 사용하는 것은 금지됩니다.
• 콘텐츠는 현실적이어야 합니다: 그럴듯한 이름, 긴 문자열, 큰 숫자, 0개 및 1개 항목. 플레이스홀더 카피와 디버그 컨트롤은 제품에 절대 렌더링되지 않습니다.

참조

현재 브랜치와 일치하는 것을 로드하세요:

• references/taste.md: slop 식별, 구성, 타이포그래피, 색상, 깊이; 모든 새 화면 또는 리스타일.
• references/tokens.md: Tailwind v4 @theme, 시맨틱 토큰, 시스템 테마 및 재정의 설정, 토큰 추가 또는 감사.
• references/components.md: React Aria Components, 상태 속성, 폼, 오버레이, 데이터 뷰, 아이콘, 모션.
• references/accessibility.md: 시맨틱, 키보드 및 포커스, 대비, WCAG 2.2 기준, 강제 색상, RTL.
• references/copy.md: 레이블, 오류, 빈 상태, 확인, 토스트, 생성된 카피 식별.
• references/verification.md: 드리프트, 이모지 및 대비 스캔, 컴포넌트 상태 렌더링, Playwright 및 axe 게이트, 스크린샷 매트릭스.
• references/review.md: 비평 렌즈, 휴리스틱, 심각도, 발견 사항 형식.