# Skeleton 디자인 시스템 ## Skeleton 디자인 시스템 인터페이스 미리보기 저장된 읽기 상태를 유지하면서 테마와 화면 표현을 변경하고, 적용된 값을 확인하세요. ## Skeleton 디자인 시스템 디자인 레퍼런스 고정된 Skeleton 5.0.1 테마 파일, 컴파일된 CSS 유틸리티 동작 및 명시적으로 구성한 독창적인 요소. ### Cerberus 테마 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --spacing | 0.25rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --radius-base | 0.5rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-base--font-family | system-ui | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-heading--font-weight | bold | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-100 | oklch(0.84 0.08 254.62) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-300 | oklch(0.7 0.15 254.36) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-500 | oklch(0.57 0.21 258.29) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-700 | oklch(0.46 0.17 257.78) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-900 | oklch(0.34 0.11 257.14) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-50 | oklch(0.99 0 0) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-950 | oklch(0.18 0 0) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | ### Mint 테마 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --spacing | 0.25rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --radius-base | 0.375rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-base--font-family | system-ui, sans-serif | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-heading--font-weight | normal | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | ### Rose 테마 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --spacing | 0.25rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --radius-base | 0.375rem | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --typo-heading--font-weight | normal | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | 실제 테마 선언입니다. data-theme에서 이 가져온 테마를 선택하면 이 값들이 함께 변경되며, 원래의 읽기 상태는 그대로 유지됩니다. | ### CSS 통합 및 의미 기반 조합 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | 유틸리티 정의가 컴파일되도록 Tailwind 다음에 불러오세요. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | 가져온 테마만 해당 변수를 제공할 수 있습니다. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | 원래 모양 전환 버튼이 실제 컴파일된 다크 변형에 영향을 주도록 합니다. | | Surface pairings | light-dark(light value, dark value) | Skeleton의 globals는 color-scheme을 설정합니다. 일치하는 변형 없이 클래스만 변경해서는 충분하지 않습니다. | | Filled action | btn preset-filled-primary-500 | 네이티브 버튼의 형태와 테마에 맞춰 조정되는 프리셋을 결합합니다. | | Supporting action | btn preset-tonal-primary | 현재 화면 모드에 어울리는 색조 조합을 사용합니다. | | Disclosure | details.disclosure > summary | Skeleton CSS을 사용하는 브라우저 네이티브 열기 상태이며, Svelte 컴포넌트 초기화는 필요하지 않습니다. | ## Skeleton 디자인 시스템 완벽 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Skeleton 디자인 시스템의 CSS 기반 요소와 프레임워크 계층 ### 실제로 실행되는 계층을 선택하세요 > 이 리딩 데스크는 @skeletonlabs/skeleton 5.0.1과 해당 Tailwind CSS 유틸리티, 기본 제공 테마 세 가지를 사용합니다. skeleton-svelte나 skeleton-react는 불러오지 않습니다. 버튼, 배지, 칩, 카드, 펼침 영역은 실제 CSS 유틸리티로 표현하며, 테마 선택기와 저장 상태 로직은 독자적으로 구현한 JavaScript입니다. 이러한 경계를 지키면 프레임워크 컴포넌트 런타임을 사용하는 것처럼 오해하게 하지 않으면서도, 작은 Vite 페이지에서 전체 예제를 실행할 수 있습니다. ### 원본 CSS을 브라우저에 불러오는 대신 유틸리티를 컴파일하세요 Skeleton의 소스에는 @utility와 @variant 같은 Tailwind 지시문이 들어 있습니다. 제공된 Vite 설정에는 @tailwindcss/vite가 포함되어 있고, 스타일시트에서는 Skeleton과 선택한 테마보다 먼저 Tailwind를 불러옵니다. 소스 패키지를 그대로 링크하면 컴파일된 스타일이 재현되지 않습니다. 숨겨진 생성 CSS에 의존하지 않도록 전체 빌드 소스를 포함했습니다. 1. Tailwind CSS을 불러옵니다. 2. Skeleton 유틸리티를 불러옵니다. 3. 선택하려는 각 테마를 불러옵니다. 4. Tailwind Vite 플러그인으로 스타일시트를 컴파일합니다. ## Skeleton 디자인 시스템의 테마 선택과 실제 값 ### 사용할 수 있는 테마를 각각 명시적으로 불러옵니다 Cerberus, Mint, Rose는 모두 패키지의 themes 경로에서 각각 불러옵니다. 이름을 선택하면 루트의 data-theme 값이 바뀌고, 이에 따라 해당 변수 선언이 적용됩니다. 참고 항목에는 각 테마의 실제 기본 팔레트 샘플, 표면 색상의 최댓값과 최솟값, 간격, 모서리 반경, 글꼴 선언이 나와 있습니다. 이 값은 강조색 하나를 바꿔 만들어 낸 것이 아니라, 고정된 버전의 파일에서 확인한 값입니다. - 처음에는 Cerberus 테마가 적용됩니다. - Mint와 Rose는 실제로 각각 별도 불러오는 테마입니다. - 테마를 선택하면 복제한 콘텐츠 트리가 아니라 data-theme 값이 바뀝니다. ### 테마를 비교할 때 전체 콘텐츠를 동일하게 유지합니다 테마를 바꿔도 리딩 카드, 체크리스트, 저장 상태는 그대로 유지됩니다. 측면 패널은 선택할 때마다 루트에서 계산된 변수를 읽어 브라우저에 실제로 적용된 값을 보여 줍니다. 덕분에 독자는 동일한 콘텐츠와 상태를 바탕으로 글꼴, 형태, 색상 팔레트의 차이를 비교할 수 있습니다. ## Skeleton 디자인 시스템의 다크 모드와 color-scheme ### 다크 모드 변형을 실제 컨트롤에 연결합니다 스타일시트는 루트나 그 하위 요소에 .dark 클래스가 있을 때 적용되는 클래스 기반 다크 모드 변형을 정의합니다. Skeleton의 전역 규칙은 이 변형을 사용해 color-scheme을 설정합니다. 따라서 화면 모드 버튼을 누르면 light-dark() 표면 색상 조합의 적용 조건도 바뀝니다. 클래스를 바꾸면서 Tailwind 기본 미디어 기반 변형은 그대로 두면, 실제 표면은 밝은 상태인데 다크 모드로 표시될 수 있습니다. ### 가독성을 유지하는 프리셋을 사용합니다 화면 모드 전환에는 preset-tonal-primary를, 읽기 동작에는 preset-filled-primary-500을 사용합니다. 프리셋은 표면과 전경색의 관계를 조정하며, 색상 토큰 하나만으로는 충분한 대비를 보장하지 않습니다. 클래스를 성공적으로 바꿨다고 해서 시각적으로도 올바르다고 가정하지 않고, Rose로 전환한 뒤 컨트롤 텍스트와 펼침 영역을 포함해 실제 다크 모드 화면을 확인했습니다. ## Skeleton 디자인 시스템의 타이포그래피, 형태, 레이아웃 ### 테마 선언과 독자적인 정보 위계를 구분합니다 Cerberus는 시스템 글꼴을 선언하고 Rose는 다른 대체 글꼴 스택을 포함합니다. 이 사례에서는 원격 글꼴을 가져오지 않으며, 브라우저는 선택한 스택에서 사용할 수 있는 글꼴을 사용합니다. 독자적으로 구성한 레이아웃에서는 페이지 제목을 36px, 리딩 제목을 28px로 명시합니다. 이러한 구성상의 선택은 테마 자체의 글꼴 종류 및 굵기 선언과 별개입니다. ### 모서리 반경과 간격은 테마에서 가져옵니다 팔레트 샘플은 --radius-base를 사용하므로 선택한 테마에 따라 모서리 형태가 달라집니다. 전체 참고 항목에는 --spacing도 포함되어 있습니다. 바깥쪽 두 열 레이아웃의 간격은 24px이며, 720px 미만에서는 한 열로 바뀝니다. 이는 독자적으로 정한 구성 방식입니다. 테마가 정보 구조를 결정하거나 모든 페이지에서 같은 그리드를 사용하도록 강제하지는 않습니다. ## Skeleton 디자인 시스템의 읽기 상태와 화면 초기화 ### 저장은 페이지 내에서만 처리하고 언제든 되돌릴 수 있게 합니다 읽기 동작은 aria-pressed 값을 전환하고, 레이블을 바꾸며, 읽기 쉬운 상태 메시지를 업데이트합니다. 이 페이지에서는 메모리에 불리언 값만 저장합니다. 계정이나 영구 저장 기능, 네트워크 요청은 없습니다. 테마를 바꿔도 같은 상태가 유지되므로 독자는 서로 다른 색상 팔레트에서 활성 상태를 비교할 수 있습니다. ### 읽기 상태는 유지한 채 화면 표시만 초기화합니다 화면 표시를 초기화하면 테마는 Cerberus로, 화면 모드는 밝게 돌아가지만 저장된 불리언 값은 그대로 유지됩니다. 레이블에도 이러한 범위가 명시되어 있습니다. 리딩 카드를 데스크에서 삭제하는 동작은 별도로 제공할 수 있습니다. 이 두 동작을 혼동하면 단순한 화면 초기화로 사용자의 현재 선택이 예기치 않게 사라질 수 있습니다. ## Skeleton 디자인 시스템의 네이티브 펼침 영역과 실제 콘텐츠 ### 브라우저의 details 요소를 사용합니다 보충 설명은 펼침 영역 유틸리티를 적용한 실제 details/summary 구조입니다. 브라우저가 키보드와 포인터를 통한 열기를 지원하고, Skeleton은 표시 방식을 제공합니다. 이는 Skeleton의 Svelte Accordion 컴포넌트가 아니며, 컴포넌트 API이나 이벤트를 만들어 내지 않습니다. 단락에는 무엇이 바뀌고 무엇이 그대로 유지되는지 구체적으로 설명되어 있습니다. ### 전환이 끝난 뒤 열린 상태를 확인합니다 스타일시트는 펼침 영역의 크기에 애니메이션을 적용할 수 있습니다. 열린 상태를 캡처하기 전에 시각적 검사가 전환이 끝날 때까지 기다리므로, 즉시 스크린샷을 찍으면 콘텐츠가 펼쳐지는 중간 상태가 잡힐 수 있습니다. 레이아웃 검증에는 펼쳐진 단락과 계산된 긴 글꼴 스택도 포함됩니다. 따라서 측면 패널이 많은 콘텐츠를 숨긴 상태에서만 검증을 통과하는 일을 막을 수 있습니다. ## Skeleton 디자인 시스템의 반응형 테마 검사 ### 좁은 화면에서도 값을 읽기 쉽게 유지합니다 작업 영역은 너비 720px 미만에서 세로로 배치되고 바깥쪽 여백은 16px로 줄어듭니다. 계산된 각 토큰 이름과 값은 각각 한 줄씩 차지하므로, 긴 글꼴 스택과 OKLCH 문자열도 가로로 스크롤하지 않고 줄바꿈됩니다. 다섯 가지 색상 샘플은 촘촘한 그리드에 계속 표시되고 테마 컨트롤은 여러 줄로 배치됩니다. ### 테마와 상태 조합을 테스트하세요 브라우저 테스트에서는 읽기 카드를 저장하고, Mint와 Rose 테마를 차례로 전환한 다음 어두운 화면 모드를 켜고 상세 내용을 펼친 후 표시 설정을 초기화합니다. 이 과정 내내 저장 상태가 유지되어야 합니다. 280px 너비까지 확인했으므로, 초기 테마 화면 하나만 보는 대신 실제로 긴 값과 펼쳐진 콘텐츠까지 테스트합니다. ## Skeleton 디자인 시스템의 완성형 Vite 소스 ### 소스 파일 네 개를 모두 저장하세요 예제에는 index.html, style.css, main.js, vite.config.mjs가 포함됩니다. 고정 버전의 Skeleton, Tailwind 및 Vite 종속 항목을 설치한 다음 해당 디렉터리에서 Vite를 실행하세요. 명시적으로 지정한 @source는 유틸리티 클래스가 포함된 HTML을 가리키므로, 컴파일 결과에 읽기 데스크에서 사용하는 클래스가 포함됩니다. 필요한 프레임워크 스캐폴드가 빠진 것은 아닙니다. ### 필요에 따라 프레임워크 컴포넌트를 별도로 선택하세요 Skeleton Svelte 또는 React 컴포넌트가 필요한 제품은 해당 프레임워크 패키지와 문서에 안내된 설정을 사용해야 합니다. CSS 기반의 이 예제는 공유 테마와 유틸리티 계층을 이해하는 데 유용하지만, 해당 컴포넌트와 동일한 API을 제공한다고 주장하지는 않습니다. 에이전트용으로 제공된 가이드를 수정할 때도 이 차이를 유지하세요. ## Skeleton 디자인 시스템 컴포넌트 예제 ### index.html 완성된 읽기 콘텐츠, 네이티브 CSS 컴포넌트, 기존 컨트롤. ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.

``` 코드 참조 - 소스 파일 네 개를 모두 하나의 프로젝트 디렉터리에 저장하세요. ### style.css 테마 가져오기, 클래스 기반 다크 변형, 반응형 구성. ``` @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/mint'; @import '@skeletonlabs/skeleton/themes/rose'; @source './index.html'; @custom-variant dark (&:where(.dark, .dark *)); body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}} .workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal} ``` 코드 참조 - 소스 파일 네 개를 모두 하나의 프로젝트 디렉터리에 저장하세요. ### main.js 계산된 토큰 검사와 읽기 및 표시 상태의 분리. ``` import './style.css'; const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect(); ``` 코드 참조 - 소스 파일 네 개를 모두 하나의 프로젝트 디렉터리에 저장하세요. ### vite.config.mjs 실제 Tailwind 컴파일러 통합. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` 코드 참조 - 소스 파일 네 개를 모두 하나의 프로젝트 디렉터리에 저장하세요. ## Skeleton 디자인 시스템 에이전트 설정 ### 구현 시작점 먼저 제공된 파일 네 개를 저장하세요. 이는 CSS 유틸리티 계층이며 Svelte나 React 런타임이 필요하지 않습니다. ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### 프로젝트를 위한 프롬프트 ``` 실제 CSS 유틸리티와 Cerberus/Mint/Rose 테마 가져오기를 사용해 Skeleton 5.0.1 읽기 데스크를 완성하세요. 클래스 기반 다크 색상 구성, 읽기 쉬운 계산 토큰 행, 전체 콘텐츠, 로컬 저장 상태, 해당 상태를 삭제하지 않는 표시 설정 초기화를 유지하세요. CSS 계층과 프레임워크 컴포넌트 API를 구분하세요. ``` ## Skeleton 디자인 시스템 소스 및 범위 실제 Skeleton Tailwind CSS 유틸리티와 제공 테마, 그리고 기존의 일반 JavaScript 페이지 동작을 사용합니다. Skeleton Svelte 또는 React 런타임은 로드되지 않습니다. - 설치 CSS 및 프레임워크 통합 선택. - 테마 테마 구성 및 선택. - 색상 팔레트 및 대비 조합. - 다크 모드 색상 구성 및 변형 동작. - 상세 표시 네이티브 details/summary CSS 계층. ## Skeleton 디자인 시스템 관련 자료 ### Tabler 실제 1.6 테마 변수, 타임라인 카드, 데이터 그리드 맥락, 모달 유효성 검사, 로컬 체크포인트를 적용할 수 있는 라이트/다크 구성을 갖춘 네이티브 Tabler 프로젝트 저널입니다. ### Tamagui 검증, 진행 상황, 빈 상태 복구 기능이 포함된 기본 컴포넌트 기반 습관 관리 보드에서 Tamagui의 실제 v5 토큰 범주와 라이트/다크 블루 테마를 살펴보세요. ### UIkit UIkit은 CSS 프레임워크, Less 사용자 지정, 속성 기반 JavaScript 컴포넌트를 결합합니다. 아래 워크숍 일정 도구에서는 Switcher, Accordion, 반응형 그리드가 함께 동작하며, 네이티브 컴포넌트의 동작 범위와 애플리케이션의 선택 상태가 시작되는 지점을 보여 줍니다. - [구현 레퍼런스](https://www.skeleton.dev/docs/svelte/design/themes) - [출처](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [출처](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [출처](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [출처](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [코드 참조](https://www.skeleton.dev/docs/svelte/get-started/installation) - [설치 CSS 및 프레임워크 통합 선택.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [테마 테마 구성 및 선택.](https://www.skeleton.dev/docs/svelte/design/themes) - [색상 팔레트 및 대비 조합.](https://www.skeleton.dev/docs/svelte/design/colors) - [다크 모드 색상 구성 및 변형 동작.](https://www.skeleton.dev/docs/svelte/guides/mode) - [상세 표시 네이티브 details/summary CSS 계층.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)