{"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":["단순한 성공 알림이나 부가 설명만을 위해 작업 흐름을 막지 않습니다.","긴 업무 전체를 모달 여러 개로 중첩하지 않습니다."],"accessibility":["화면의 제목과 aria-labelledby를 연결하고 닫기 아이콘에는 이름을 제공합니다.","삭제 같은 위험 결정은 본문으로 영향을 설명하고 초기 focus를 제품 위험에 맞춰 결정합니다.","키보드 진입·모달 안 순환·Escape·닫힌 뒤 복귀를 하나의 흐름으로 확인합니다."],"density":{"compact":"반복 목록에서만 여백을 줄이고 주요 행동 간격은 유지합니다.","normal":"기본 권장 밀도입니다. 읽기 순서와 레이블·컨트롤·피드백 그룹을 유지합니다.","relaxed":"설명 중심·프레젠테이션 화면에 사용합니다. 정보 계층을 유지하며 여백을 늘립니다."},"states":[{"name":"closed","condition":"작업 시작 전","response":"본문의 trigger만 focus할 수 있습니다."},{"name":"open","condition":"showModal() 호출","response":"native top layer에 열리고 뒤 화면의 상호작용을 막습니다."},{"name":"invalid + focus","condition":"이름이 비어 있는 채 제출","response":"입력을 유지하고 필수값 오류를 표시하며 해당 입력으로 안내합니다."},{"name":"저장 완료","condition":"로컬 저장 성공","response":"대화상자를 닫고 완료 status와 trigger focus를 복원합니다."},{"name":"취소·Escape","condition":"사용자가 완료하지 않고 닫음","response":"확인되지 않은 값을 저장하지 않고 이전 위치로 돌아갑니다."}],"recovery":{"loading":"진행 중임을 알리고 중복 요청을 차단합니다. 기존 데이터가 있으면 갱신 중에도 유지합니다.","empty":"처음부터 데이터가 없는 상태에는 생성·연결 행동을 제공합니다.","filtered":"검색 결과가 없으면 데이터 없음과 구분하고 필터 초기화 행동을 제공합니다.","error":"마지막 정상 데이터를 보존하고 실패 영역에 재시도를 제공합니다."},"tokenMapping":[{"path":"klic.component.card.background.default","purpose":"콘텐츠를 담는 패널 표면","cssVariable":"--klic-component-card-background-default","cssProperty":"background-color","value":"#ffffff","chain":["klic.component.card.background.default","klic.semantic.color.panel","klic.brand.color.panel","klic.primitive.color.theme.klic.light.panel"],"tailwind":"bg-[var(--klic-component-card-background-default)]"},{"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.input.size.default.height","purpose":"입력 컨트롤의 최소 높이","cssVariable":"--klic-component-input-size-default-height","cssProperty":"min-height","value":"2rem","chain":["klic.component.input.size.default.height","klic.semantic.size.input.default","klic.brand.dimension.control.height.md","klic.primitive.dimension.step.8"],"tailwind":"min-h-[var(--klic-component-input-size-default-height)]"}],"limitations":["이 사이트는 하나의 native dialog를 showModal()로 엽니다. 프로젝트 이름 필수 검사와 localStorage 저장, Escape·외부 클릭 닫기, trigger focus 복귀를 제공합니다."],"checklist":["열기→Tab 순환→Escape→trigger 복귀를 확인합니다.","빈 이름 제출 후 입력과 오류가 유지되는지 확인합니다.","열린 채 테마 전환과 긴 본문을 확인합니다."],"exports":{"design":"/design/component/dialog/DESIGN.md","contract":"/design/component/dialog/contract.json","types":"/design/klic-design.d.ts"},"prompt":"KLIC Dialog (component/dialog)을 사용해 화면을 구성하세요. 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나 실제 저장 기능을 만들어내지 마세요."}