{"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":["한 화면의 주된 완료 행동은 기본 버튼 한 개로 강조합니다.","보조 행동은 secondary·outline으로, 손실 가능성이 있는 행동은 danger와 구체적인 문구로 구분합니다."],"avoid":["다른 URL로 이동할 때는 버튼 대신 실제 href가 있는 링크를 사용합니다.","disabled 스타일만 바꾸거나 aria-disabled만 선언해 중복 실행을 막았다고 가정하지 않습니다."],"accessibility":["아이콘만 있는 버튼에는 작업 이름을 aria-label로 제공합니다.","처리 중에도 사용자가 어떤 작업을 실행했는지 알 수 있는 레이블을 유지합니다.","시각적 높이와 실제 조작 영역을 별도로 확인하고 긴 한글 레이블을 잘라내지 않습니다."],"density":{"compact":"관리자 반복 입력에만 사용합니다. 도움말·오류와 실제 클릭 영역은 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"처음 작성하는 폼·긴 안내에 권장합니다. 필드 그룹의 간격을 늘립니다."},"states":[{"name":"기본","condition":"실행 가능한 상태","response":"Enter·Space 또는 포인터로 한 번 실행합니다."},{"name":"hover + focus","condition":"포인터가 있고 키보드 포커스도 있음","response":"배경과 focus 외곽선을 함께 유지합니다."},{"name":"disabled","condition":"HTML disabled가 설정됨","response":"클릭과 키보드 실행을 차단하고 Tab 순서에서 제외합니다."},{"name":"busy","condition":"처리가 진행 중","response":"중복 실행을 차단하고 처리 중 레이블을 표시합니다. 상세 데모는 aria-busy도 제공합니다."},{"name":"완료·재시도","condition":"데모 처리가 끝남","response":"원래 레이블과 실행 가능 상태를 복원합니다. 실제 실패·재시도 로직은 제품에서 연결합니다."}],"recovery":{"loading":"진행 중임을 알리고 중복 요청을 차단합니다. 기존 데이터가 있으면 갱신 중에도 유지합니다.","empty":"초기 빈 입력은 오류로 표시하지 않습니다. 필수 조건은 제출 전에도 안내합니다.","filtered":"검색 결과가 없으면 데이터 없음과 구분하고 필터 초기화 행동을 제공합니다.","error":"입력값을 보존하고 오류 설명을 해당 필드와 연결합니다."},"tokenMapping":[{"path":"klic.component.button.size.default.height","purpose":"주요 동작 컨트롤의 최소 높이","cssVariable":"--klic-component-button-size-default-height","cssProperty":"min-height","value":"2rem","chain":["klic.component.button.size.default.height","klic.semantic.size.action.default","klic.brand.dimension.control.height.md","klic.primitive.dimension.step.8"],"tailwind":"min-h-[var(--klic-component-button-size-default-height)]"},{"path":"klic.component.button.background.default","purpose":"기본 버튼 배경","cssVariable":"--klic-component-button-background-default","cssProperty":"background-color","value":"#245fc2","chain":["klic.component.button.background.default","klic.semantic.color.accent","klic.brand.color.accent","klic.primitive.color.palette.klic.accent"],"tailwind":"bg-[var(--klic-component-button-background-default)]"},{"path":"klic.component.button.icon.size","purpose":"버튼 안 아이콘 크기","cssVariable":"--klic-component-button-icon-size","cssProperty":"width","value":"1rem","chain":["klic.component.button.icon.size","klic.semantic.size.icon.default","klic.brand.icon.size.md","klic.primitive.dimension.step.4"],"tailwind":"w-[var(--klic-component-button-icon-size)]"}],"limitations":["현재 미리보기는 native button입니다. 상세 컨트롤의 variant·size·state는 사이트 데모 설정이며 React Button props나 배포 패키지 API가 아닙니다."],"checklist":["Enter와 Space가 각각 한 번만 실행되는지 확인합니다.","busy 동안 연속 클릭을 시도합니다.","Dark에서 focus·hover·disabled를 함께 확인합니다."],"exports":{"design":"/design/component/button/DESIGN.md","contract":"/design/component/button/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC Button (component/button)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}