본문으로 건너뛰기
Dot Design System
v0.3.1

Dot Design System Acceptance Specification

배포와 사용성 품질이 완료로 인정되는 조건을 정의합니다.

Distribution

  • pnpm build가 ESM, declaration, styles.css, tokens.css를 생성한다.
  • root, ui, motion entry가 React client module boundary를 보존하고 token·Tailwind entry는 server-safe하게 유지된다.
  • npm pack --dry-run에 docs, tokens, catalog, active web assets가 포함된다.
  • 하나의 @classum/dot-design-system version으로 모든 artifact가 고정된다.
  • tarball에 편집 원본, 대형 render master, 개인 로컬 경로가 없다.
  • 지원 Node 범위의 실제 tarball 소비 앱에서 strict typecheck와 Vite build가 발행 전에 통과한다.
  • CI와 release 설치는 공개 dependency를 npmjs에서 받고, @classum scope와 인증만 사내 registry로 제한한다.
  • release workflow는 조직에서 제공하는 NPM_AUTH_TOKEN secret만 publish와 게시 후 smoke에 전달한다.

Agent context

  • docs/agent-context.md와 agent reference documents가 npm package에 포함되고 canonical docs와 일치한다.
  • dot-ds agents init이 소비 저장소에 package name·version·각 source document SHA-256을 가진 deterministic snapshot manifest를 만든다.
  • init이 Codex와 Claude가 발견할 수 있는 같은 dot-design-system skill과 짧은 adapter를 만들고, 소비 저장소 소유 지시와 unmanaged skill을 덮어쓰지 않는다.
  • dot-ds agents sync가 managed snapshot과 marker 안의 adapter만 갱신하며, 연속 실행해도 결과가 변하지 않는다.
  • dot-ds agents check이 package version과 copied-document hash drift를 실패로 보고하고 파일을 수정하지 않는다.
  • dot-ds agents prompt new-screen이 설치된 package version과 화면 설계 원칙을 포함한 self-contained prompt를 출력하고 파일을 수정하지 않는다.
  • package install과 postinstall은 agent context, skill, adapter 또는 소비 저장소의 다른 파일을 생성·변경하지 않는다.

Documentation

  • docs/catalog.json의 모든 path와 route가 유일하고 실제 canonical 문서를 가리킨다.
  • 모든 stable public primitive, composition과 brand component가 source module과 연결된 상세 사용 계약을 가진다.
  • component 문서가 목적, 선택 기준, 구조, 변형·크기, 상태·동작, 콘텐츠, 접근성, 좁은 화면·긴 콘텐츠, 실제 public API, 실행 가능한 예제와 금지 사례를 포함한다.
  • stable component 문서의 source·runtime export·모든 TSX 예제를 CI에서 검증하고, 배포 여부와 live·code-only·mock 예시 상태를 서로 분리해 표시한다.
  • 문서 code block은 build-time syntax highlighting, 언어 레이블, keyboard로 접근 가능한 가로 scroll과 복사 성공·실패 피드백을 제공한다.
  • 문서 사이트와 agent snapshot이 catalog에서 같은 원문을 파생하며 별도 원칙 사본을 만들지 않는다.
  • 문서 사이트가 keyboard 탐색, visible focus, 좁은 화면 navigation, reduced motion과 production build를 지원한다.
  • 문서 사이트가 모든 catalog route를 정적 HTML·RSC로 export하고 canonical JSON artifact와 production origin을 검증한다.
  • 공개 문서는 private S3 origin, CloudFront OAC·HTTPS·보안 header와 Route 53 A·AAAA alias를 사용한다.

Public API

  • root entry가 primitive, composition, brand component와 public prop type을 export한다.
  • ui entry가 character·motion asset graph 없이 theme, primitive와 composition을 export한다.
  • motion entry가 DotMotion, variant type과 URL map을 export한다.
  • tokens와 Tailwind preset을 독립 subpath로 import할 수 있다.
  • public declaration에 제품 auth·backend interface dependency가 없다.

Assets

  • DotIcon은 승인된 logo SVG의 source SHA-256을 고정해 192×233 lossless sRGB WebP로 재생성한 24KiB 이하 derivative를 사용한다.
  • ui entry 소비 build는 DotIcon WebP 하나만 방출하고 원본 logo SVG, character와 motion asset을 포함하지 않는다.
  • 활성 3D character는 512/1024/2048 AVIF·WebP와 alpha channel을 가진다.
  • DotCharacter는 catalog ID만 받고 100px보다 작게 렌더하지 않는다.
  • 격리된 White application-03은 파일과 component ID union에 없다.
  • Lottie raster는 embedded WebP이며 외부 image URL이 없다.
  • Embedded Lottie raster는 e: 1, 빈 u와 명시적인 sRGB ICC profile을 가져 표준 renderer가 data URI를 직접 해석한다.
  • Motion manifest가 원본 SHA-256, 변환 옵션, transform.compatibilityPatches, 비래스터 구조 fingerprint와 배포 파일 SHA-256을 기록한다.
  • Lottie 최적화는 manifest에 사전 선언된 호환성 패치를 제외하고 layer, keyframe, timing, effect, expression 등 비래스터 애니메이션 구조를 변경하지 않는다.
  • avatar-body-trace-path-v1 패치는 승인된 Avatar 원본 SHA-256과 여섯 개 trace expression이 모두 정확히 일치할 때만 position을 group transform에 맞추고 rotation tangent를 world-space vector로 변환한다.
  • Avatar 결과물의 dotTransform.expressionPatches가 patch ID, 적용 개수, 입력·출력 expression SHA-256을 기록한다.
  • 선언되지 않았거나 대상·개수가 다른 unresolved expression은 변환과 배포를 fail closed한다.
  • Avatar와 Processing은 실제 lottie-web SVG renderer smoke에서 data_failed, Lottie error와 runtime console error 없이 frame을 렌더한 뒤에만 active motion으로 배포한다.
  • DotMotion은 lazy load, reduced motion, failure fallback을 제공한다.

UX and accessibility

  • Button, input, select와 sidebar action의 target이 최소 40px이다.
  • FormField가 control id와 accessible description/error relationship을 연결한다.
  • 상태를 색상만으로 전달하지 않는다.
  • icon-only action에 접근 가능한 이름을 제공할 수 있다.
  • 패키지가 앱의 body, router, auth 또는 page scroll을 소유하지 않는다.
  • token과 compiled utility는 .dot-theme 밖의 전역 selector를 오염시키지 않는다.
  • compiled utility의 theme boundary는 specificity를 높이지 않아 소비 앱의 utility와 responsive override를 막지 않는다.
  • theme base reset의 descendant selector도 zero specificity를 유지해 component utility를 덮어쓰지 않는다.
  • Radix portal은 DotTheme 내부 portal root를 사용해 token과 utility scope를 유지한다.
  • Sidebar의 cookie persistence와 전역 keyboard shortcut은 명시적으로 설정한 경우에만 동작한다.