{"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":["중요한 오류 설명을 배지 한 단어로 대체하지 않습니다.","클릭할 수 없는 배지에 버튼처럼 hover·focus·손 모양을 부여하지 않습니다."],"accessibility":["상태 이름을 텍스트로 제공하고 색만으로 구분하지 않습니다.","아이콘이 같은 의미를 반복한다면 접근성 트리에서 숨깁니다.","상태 변경의 실시간 알림이 필요하면 배지 전체를 반복 알리는 대신 적절한 status 영역을 사용합니다."],"density":{"compact":"반복 목록에서만 여백을 줄이고 주요 행동 간격은 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"설명 중심·프레젠테이션 화면에 사용합니다. 정보 계층을 유지하며 여백을 늘립니다."},"states":[{"name":"기본·완료","condition":"정상적인 처리 결과","response":"블루 계열과 완료 문구를 함께 사용합니다."},{"name":"neutral","condition":"대기·분류","response":"강한 강조 없이 문맥을 제공합니다."},{"name":"amber","condition":"주의가 필요함","response":"보류 이유 등 상세 설명을 주변에 둡니다."},{"name":"rose","condition":"검토·오류와 관련됨","response":"색 외에 검토 필요 문구로 상태를 전달합니다."},{"name":"outline","condition":"저강도 분류","response":"경계와 텍스트로만 구분합니다. 선택 상태나 동작을 뜻하지 않습니다."}],"recovery":{"loading":"진행 중임을 알리고 중복 요청을 차단합니다. 기존 데이터가 있으면 갱신 중에도 유지합니다.","empty":"처음부터 데이터가 없는 상태에는 생성·연결 행동을 제공합니다.","filtered":"검색 결과가 없으면 데이터 없음과 구분하고 필터 초기화 행동을 제공합니다.","error":"마지막 정상 데이터를 보존하고 실패 영역에 재시도를 제공합니다."},"tokenMapping":[{"path":"klic.semantic.color.accent","purpose":"행동·선택·진행을 전달하는 블루","cssVariable":"--klic-semantic-color-accent","cssProperty":"color","value":"#245fc2","chain":["klic.semantic.color.accent","klic.brand.color.accent","klic.primitive.color.palette.klic.accent"],"tailwind":"text-[var(--klic-semantic-color-accent)]"},{"path":"klic.semantic.color.success","purpose":"블루 기반 완료 상태 텍스트","cssVariable":"--klic-semantic-color-success","cssProperty":"color","value":"#1c4fa4","chain":["klic.semantic.color.success","klic.brand.color.success","klic.primitive.color.palette.klic.hover"],"tailwind":"text-[var(--klic-semantic-color-success)]"},{"path":"klic.semantic.color.warning","purpose":"주의 상태 텍스트","cssVariable":"--klic-semantic-color-warning","cssProperty":"color","value":"#835600","chain":["klic.semantic.color.warning","klic.brand.color.warning","klic.primitive.color.warning-800"],"tailwind":"text-[var(--klic-semantic-color-warning)]"},{"path":"klic.semantic.color.danger","purpose":"오류·검토 상태 텍스트","cssVariable":"--klic-semantic-color-danger","cssProperty":"color","value":"#b13c43","chain":["klic.semantic.color.danger","klic.brand.color.danger","klic.primitive.color.danger-700"],"tailwind":"text-[var(--klic-semantic-color-danger)]"}],"limitations":["현재 배지는 span 기반 정적 정보입니다. 기본·blue·amber·rose·neutral·outline 클래스가 있으며 클릭·삭제·필터 API는 없습니다."],"checklist":["색을 구분하기 어려워도 상태를 읽을 수 있는지 확인합니다.","긴 상태 문구가 잘리지 않는지 확인합니다.","정적 배지가 Tab 정류장을 만들지 않는지 확인합니다."],"exports":{"design":"/design/component/badge/DESIGN.md","contract":"/design/component/badge/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC Badge (component/badge)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}