데이터 대시보드 설계

무엇을 해주나

• 대시보드/터미널/모니터링 화면의 **레이아웃 순서(밴드 구성)**를 잡아준다. 똑같은 크기의 카드 4개를 나열하는 전형적인 '티 나는' 디자인을 피하고, 히어로 지표 → 보조 수치 → 서로 다른 차트 3종 → 테이블/피드 → 푸터 순으로 구성한다.
• 캔들스틱, 거래량, 호가 심도(depth), 누적 영역, 워터폴, 산점도, 상관행렬, 도넛, 게이지, 스파크라인, 히트맵, 오더북 등 14종 차트를 라이브러리 없이 인라인 SVG로 그리는 기하학 지침을 제공한다.
• 차트별 접근성 계약(role="img", aria-label/desc, 색만으로 의미 전달 금지, 표의 caption·scope·aria-sort)을 명시한다.
• 다크모드에서만 드러나는 대비 함정과 그리드 stretch, auto-fit이 열을 조용히 날리는 문제 등 실제로 겪은 버그 목록을 알려준다.
• 마지막으로 gate 스크립트(측정·접근성·반응형·인터랙션 검증) 실행 루프와 "스크린샷을 직접 열어보라"는 검수 단계를 안내한다.

이런 분께 추천

• 분석 콘솔, 트레이딩 터미널, 관제 화면 등 정보 밀도가 높은 UI를 만드는 프론트엔드 개발자
• 차트 라이브러리 없이 가벼운 SVG로 시각화를 직접 구현하려는 분
• 다크모드 대비·WCAG AA 기준을 실제로 통과시켜야 하는 디자인 시스템 담당자

활용 예시

1. "월간 매출 대시보드를 만들어줘" → 히어로 매출 지표 + 추이 차트, 그 아래 채널별 도넛·랭킹 바·스파크라인 밴드, 정렬되는 상세 테이블까지 구성.
2. "트레이딩 터미널 화면이 필요해" → 캔들스틱 + 하단 거래량 + 이동평균, 옆에 호가 심도 차트와 오더북 테이블을 동일 x축 스케일로 생성.
3. "기존 대시보드가 다크모드에서 흐릿해" → 차트 팔레트를 텍스트에 쓴 부분(2.65:1 같은 실패 케이스)을 찾아 아이콘·부호로 옮기고 gate로 재측정.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/data-dashboard/SKILL.md

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

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 plugin87/ux-ui-agent-skills 의 .claude/skills/data-dashboard 폴더를 내 ~/.claude/skills/data-dashboard/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.