{"delivery":{"type":"reference-library","npmPackagePublished":false,"npmPackage":{"name":"klic-design","version":"0.0.4","published":false,"status":"source-ready","registry":"https://registry.npmjs.org/","runtime":"Bun 1.4.2 preferred; Node.js 22+ supported","exports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"publishedExports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"candidateExports":["tokens","theme","motion","motions/runtime","motions/runtime.css","components","blocks","Agent Skill","CSS","TypeScript","CLI"],"candidateOnlyExports":[],"publicationExportsVerified":true,"skillPath":"skills/klic-design/SKILL.md","buildCommand":"bun run pack:npm","publishedVersion":"0.0.3","publishedIntegrity":"sha512-GJJOOXh5UXxSSURZLxXLU5qq968O+p91TeTkNtqo527mzj9BOtoOH4nyMfNWZwrQwJ4o+zhy9i+cnlX71nPeKA==","installCommand":"bun add klic-design@0.0.3","cliCommand":"bunx --bun --package=klic-design@0.0.3 klic","nodeCliCommand":"npx --yes --package=klic-design@0.0.3 klic","sourceCLICommand":"curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs\nbun ./klic.mjs","sourceNodeCLICommand":"curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs\nnode ./klic.mjs"},"scope":"/about","licenses":"/licenses/README.md"},"system":{"schemaVersion":"1.0","revision":"6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97","definition":"/api/v1/design-system.json","docs":"/#docs/architecture"},"schemaVersion":"1.0","scope":"adoption-guidance","implementation":"native-html","use":["여러 항목의 같은 속성을 나란히 비교해야 할 때 사용합니다.","열 이름과 값의 단위·날짜 형식을 일정하게 유지합니다."],"avoid":["단순한 화면 배치를 위해 table을 사용하지 않습니다.","의미 있는 열을 좁은 화면에서 설명 없이 숨기거나 데이터를 가로로 잘라내지 않습니다."],"accessibility":["caption과 th scope로 표의 목적·관계를 설명합니다.","상태는 텍스트로 표시하고 수치에는 단위와 날짜 기준을 제공합니다.","열을 숨기는 경우 사용자가 같은 정보를 얻을 경로와 의미를 검토합니다."],"density":{"compact":"데이터 비교·반복 행에 사용하며 셀 padding만 줄입니다. 글자 크기와 단위는 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"설명 중심·프레젠테이션 화면에 사용합니다. 정보 계층을 유지하며 여백을 늘립니다."},"states":[{"name":"데이터 있음","condition":"기본 3행","response":"이름·상태·역할의 관계를 유지합니다."},{"name":"좁은 너비","condition":"열이 컨테이너를 넘침","response":"표를 담은 영역이 가로 스크롤을 소유합니다."},{"name":"긴 값 · 조합 예시","condition":"이름·설명이 길어짐","response":"읽기 가능한 줄바꿈 또는 명시적인 최소 폭을 결정합니다."},{"name":"빈 결과 · 조합 예시","condition":"검색과 일치하는 행이 없음","response":"colspan 안내 행으로 이유와 다음 행동을 제공합니다."},{"name":"부분 갱신 · 적용 규칙","condition":"일부 값만 다시 읽음","response":"기존 데이터를 유지하고 갱신 범위와 실패 이유를 구분합니다."}],"recovery":{"loading":"진행 중임을 알리고 중복 요청을 차단합니다. 기존 데이터가 있으면 갱신 중에도 유지합니다.","empty":"처음부터 데이터가 없는 상태에는 생성·연결 행동을 제공합니다.","filtered":"검색 결과가 없으면 데이터 없음과 구분하고 필터 초기화 행동을 제공합니다.","error":"마지막 정상 데이터를 보존하고 실패 영역에 재시도를 제공합니다."},"tokenMapping":[{"path":"klic.semantic.space.container.default","purpose":"독립적인 컨테이너 간격","cssVariable":"--klic-semantic-space-container-default","cssProperty":"gap","value":"1rem","chain":["klic.semantic.space.container.default","klic.brand.spacing.md","klic.primitive.dimension.step.4"],"tailwind":"gap-[var(--klic-semantic-space-container-default)]"},{"path":"klic.semantic.color.border","purpose":"행과 열의 경계","cssVariable":"--klic-semantic-color-border","cssProperty":"border-color","value":"#dfe5ee","chain":["klic.semantic.color.border","klic.brand.color.border","klic.primitive.color.theme.klic.light.line"],"tailwind":"border-[var(--klic-semantic-color-border)]"},{"path":"klic.semantic.typography.body.font-size","purpose":"데이터 본문의 읽기 크기","cssVariable":"--klic-semantic-typography-body-font-size","cssProperty":"font-size","value":"1rem","chain":["klic.semantic.typography.body.font-size","klic.brand.typography.scale.body.font-size","klic.primitive.dimension.step.4"],"tailwind":"text-[length:var(--klic-semantic-typography-body-font-size)]"}],"limitations":["현재 표는 3명의 이름·상태·역할을 보여주는 의미론적 HTML table입니다. 정렬·페이지네이션·셀 편집·가상화는 구현하지 않습니다."],"checklist":["머리글과 데이터 관계를 스크린리더에서 확인합니다.","좁은 패널에서 마지막 열까지 접근합니다.","0·빈 값·필터 0건의 문구를 구분합니다."],"exports":{"design":"/design/component/table/DESIGN.md","contract":"/design/component/table/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC Table (component/table)을 사용해 화면을 구성하세요. KLIC은 7개 디자인 디멘션과 4계층 토큰을 공통 기반으로 씁니다. 적용 기준은 다릅니다. 컴포넌트는 개별 조작 요소, 블록은 업무 흐름, 모션은 시간에 따른 전환을 다룹니다. 공개 npm: klic-design@0.0.3. 소스 후보 klic-design@0.0.4는 미발행이며 klic-design@0.0.3가 현재 발행본입니다. 먼저 https://design.klic.co.kr/api/v1/design-system.json의 공통 기준(revision 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97), DESIGN.md와 실제 소스를 읽고, 구현 책임·프리셋 허용 범위·충돌 해결 순서를 적용하세요. 사용 원칙·금지 사항·접근성·밀도·빈 상태·오류 처리를 준수하세요. 토큰은 klic. 4계층 참조를 보존하고 없는 API나 실제 저장 기능을 만들어내지 마세요."}