svar-react

Name: svar-react
Author: svar-widgets

github.com/svar-widgets開発2119 回インストール25 週間前に更新

リポジトリ

svar-react について

svar-reactは、`@svar-ui/react-*` Reactコンポーネントパッケージ向けのドキュメント案内スキルです。パッケージ別のガイドへ案内し、テーマやローカライズの共通情報も提供します。

主な機能

01パッケージ別のドキュメント案内
02グリッド、ガント、エディターなどを掲載
03テーマとCSSスタイルの指針
04ロケールパックとカスタマイズの説明

活用シーン

01パッケージのインポートと型の確認
02ウィジェット階層のテーマ設定
03画面の言語や書式の拡張

インストール

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

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

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

同梱ファイル

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 React は、@svar-ui/react-* パッケージ群として提供されています。このファイルからパッケージごとのエントリに移動できます。各子ファイルはそれぞれ独立しており、コンポーネントのインポート、公開型、スタイル設定用フック、レシピが含まれています。

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

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

ファイル	パッケージ	コンポーネント
`core/index.md`	`@svar-ui/react-core`	ボタン、入力、セレクター、カレンダー、ドロップダウン、ポップアップ、モーダル、テーマ、ロケール（40 種類以上のウィジェット）
`menu/index.md`	`@svar-ui/react-menu`	`Menu`、`MenuBar`、`DropDownMenu`、`ContextMenu`、`ActionMenu`
`toolbar/index.md`	`@svar-ui/react-toolbar`	`Toolbar`
`layout/index.md`	`@svar-ui/react-layout`	`Layout`、`Cell`、`Panel`
`grid/index.md`	`@svar-ui/react-grid`	`Grid`、`HeaderMenu`、`Tooltip`、`ContextMenu`、`Toolbar`
`editor/index.md`	`@svar-ui/react-editor`	`Editor`
`filter/index.md`	`@svar-ui/react-filter`	`FilterBuilder`、`FilterEditor`、`FilterBar`、`FilterQuery`
`gantt/index.md`	`@svar-ui/react-gantt`	`Gantt`、`Toolbar`、`ContextMenu`、`Editor`、`Tooltip`、`HeaderMenu`
`tasklist/index.md`	`@svar-ui/react-tasklist`	`Tasklist`
`comments/index.md`	`@svar-ui/react-comments`	`Comments`
`filemanager/index.md`	`@svar-ui/react-filemanager`	`Filemanager`

共通の手法

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

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

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

Markdown 対応

ログインしてコメント

基本情報

作者: svar-widgets
リポジトリ: svar-widgets/skills
カテゴリ: 開発
インストール数: 119
GitHub スター: 2

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

858.0k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。