mcpField
S
svar-svelte

svar-svelte

github.com/svar-widgetsデザイン・UI269 回インストール25 週間前に更新
リポジトリ

svar-svelte について

SVAR Svelteは、SvelteのUI構築向けコンポーネントパッケージ群です。スキルから各パッケージのドキュメントを参照でき、テーマ設定とローカライズの方法も確認できます。

主な機能

  1. 01グリッド、ガントチャート、メニューなどのパッケージ
  2. 02パッケージ別ドキュメントへの案内
  3. 03テーマとCSS変数の設定ガイド
  4. 04ロケール設定の説明

活用シーン

  1. 01Svelte画面に使うパッケージの選定
  2. 02コンポーネントのインポートと公開型の確認
  3. 03コンポーネント階層へのテーマ設定
  4. 04ロケールの文言や形式の拡張

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/svar-widgets/skills --skill svar-svelte

インストール後、Claude Code で/svar-svelteを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

comments/
index.md
core/
avatar.md
button.md
calendar.md
checkbox.md
colorboard.md
colorpicker.md
colorselect.md
combo.md
counter.md
datepicker.md
daterangepicker.md
dropdown.md
field.md
fullscreen.md
globals.md
icon.md
index.md
locale.md
modal.md
modalarea.md
month.md
multicombo.md
pager.md
popup.md
portal.md
radio.md
rangecalendar.md
richselect.md
segmented.md

詳細

SVAR Svelte は、@svar-ui/svelte-* パッケージのファミリーとして提供されています。このファイルはパッケージごとのエントリに振り分けます。各子ファイルは単独で使用でき、コンポーネントのインポート、公開型、スタイリング用フック、レシピが含まれています。

使用するパッケージに該当するファイルを開いてください。必要なコンポーネントが以下のルーティング表に記載されていない場合は、core/index.md を参照してください。

コンポーネントのルーティング

ファイルパッケージコンポーネント
core/index.md@svar-ui/svelte-coreボタン、入力、セレクター、カレンダー、ドロップダウン、ポップアップ、モーダル、テーマ、ロケール（40 以上のウィジェット）
menu/index.md@svar-ui/svelte-menuMenu、MenuBar、DropDownMenu、ContextMenu、ActionMenu
toolbar/index.md@svar-ui/svelte-toolbarToolbar
layout/index.md@svar-ui/svelte-layoutLayout、Cell、Panel
grid/index.md@svar-ui/svelte-gridGrid、HeaderMenu、Tooltip、ContextMenu、Toolbar
editor/index.md@svar-ui/svelte-editorEditor
filter/index.md@svar-ui/svelte-filterFilterBuilder、FilterEditor、FilterBar、FilterQuery
gantt/index.md@svar-ui/svelte-ganttGantt、Toolbar、ContextMenu、Editor、Tooltip、HeaderMenu
tasklist/index.md@svar-ui/svelte-tasklistTasklist
comments/index.md@svar-ui/svelte-commentsComments
filemanager/index.md@svar-ui/svelte-filemanagerFilemanager

共通のテクニック

以下はすべての @svar-ui/svelte-* パッケージに適用されます。

  • themes.md - テーマラッパー、CSS 変数、css プロパティの規約、クラスフック
  • locales.md - ロケールコンテキスト、同梱の言語パック、単語や書式の拡張

適切にスタイリングするには、ウィジェットの階層をテーマコンポーネントでラップする必要があります。 一部のウィジェット（grid、gantt、filemanager など）は独自のテーマコンポーネントをエクスポートします。これらのコンポーネントは core のテーマに委譲し、独自の変数を追加します。

コメント

Markdown 対応