FlowAI 대시보드 스킬
FlowAI 미학에서 영감을 받은 단일 화면, 다중 탭 팀 관리 대시보드를 생성합니다. 출력물은 내장된 상호작용(탭 전환, 애니메이션 막대 차트, 차트 호버 툴팁, 클릭하여 확대하는 패널, 다크 모드 전환, 보이는 팀 테이블의 CSV 내보내기)을 갖춘 독립형 HTML 파일(외부 런타임 종속성 없음)입니다.
리소스 맵
flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html # 시작 구조로 사용되는 참조 시드
├── references/
│ └── checklist.md # P0/P1/P2 품질 게이트
└── example.html # 완전히 수작업으로 제작된 샘플 (갤러리 미리보기)
워크플로우
- 활성 DESIGN.md 읽기 (위에 주입됨). 색상, 타이포그래피, 간격, 컴포넌트 스타일링 토큰을
assets/template.html에서 사용하는 CSS 변수에 매핑합니다. 새 토큰을 만들지 마십시오. assets/template.html에서 시작합니다. 절대 빈 상태에서 셸을 생성하지 마십시오.- 세 개의 탭 유지:
팀 구성원,팀 세부 정보,활동 로그. 탭은 실제로 전환되어야 하며 한 번에 하나의 보기만 표시됩니다. - 그럴듯하고 구체적인 샘플 데이터 생성 (실제처럼 보이는 이름, ID, 역할, 부서, 날짜, 백분율).
구성원 A / 측정항목 B와 같은 자리 표시자 없음. - 필수 상호작용:
- 해시 동기화를 통한 탭 전환 (
#members | #details | #activity) - 역할 막대 차트가 세부 정보 탭 처음 표시 시 이징(easing)과 함께 애니메이션
- 정확한 레이블 + 값이 있는 차트 호버 툴팁
- 패널/카드 클릭 시 확대; 다시 클릭하거나 Esc 키를 누르면 원래 상태로 복원
- CSS 변수에서 차트 색상을 다시 파생시키는 다크 모드 전환
- 팀 테이블의 모든 행(워크플로우 열 포함)을 내보내는 "CSV 내보내기" 버튼
- 해시 동기화를 통한 탭 전환 (
- 최종 출력 전에
references/checklist.md를 통해 실행합니다.
출력 계약
하나의 짧은 방향 문장을 내보낸 다음 아티팩트를 내보냅니다:
<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI 팀 대시보드">
<!doctype html>
<html>...</html>
</artifact>
아티팩트는 빌드 단계나 네트워크 액세스 없이 디스크에서 직접 열었을 때 올바르게 렌더링되어야 합니다.