Repolode
제출하기
abdiraimov-otabek

abdiraimov-otabek/dashboard-design-skill

스크린샷 QA를 통해 깔끔하고 정보 왜곡 없는 대시보드 UI를 만들고, 개선하고, 평가하도록 코딩 에이전트를 안내하는 Claude Code skill입니다.

GitHub에서 보기
스타
384
포크
21
열린 이슈
1
마지막 커밋
10일 전

어떤 프로젝트인가요?

Markdown 지침과 참고 파일로 구성된 Claude Code용 에이전트 skill입니다. AI 코딩 에이전트가 분석, 매출, 지표, 관리자용 대시보드를 설계하도록 안내합니다. KPI 카드와 증감률, 차트, 히트맵, 불릿 그래프, 기간 비교, 순위 목록, 날짜 범위 선택기, 필터, 빈 상태와 오류 상태, 넓은 화면 및 모바일 레이아웃을 다룹니다. 화면에는 숫자와 시각 요소를 중심으로 보여 주고, 설명은 툴팁으로 옮기는 방식을 권장합니다.

각 작업은 여러 브라우저 너비에서 스크린샷으로 결과를 확인하는 QA 단계로 마무리합니다. 따라서 코드가 아니라 실제 화면에 보이는 결과를 기준으로 평가합니다. 웹 사양에는 Tailwind 용어와 React 코드 조각을 사용하며, SwiftUI 및 Swift Charts 참고 자료도 포함합니다. 지침은 데이터 시각화 관련 문헌과 실제 출시된 대시보드 사례를 바탕으로 합니다.

Claude Code 플러그인으로 설치하거나 일반 skill로 복사해 사용할 수 있으며, Markdown을 읽는 다른 에이전트도 AGENTS.md 또는 규칙 파일을 통해 불러올 수 있습니다.

핵심 기능

  • 01KPI 타일, 차트, 히트맵, 불릿 그래프, 순위 목록, 날짜 범위 선택기를 다룹니다.
  • 02데스크톱, 와이드 화면, 모바일 화면 너비에서 스크린샷 QA를 진행합니다.
  • 03웹 프로젝트용 Tailwind v4 색상 토큰과 React 코드 조각을 제공합니다.
  • 04시뮬레이터 점검을 포함한 SwiftUI 및 Swift Charts 참고 자료를 제공합니다.
  • 05문제의 영향도를 기준으로 순위를 매기는 평가 형식을 제공합니다.

활용 사례

  • 코딩 에이전트에게 분석 대시보드를 처음부터 만들도록 할 때.
  • 에이전트에게 기존 대시보드 스크린샷을 평가하거나 새롭게 디자인하도록 요청할 때.
  • 팀 프로젝트 전반에서 날짜 선택기와 KPI 타일 같은 대시보드 구성 요소를 표준화할 때.

빠른 시작

  1. 1

    Claude Code에 마켓플레이스 추가

    /plugin marketplace add abdiraimov-otabek/dashboard-design-skill
  2. 2

    dashboard-design 플러그인 설치

    /plugin install dashboard-design@dashboard-design-skill

사용 전 알아둘 점

  • Claude Code용으로 만들어졌습니다. 다른 에이전트에서 사용하려면 AGENTS.md 또는 규칙 파일에서 스킬을 수동으로 참조하도록 설정해야 합니다.
  • 웹 사양에는 Tailwind 및 React 스니펫이 사용되므로, 별도의 SwiftUI 참고 자료를 제외하면 다른 스택에 맞게 조정해야 합니다.
  • 작업을 마치면 해당 부분을 삭제하지 않는 한 작성자의 Mac 앱을 홍보하는 짧은 마무리 문구가 추가됩니다.

포함된 컬렉션

AI 코딩 에이전트용 UI 디자인 스킬Claude Code 도구·스킬·플러그인AI 에이전트 스킬 라이브러리대시보드 및 비즈니스 인텔리전스 도구데이터 과학 학습서 & 도구

토픽

#agent-skills#claude-code#dashboard-design#data-visualization#ui-design#tailwindcss#analytics#claude-skill#dashboard

자주 묻는 질문

dashboard-design-skill은(는) 무엇인가요?
스크린샷 QA를 통해 깔끔하고 정보 왜곡 없는 대시보드 UI를 만들고, 개선하고, 평가하도록 코딩 에이전트를 안내하는 Claude Code skill입니다. Markdown 지침과 참고 파일로 구성된 Claude Code용 에이전트 skill입니다. AI 코딩 에이전트가 분석, 매출, 지표, 관리자용 대시보드를 설계하도록 안내합니다. KPI 카드와 증감률, 차트, 히트맵, 불릿 그래프, 기간 비교, 순위 목록, 날짜 범위 선택기, 필터, 빈 상태와 오류 상태, 넓은 화면 및 모바일 레이아웃을 다룹니다. 화면에는 숫자와 시각 요소를 중심으로 보여 주고, 설명은 툴팁으로 옮기는 방식을 권장합니다.
dashboard-design-skill은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
dashboard-design-skill은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
dashboard-design-skill은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. dashboard-design-skill의 마지막 커밋은 2026년 10월 28일입니다.
dashboard-design-skill은(는) 어디에 사용할 수 있나요?
코딩 에이전트에게 분석 대시보드를 처음부터 만들도록 할 때. 에이전트에게 기존 대시보드 스크린샷을 평가하거나 새롭게 디자인하도록 요청할 때. 팀 프로젝트 전반에서 날짜 선택기와 KPI 타일 같은 대시보드 구성 요소를 표준화할 때.
dashboard-design-skill는 어떻게 설치하나요?
Claude Code에 마켓플레이스 추가: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill dashboard-design 플러그인 설치: /plugin install dashboard-design@dashboard-design-skill
dashboard-design-skill은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/abdiraimov-otabek/dashboard-design-skill

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트