clean-ui

Clean UI

미니멀하고 현대적인 인터페이스로, 밝음/어두움 테마를 지원하며, 화면에 완벽하게 들어맞고, 데이터를 가장 중요하게 생각하며, AI가 아닌 사람이 만든 제품처럼 보입니다. 아래 규칙들은 실제 수정 요청에서 비롯되었습니다. 각 규칙은 위반될 때마다 사용자를 불편하게 만들었습니다: 제안이 아닌 요구 사항으로 취급하세요.

스킬 파일

이 스킬 폴더를 기준으로 한 상대 경로입니다.

파일	사용 시기
references/informacao.md	모든 새 화면 또는 리디자인, 레이아웃 전. 무엇을 보여줄지, 우선 순위, 각 정보의 위치(인벤토리, 사용자 질문, 수준, 필터, 위치 지도, 작성된 계획)를 선택하는 방법.
references/padroes-aprovados.md	사용자가 승인한 블록("훨씬 좋아졌다"): 결정 카드, 결정 측정값과 한계선이 있는 차트, 시간 경과에 따른 잔고가 있는 상황 카드, 사용자 자신의 목록, 계절별 지원, 휴대폰 헤더, 우선순위별 정렬, 울트라와이드. 고정된 뼈대가 아닌 콘텐츠의 시작점으로 사용하세요.
references/armadilhas.md	이미 재작업 비용이 발생한 기술적 오류(Tailwind v4, 병합 없는 cn, [&>*]: 특이성, next-themes, 오래된 CSS를 제공하는 서버, 로컬 데이터베이스에 없는 상태 테스트). 코드를 작성하기 전에 읽으세요.
references/migracao.md	전체 앱 리디자인(여러 화면): 먼저 승인된 참조 화면, 사용자가 만든 베이스(프레임, 페이지 조각, body의 토큰, 저장된 테마), 공통 브리프가 있는 병렬 프론트, 통합(키트에 대한 요청, 마지막에만 이전 코드 삭제, 재시작, 모든 것 확인).
references/exemplos.md	잘못된 경우와 올바른 경우의 실제 사례. 새 화면을 만들거나 무언가가 괜찮은지 확실하지 않을 때 읽으세요.
references/dashboards.md	숫자, 차트 또는 지도가 있는 모든 화면. 아마추어와 전문가를 구분하는 요소, 원칙(NN/g, Stephen Few, IBM Carbon), 7가지 구성(정보 계획에 맞는 것을 선택), 와이드 및 울트라와이드 화면 규칙, 차트 색상 및 마감 처리.
references/paletas.md	준비되고 검증된 팔레트(코발트, 인디고, 시안, 코랄)로 회색, 강조 색상, 정렬된 척도, 두 테마 모두에 대한 시리즈 색상이 포함되어 있습니다. 여기서 선택하고, 임의의 색상을 사용하지 마세요.
assets/tokens.css	새 프로젝트 또는 정체성이 없는 프로젝트: 밝음/어두움 테마(시스템을 따르며 수동 전환 가능), 글꼴, 포커스, 차트 및 터치가 이미 구성됨(Tailwind v4). 시작점으로 코발트 팔레트가 포함되어 있습니다. 선택한 팔레트의 전체 블록으로 교체하세요(paletas.md 끝부분 참조). tall 변형, 긍정/부정/경고 및 커서 포인터를 포함합니다.
references/exemplos-dashboards/	사용자의 현대적인 대시보드 참조 7개. 대시보드를 디자인하기 전에 모두 여세요.
references/anatomia-dashboard.md	측정값으로 변환된 참조: 카드, 제목, 표시기, 칩, 차트 상단의 숫자, 차트, 전체의 일부, 측정기, 표, 휴대폰, 그리고 복사하지 말아야 할 것.
assets/dashboard.tsx	참조에서 측정된 대시보드 키트: DashCard, Kpi, IconCircle, DeltaChip, StatusChip, TrendDot, CountBadge, Tabs, SeriesStat, StatColumns, Dashed, KeyValue, StackedBar, LegendGrid, Gauge, 표 TH/TR 클래스, TooltipCard, PillMark, Recharts용 chart props, ListaAlta(세로 카드의 목록, 높이에 따라 페이지 매김), Divergentes(합산된 것과 제거된 것), Quadro100(100개당), Colunas(떠 있는 열; 폭포 및 깔때기형은 어려워서 기각됨), useFitRows(몇 행이 들어맞는지) 및 useFitHeight(창의 남은 공간에 따른 차트 높이; 위 카드가 커지면 다시 측정).
assets/painel.tsx	지도 도우미: useMapColumns(지도 열 너비) 및 FillMap(채워지는 세계 지도).
assets/ui.tsx	준비된 기본 컴포넌트(Card, Section, IconBox, Chip, Pill, Button, BottomActions, ListRow, ListCard, StatCard, DateBlock, FillEmpty, InfoTip, NavLoading, Spinner, ThemeToggle, FitScreen). 새로 만들기보다 재사용하거나 적응시키세요. 프로젝트에 이미 동등한 컴포넌트가 있다면 프로젝트의 것을 사용하세요.
scripts/lint-ui.mjs	node <skill>/scripts/lint-ui.mjs src: 변경된 코드 검사(호버 시 움직임, 줄임표, 색상 테두리, 좁은 너비, 금지된 글꼴, 테마 중 하나를 깨는 고정 색상, "—", " · ", 소문자, "레이블: 값").
scripts/check-ui.mjs	node <skill>/scripts/check-ui.mjs http://localhost:3000/route --out=prints: 320 및 390px(모바일)과 1366×650, 1536×730, 1920×950(노트북 및 모니터), 2560×960, 2752×1100(Windows 125% 확대/축소의 21:9) 및 3440×1300(울트라와이드 21:9)에서 브라우저의 실제 사용 가능 영역에서 스크린샷을 찍고, 어두움 및 밝음 테마에서 가로 및 세로 오버플로(첫 화면 하단 가장자리를 넘거나 화면보다 높은 카드), 유사하게 반복되는 목록, 늘어난 차트 및 너무 넓은 목록 행, "…", 인접한 카드의 다른 높이(배경이 없는 래퍼 내부도 포함), 내부에 빈 공간이 있거나 콘텐츠가 흩어져 있는 카드, 불완전한 그리드, 컨테이너 없는 아이콘, 호버 시 움직임, 내부 스크롤, 좁은 콘텐츠, 글꼴, 커서 포인터 없는 클릭 가능 요소, 행 간에 거의 정렬된 카드 테두리, 화면 밖의 "i" 풍선(각각 열기), 휴대폰의 스크롤바, 너무 넓은 표 행(반복되는 행), 눌린 텍스트, 휴대폰에서 제목이나 설명이 줄 바꿈되는 목록 행 및 빈 페이지 또는 오류 페이지(로딩 대기, 데이터가 오지 않으면 검사가 유효하지 않음)를 측정합니다. 각 발견 사항에는 크기와 테마가 함께 제공됩니다. 프로젝트에 Playwright가 필요합니다. --user/--pass는 비밀번호가 있는 페이지용입니다.

스크립트는 가이드입니다: 각 발견 사항을 확인하고, 특히 스크린샷을 열어서 살펴보세요.

1. 프로세스 (재작업의 가장 큰 원인)

1. 요청된 것만 하세요. 명시적인 요청 없이 기존 요소를 제거, 교체 또는 "단순화"하지 마세요. 제안에 무언가를 빼야 한다면 먼저 물어보세요. 확실하지 않으면 유지하세요.
2. 요청된 중단점을 존중하세요. 모바일 조정 요청: 웹은 변경하지 않음(sm:/md:를 사용하여 웹 보존, 그 반대도 마찬가지).
3. 게시하기 전에 모든 크기를 살펴보며 보여주세요. 괜찮다고 말하기 전에 검사의 각 크기(특히 표가 깨지고 카드가 넘치는 1366, 1536 및 2752 포함)의 스크린샷을 열어보세요. 390 및 1920만 열지 마세요. 위임된 에이전트 작업도 마찬가지입니다: 직접 확인하세요. 로컬에서 실행하고, 모바일(390px, 320px 확인) 및 웹(1366×650, 1536×730 및 1920×950, 브라우저의 실제 사용 가능 영역) 에서 두 테마 모두 스크린샷을 찍고, 각 스크린샷을 실제로 살펴보고 명시적인 승인 후에만 commit/push/deploy하세요.
4. 새 화면 또는 리디자인: 먼저 정보, 그 다음 레이아웃. references/informacao.md를 따르세요(그리고 references/padroes-aprovados.md의 블록과 references/armadilhas.md의 오류 참조): 제품이 알고 있는 것의 인벤토리(이전 화면이 보여준 모든 것 포함), 긴급 순서대로 사용자 질문, 우선 순위 수준, 각 정보의 필터, 위치 지도 및 작성된 계획. 구성은 이 계획에서 나옵니다. 직접 구성과 팔레트를 선택하세요(프로젝트에 브랜드가 있으면 그것을, 없으면 주제와 어울리는 paletas.md의 팔레트). 사용자가 선택할 수 있도록 여러 버전이나 화면 보기를 만들지 마세요. 하나, 가장 좋은 것을 만들고 각 요소가 왜 거기에 있는지 몇 줄로 설명하세요. 이전 프로젝트의 뼈대에서 시작하거나 기본적으로 "4개의 지표 + 카드 그리드 + 목록"을 반복하지 마세요.
5. 두 번 기각된 세부 사항 = 나란히 옵션. 사용자가 동일한 세부 사항(칩 위치, 글꼴)을 두 번 기각한 경우에만 해당 세부 사항의 2~3가지 변형을 스크린샷으로 보여주세요. 전체 화면에 대해서는 절대 안 됩니다.
6. 파일을 삭제하거나 다시 만든 후에는 검사 전에 개발 서버를 다시 시작하세요(또는 CSS를 다시 저장하세요). Tailwind가 새 클래스 없이 이전 CSS를 계속 제공할 수 있습니다.
7. 각 스크린샷 전에 체크리스트(섹션 10)로 검토하세요. 대칭성이 없으면 준비되지 않은 것입니다.

2. 타이포그래피

• 금지됨 (AI 느낌): Inter, Roboto, Arial, Helvetica, 브랜드 글꼴로 system-ui, Geist, Poppins, Montserrat, Space Grotesk, Open Sans, Lato.
• 좋고 AI가 거의 사용하지 않음: Plus Jakarta Sans(선호되며 이미 승인됨), Manrope, Onest, Figtree, Hanken Grotesk, Schibsted Grotesk, Instrument Sans, Albert Sans, Familjen Grotesk. 강조 제목에는 Bricolage Grotesque. 앱당 하나의 패밀리.
• 숫자는 font-variant-numeric: tabular-nums(tabular-nums) 사용. 0이 잘리거나 점선으로 표시된 모노 글꼴은 사용하지 마세요.
• 가중치와 적당한 크기로 계층 구조. 위에 작은 레이블(12px, 흐릿한 색상)과 아래 값(16px, semibold). 동일한 글꼴 크기의 값 나란히. 거대한 컬러 텍스트 없음.
• 보이는 모든 텍스트는 대문자로 시작합니다. "Qui", "Sex"와 같은 약어도 포함됩니다. 문장 중간에는 일반적으로 작성하세요: "Vs terça anterior", "Vs Ter anterior"가 아닙니다. 제목은 sentence case를 사용하고, 절대 ALL CAPS를 사용하지 마세요.

3. 색상 및 테마

• 항상 두 가지 테마, 밝음 및 어두움. 모든 앱은 두 가지 테마로 시작합니다: 시스템 테마(prefers-color-scheme)를 따르고 선택 사항을 저장하는 전환 버튼(assets/ui.tsx의 ThemeToggle)이 있습니다. 이메일 및 미리보기도 prefers-color-scheme에 응답합니다. 하나의 테마에만 존재하는 화면은 없어야 합니다.
• 색상은 항상 토큰으로 (var(--card), bg-card, text-muted-foreground). #000, #fff, bg-black, text-white 또는 컴포넌트, 차트 또는 SVG에 임의의 hex 사용 금지: 다른 테마를 깨뜨립니다.
• 어두움: 매우 어두운 배경(거의 검정), 카드는 한 단계 위, 미묘한 테두리, 거의 흰색 텍스트. 밝음: 매우 밝은 회색 배경, 흰색 카드, 가벼운 테두리, 거의 검은색 텍스트. 두 가지 모두 동일한 주의를 기울이고 스크린샷으로 확인했습니다.
• 팔레트는 고정되어 있지 않지만, 임의적이지도 않습니다. 표준 "검정 + 주황"은 없습니다: references/paletas.md의 전체 팔레트(대비 및 색맹에 대해 이미 검증되고 일치하는 회색, 강조, 척도 및 시리즈)를 사용하고, 주제별로 선택하고 렌더링된 것을 보여주세요. 개별 색상을 혼합하지 마세요(한 곳의 파란색, 다른 곳의 노란색, 또 다른 곳의 빨간색). 브랜드가 있는 프로젝트는 브랜드 팔레트를 따릅니다(예: MegaLab은 주황색 선택). 새 색상은 두 테마에서 카드에 대해 최소 3:1 대비를 가지고 색맹이 구별할 수 있어야 합니다(에이전트에 dataviz 가이드가 있는 경우 해당 유효성 검사기를 사용하세요).
• 중립 베이스, 목적 있는 색상. 회색이 화면의 ~90%를 차지합니다. 앱당 하나의 강조 색상(테마별 버전). 정렬된 데이터(크기, 수준, 범위)는 하나의 색상 척도(--seq-1..4)를 사용하고, 회색, 파란색, 노란색, 빨간색의 무지개를 사용하지 마세요. 순서가 없는 시리즈는 고정된 순서로 --cat-1..3을 사용합니다. 경고 빨간색/노란색은 진짜 상태에만 사용하고, 아이콘과 레이블과 함께 사용하세요. 녹색은 절대 브랜드 색상이 아닙니다, 하지만 데이터에 나타날 수 있습니다: "개선됨" 변동 칩, 좋은 상태, 검증된 팔레트의 범주형 시리즈 3. 임의의 보라색, 갈색 없음.
• 숫자는 절대 색칠하지 않음. 값과 레이블은 텍스트 색상으로 유지됩니다. 데이터 색상은 옆에 작은 표시(점, 가는 막대, 작은 색상 막대가 있는 중립 실)로 표시됩니다.
• 개선 및 악화 변동(사용자 참조에서와 같이): 부드러운 녹색 칩과 부드러운 빨간색 칩, 항상 화살표 포함(색상을 구별하지 못하는 사람들을 위해 DeltaChip). 동일: 회색 칩.
• 유사한 상태(예: 틀림, 어려움, 좋음, 쉬움)는 서로 명확히 다른 색상이 필요합니다.
• 카드를 강조하기 위해 색상 테두리 또는 링 없음. 강조는 해당 색상의 부드러운 배경으로만 가능합니다(bg-primary/10).
• 텍스트는 두 테마에서 항상 읽기 쉬워야 하며, 클릭 후 차트 범례 및 툴팁도 포함됩니다.

4. 레이아웃 및 대칭성

• 웹에서 전체 너비. 중앙에 좁은 콘텐츠 없음(페이지에서 max-w-* + mx-auto). 화면을 채우려면 grid를 사용하세요.
• 와이드 스크린은 열을 추가하고, 늘리지 않음. 1920px 이상 및 울트라와이드 21:9(2560 및 3440px)에서는 tokens.css에 정의된 3xl:(1920px) 및 4xl:(2560px)로 열 수를 늘리고(Tailwind v4에서 min-[1920px]:은 lg:에 밀리므로 사용 금지), 이전에 숨겨져 있던 패널을 열고(옆에 세부 정보, 차트 옆에 표), 종횡비를 제한하세요: 시간 차트는 최대 ~4:1, 막대 및 지도는 최대 ~2.5:1, 목록 행은 최대 ~720px. references/dashboards.md 섹션 4를 참조하세요.
• 모바일 우선. 편안한 측면 여백(16px), 비좁지 않음, 가로 숨 쉴 공간이 있는 캐러셀, 위쪽 공간이 있는 첫 번째 항목.
• 화면 높이에 맞춤. 콘텐츠는 너비뿐만 아니라 양방향으로 창에 적응합니다. 고정 크기의 지도, 차트, 이미지 또는 카드가 첫 화면의 하단 가장자리를 넘거나 창보다 더 높지 않습니다(목록만 페이지를 스크롤하여 아래로 계속됨): 지도, 차트 및 큰 이미지는 창에 의해 높이가 제한됩니다(max-h-[calc(100dvh-<header>)], h-[min(…,60dvh)], 정의된 높이의 컨테이너 내부에 preserveAspectRatio="xMidYMid meet"가 있는 SVG). 너비로만 넓은 시각적 요소 크기를 조정하지 마세요(w-full h-auto, aspect-[2/1]): 와이드 모니터 또는 노트북에서 아래로 넘칩니다. 첫 화면(헤더, 지표 및 기본 블록)은 390×844, 1366×650, 1536×730 및 1920×950(브라우저의 실제 사용 가능 영역, 막대를 이미 뺀 영역, 전체 화면은 측정 단위가 아님)에 완전히 들어맞습니다. assets/ui.tsx의 FitScreen을 사용하세요.
• 화면은 항상 채워짐. 마지막 블록은 끝까지 늘어납니다(flex-1). 화면의 절반이 비어 있지 않음: 실제 콘텐츠 또는 시각적 빈 상태(컨테이너의 아이콘 + 1줄)를 사용하세요.
• 대칭성은 필수입니다:
  • 나란히 있는 카드는 동일한 높이(items-stretch, h-full)이고, 내부 콘텐츠(차트, 표)도 함께 커지고 전체 높이를 차지합니다;
  • 왼쪽과 오른쪽에 동일한 수의 텍스트 줄;
  • 그리드에 의해 늘어난 카드는 내부에 빈 공간이 없습니다: 고정 높이의 목록 행과 세로로 중앙 정렬된 블록(제목 + 행), 절대 justify-around/justify-between으로 행을 분산시키지 않음; 비교 가능한 열(A x B)은 동일한 행 높이를 가져 행이 정렬됨(references/armadilhas.md, "늘어나는 카드" 참조)
  • 그리드 행이 완전함(3 + 1이 남지 않음);
  • 동일한 열에서 항목과 칩의 너비가 동일함;
  • 열이 서로 정렬됨(카드 내부 열, 표 열);
  • 카드의 내용(텍스트, 차트, 표, 아이콘, 칩)이 가운데가 아닌 왼쪽 정렬로 정렬됨(차트는 왼쪽 정렬이지만 차트 영역을 채움; 표는 내용 정렬을 따름);
  • 각 목록의 동일한 위치에 아이콘(또는 이미지)이 있음(예: 모두 왼쪽 또는 모두 오른쪽);
  • 행이 겹쳐서 표시되지 않음(모바일 제외, 거기서는 아래로 쌓임);
  • 제목이 오른쪽에 있는 경우 아이콘/아바타가 왼쪽에 있거나 그 반대인 경우, 모든 카드에서 일관성 유지.
• 가장자리에 닿는 콘텐츠. 텍스트, 표, 차트, 목록 또는 카드의 내용은 해당 컨테이너(카드, 섹션)의 가장자리까지 도달하고, 내부에 불필요한 공간이 없습니다. 텍스트는 왼쪽에, 표는 왼쪽과 오른쪽에 닿고(패딩 내에서), 차트는 차트 영역을 채웁니다.

5. 반응형 및 중단점

• 중단점: tokens.css는 3xl(1920px) 및 4xl(2560px)을 제공합니다. min-[…]는 피하세요(Tailwind v4에서 lg:에 밀려서 무시됨).
• 모바일 및 태블릿(390px, 768px): 카드 스택, 전체 너비 테이블, 작은 차트, 스크롤 가능한 목록. 목록은 아래로 스크롤(가로로 미끄러지지 않음). 긴 숫자 및 텍스트가 있는 테이블은 가로 스크롤될 수 있습니다(컨테이너에 overflow-x-auto 포함). 카드는 그리드에서 스택되어 전체 너비를 차지합니다. 목록과 테이블은 모바일에서 읽을 수 있어야 합니다(글꼴 크기 14px/16px, 행의 텍스트가 줄 바꿈되지 않음).
• 노트북(1366px, 1536px): 2~3열 그리드, 사이드바(있는 경우) 축소 가능. 대시보드는 카드당 하나의 지표로 시작하여 공간이 허용하는 대로 확장됩니다. 페이지(목록, 양식)는 사용 가능한 공간을 채우기 위해 확장됩니다.
• 데스크톱(1920px): 3~4열 그리드, 추가 정보가 있는 확장된 사이드바. 정보 밀도를 높이기 위해 더 많은 데이터 표시(더 많은 지표, 더 많은 차트 세부 정보).
• 울트라와이드(2560px, 3440px): 4~6열 그리드, 패널 나란히 열기. 콘텐츠 제한: 텍스트 줄과 차트는 매우 넓은 화면에서 너무 길어지지 않도록 최대 너비를 가집니다. 더 많은 데이터 표시(전체 테이블, 더 많은 차트).
• 화면 방향. 가로 모드(태블릿)는 콘텐츠를 왼쪽으로, 데이터를 오른쪽에 유지하고, 지도와 차트를 확장합니다. 세로 모드는 정보 흐름(위에서 아래로)과 데이터 밀도를 유지합니다.

6. 데이터 시각화

• 모든 차트, 지도 또는 그래프는 다음 기준을 충족해야 합니다:
  • 정보가 데이터를 안내함: 각 차트는 하나의 질문에 답합니다(예: "시간이 지남에 따라 어떻게 변했습니까?", "가장 큰 부분은 무엇입니까?").
  • 수량은 적절한 시각적 인코딩을 가짐: 막대는 비교용, 선은 추세용, 파이는 부분 대 전체용(단, 적은 수의 범주로 제한).
  • 라벨이 명확하고 읽기 쉬움: 축 레이블, 범례, 데이터 포인트는 두 테마에서 모두 읽을 수 있어야 함.
  • 혼란을 피함: 3D 효과, 그라데이션, 과도한 장식 없음. 차트는 깔끔하고 현대적이어야 함.
  • 대비 접근성: 모든 차트 요소는 배경에 대해 최소 3:1 대비를 가져야 함.
• 일반적인 차트 유형:
  • 꺾은선형 차트: 시간 경과에 따른 추세에 사용됨. 부드러운 선, 명확한 데이터 포인트.
  • 막대형 차트: 범주 간 비교에 사용됨. 수평 또는 수직.
  • 원형 차트: 전체의 일부에 사용됨(3~5개 범주로 제한).
  • 영역형 차트: 시간 경과에 따른 볼륨 또는 누적 값에 사용됨.
  • 분산형 차트: 두 변수 간의 관계에 사용됨.
  • 히트맵: 매트릭스 또는 그리드 데이터에 사용됨.
• 데이터 시각화에 대한 추가 리소스는 references/dashboards.md를 참조하세요.

7. 공통 컴포넌트

준비된 컴포넌트는 assets/ui.tsx 및 assets/dashboard.tsx에 있으며, 새로 만들기보다 재사용하거나 적응시킬 수 있습니다. 프로젝트에 이미 동등한 컴포넌트가 있다면 프로젝트의 것을 사용하세요.

핵심 컴포넌트:

• Card: 콘텐츠를 위한 기본 컨테이너. Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
• Section: 페이지 섹션(예: "개요", "세부 정보")을 위한 컨테이너.
• IconBox: 아이콘을 위한 컨테이너.
• Chip: 상태 또는 범주를 표시하는 작은 레이블.
• Pill: Chip과 유사하지만 더 둥글고 덜 강조됨.
• Button: 클릭 가능한 요소.
• BottomActions: 양식 하단의 작업 버튼(예: 취소, 저장).
• ListRow: 목록의 단일 행.
• ListCard: 목록의 카드.
• StatCard: 단일 통계를 표시하는 카드.
• DateBlock: 날짜를 표시하는 블록.
• FillEmpty: 빈 공간을 채우는 자리 표시자.
• InfoTip: 정보 아이콘 툴팁.
• NavLoading: 탐색 중 로딩 표시기.
• Spinner: 로딩 스피너.
• ThemeToggle: 밝음/어두움 테마 전환 버튼.
• FitScreen: 화면에 맞게 콘텐츠 크기 조정.

대시보드 컴포넌트:

• DashCard: 대시보드 카드.
• Kpi: 주요 성과 지표 표시.
• IconCircle: 원 안의 아이콘.
• DeltaChip: 변화 표시기(위/아래/동일).
• StatusChip: 상태 표시기.
• TrendDot: 추세 표시기.
• CountBadge: 개수 배지.
• Tabs: 탭 탐색.
• SeriesStat: 시리즈 통계.
• StatColumns: 통계 열.
• Dashed: 점선 구분선.
• KeyValue: 키-값 쌍.
• StackedBar: 누적 막대 차트.
• LegendGrid: 범례 그리드.
• Gauge: 게이지 차트.
• TooltipCard: 툴팁 카드.
• PillMark: 작은 표시.
• ListaAlta: 수직 목록(높이에 따라 페이지 매김).
• Divergentes: 분기 막대 차트.
• Quadro100: 100개당 표시.
• Colunas: 떠 있는 열.
• useFitRows: 몇 행이 들어맞는지 계산하는 훅.
• useFitHeight: 창의 남은 공간에 따라 차트 높이를 계산하는 훅.

8. 데이터 표시 규칙

• 데이터가 먼저입니다. 각 화면, 카드 또는 컴포넌트에서 가장 중요한 정보는 위쪽과 왼쪽에 있어야 합니다.
• 데이터는 항상 최신 상태여야 합니다. 표시된 데이터가 현재 상태를 반영하는지 확인하세요.
• 데이터는 명확하고 간결해야 합니다. 불필요한 세부 정보나 장식으로 데이터를 복잡하게 만들지 마세요.
• 데이터는 시각적으로 매력적이어야 합니다. 색상, 타이포그래피 및 레이아웃을 사용하여 데이터를 돋보이게 만드세요.

9. 오류 및 빈 상태

• 빈 상태: 데이터가 없을 때 빈 화면을 표시하지 마세요. 사용자에게 상황을 설명하고 다음 단계를 제안하는 의미 있는 빈 상태 메시지와 아이콘을 표시하세요.
• 오류 상태: 오류가 발생하면 사용자에게 친숙한 방식으로 알리고 문제 해결 방법을 제안하세요. 기술적 오류 메시지나 스택 추적을 표시하지 마세요.
• 로딩 상태: 데이터를 로드하는 동안 스피너 또는 스켈레톤 화면을 표시하여 진행 중임을 나타내세요.

10. 체크리스트 (게시 전 검토)

스크린샷을 찍거나 게시하기 전에 이 체크리스트를 검토하세요:

시각적

• 모든 텍스트가 대문자로 시작합니까?
• 모든 색상이 토큰을 사용합니까?
• 밝음 및 어두움 테마 모두에서 대비가 충분합니까?(텍스트, 차트, UI 요소)
• 시각적으로 구별할 수 없는 색상(예: 빨간색/녹색)에만 의존하지 않고, 상황을 나타내는 추가 표시(예: 화살표, 아이콘)가 있습니까?
• 카드, 목록, 그리드의 대칭성이 지켜졌습니까?
• 콘텐츠가 카드, 목록 또는 페이지 가장자리까지 채워지고 내부에 불필요한 공백이 없습니까?
• 측면 여백이 편안합니까?(특히 모바일에서)
• 첫 화면이 어떤 화면 크기에서도 넘치지 않습니까?(390×844, 1366×650, 1536×730, 1920×950 확인)
• 와이드 스크린이 콘텐츠를 늘리지 않고 추가 열을 제공합니까?
• 호버, 포커스 및 활성 상태가 정의되고 시각적으로 일관됩니까?
• 클릭 가능한 요소에 적절한 커서(pointer)가 표시됩니까?
• 아이콘, 이미지 및 아바타에 일관된 스타일(크기, 모양, 위치)이 적용됩니까?

기능적

• 차트와 그래프가 올바르게 렌더링되고 레이블이 지정됩니까?
• 표와 목록이 정렬되고 읽기 쉽습니까?
• 버튼과 링크가 올바른 대상으로 연결됩니까?
• 양식 입력과 유효성 검사가 예상대로 작동합니까?
• 데이터가 최신 상태이고 올바르게 표시됩니까?
• 오류 및 빈 상태가 적절하게 처리됩니까?
• 로딩 상태가 시각적으로 표시됩니까?
• 모바일 및 웹 모두에서 모든 중단점이 올바르게 작동합니까?
• 두 테마 모두에서 모든 것이 올바르게 작동합니까?

접근성

• 모든 이미지와 아이콘에 alt 텍스트가 있습니까?
• 모든 대화형 요소에 키보드 지원이 있습니까?
• 색상 대비가 WCAG AA(4.5:1 일반 텍스트, 3:1 큰 텍스트)를 충족합니까?
• 터치 대상이 충분히 큽니까?(최소 44x44 CSS 픽셀)
• 스크린 리더가 콘텐츠를 올바르게 읽을 수 있습니까?
• 탭 순서가 논리적입니까?

참조 파일

다음 파일은 이 SKILL.md를 보완하며, 다양한 상황에서 사용해야 합니다:

• references/informacao.md: 새 화면 또는 리디자인을 위한 정보 계획.
• references/padroes-aprovados.md: 승인된 UI 패턴.
• references/armadilhas.md: 일반적인 기술적 오류.
• references/migracao.md: 전체 앱 리디자인 프로세스.
• references/exemplos.md: 올바른 UI와 잘못된 UI의 예.
• references/dashboards.md: 대시보드 디자인 원칙.
• references/paletas.md: 검증된 색상 팔레트.
• references/anatomia-dashboard.md: 대시보드 참조의 측정 및 구조.
• assets/tokens.css: CSS 사용자 정의 속성 및 Tailwind v4 설정.
• assets/dashboard.tsx: 대시보드 React 컴포넌트.
• assets/painel.tsx: 지도 React 컴포넌트.
• assets/ui.tsx: 기본 UI React 컴포넌트.
• scripts/lint-ui.mjs: UI 린트 스크립트.
• scripts/check-ui.mjs: UI 검사 스크립트.
• references/exemplos-dashboards/: 대시보드 예제 이미지.

항상 관련 참조 파일을 열고 이 지침을 따르세요.