# 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のグローバル設定は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ユーティリティ、同梱された3種類のテーマを使用しています。skeleton-svelteやskeleton-reactは読み込みません。ボタン、バッジ、チップ、カード、開閉表示には実際のCSSユーティリティを使用し、テーマセレクターと保存状態のロジックはオリジナルのJavaScriptです。この境界を明確にすることで、フレームワークのコンポーネントランタイムがあるかのように見せずに、小規模なViteページとして完全な例を実行できます。 ### 生のCSSをブラウザーに読み込むのではなく、ユーティリティをコンパイルする Skeletonのソースには、@utilityや@variantなどのTailwindディレクティブが含まれています。付属のVite設定では@tailwindcss/viteを読み込み、スタイルシートではTailwindを読み込んだ後にSkeletonと選択したテーマをインポートします。ソースパッケージへのリンクだけでは、コンパイル済みスタイルを再現できません。プレビューが隠れた生成済みの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も確認できます。外側の2カラムレイアウトでは間隔を24pxとし、720px未満では1カラムに切り替えます。これらは元の構成で決めた内容です。テーマが情報設計を決めたり、すべてのページに同一のグリッドを強制したりするわけではありません。 ## Skeletonデザインシステムの読書状態と表示のリセット ### 保存状態をローカルに保ち、元に戻せるようにする 読書操作ではaria-pressedを切り替え、ラベルを変更し、読みやすいステータスメッセージを更新します。このページ内のメモリに真偽値を保存するだけで、アカウントや永続化、ネットワークリクエストはありません。テーマを変更しても同じ状態が表示されるため、配色を変えながら有効状態を比較できます。 ### 読書状態を消さずに表示をリセットする 表示のリセットではCerberusとライト表示に戻しますが、保存済みの真偽値は意図的に維持します。ラベルもこの動作範囲を示しています。読書カードをローカルのデスクから削除する操作は別に用意できます。この2つの操作を混同すると、見た目をリセットしただけなのに、ユーザーの現在の選択まで予期せず破棄してしまいます。 ## Skeletonデザインシステムのネイティブな開示要素と実際のコンテンツ ### ブラウザーのdetails要素を使う 補足説明には、開示ユーティリティを適用したdetails/summary構造を使用しています。開閉操作はブラウザーがキーボードとポインターの両方に対応し、表示はSkeletonが担います。これはSkeletonのSvelte Accordionコンポーネントではなく、コンポーネントAPIやイベントを捏造していません。段落には、何が変わり、何が維持されるのかを具体的に説明しています。 ### 遷移後の開いた状態を確認する スタイルシートでは、開示部分のサイズをアニメーションできます。開いた状態を撮影する前に遷移が終わるまで待機します。すぐにスクリーンショットを撮ると、コンテンツが展開途中の状態になることがあります。レイアウトの検証では、開いた段落と長い計算済みフォントスタックも確認し、内容の大部分を隠した状態でしかサイドパネルが正しく表示されない、といったことがないようにします。 ## Skeletonデザインシステムのレスポンシブなテーマ検証 ### 狭い画面でも値を読みやすく保つ 720px未満ではワークベンチを縦に並べ、外側のパディングを16pxに縮小します。計算済みのトークン名と値は1行ずつ配置します。これにより、長いフォントスタックやOKLCH文字列も折り返され、横スクロールが発生しません。5つのカラーサンプルはコンパクトなグリッド内に表示し、テーマのコントロールは複数行に折り返します。 ### テーマと状態の組み合わせをテストする ブラウザーテストでは、読書カードを保存し、MintとRoseを順に切り替え、ダーク表示を有効にして、開示部分を開いた後、表示をリセットします。この一連の操作を通して、保存状態が維持される必要があります。280px幅まで確認済みのため、初期テーマのスクリーンショットだけでなく、実際の長い値や展開されたコンテンツも検証しています。 ## Skeletonデザインシステムの完全なViteソース ### 4つのソースファイルをすべて保存する この例には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.

``` コードリファレンス - 4つのソースファイルをすべて同じプロジェクトディレクトリに配置します。 ### 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} ``` コードリファレンス - 4つのソースファイルをすべて同じプロジェクトディレクトリに配置します。 ### 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(); ``` コードリファレンス - 4つのソースファイルをすべて同じプロジェクトディレクトリに配置します。 ### vite.config.mjs 実際のTailwindコンパイラーとの連携。 ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` コードリファレンス - 4つのソースファイルをすべて同じプロジェクトディレクトリに配置します。 ## Skeletonデザインシステムのエージェント向けセットアップ ### 実装の出発点 まず、提供された4つのファイルを保存します。これは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)