svar-react

Name: svar-react
Author: svar-widgets

github.com/svar-widgetsDevelopment2119 installsUpdated 25w ago

About svar-react

svar-react is a documentation-routing skill for the `@svar-ui/react-*` React component packages. It directs developers to standalone package guides and includes shared guidance on themes and localization.

Key features

01Route to documentation by package
02Cover components such as grids, Gantt, and editors
03Provide theme and CSS styling guidance
04Explain locale packs and customization

Use cases

01Find imports and types for a package
02Configure theme styling for widget hierarchies
03Extend interface languages and formats

Install

Copy the command and run it in a terminal.

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

After installing, type/svar-reactin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

SVAR React ships as a family of @svar-ui/react-* packages. This file routes to the per-package entry; each child file is standalone and contains the imports, public types, styling hooks, and recipes for its components.

Open the matching file for the package you are using. If the component you need is not listed in the routing table below, default to core/index.md

Component Routing

File	Package	Components
`core/index.md`	`@svar-ui/react-core`	buttons, inputs, selectors, calendars, dropdowns, popups, modals, themes, locale (40+ widgets)
`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`

Common Techniques

These apply to every @svar-ui/react-* package:

themes.md - theme wrappers, CSS variables, the css prop convention, class hooks
locales.md - locale context, bundled language packs, extending words and formats

The widget hierarchy need to be wrapped in a theme component to ensure proper styling Some widgets (grid,gantt,filemanager, etc) exports their own theme components that delegate to core theme and add their own variables

Comments

Markdown supported

Details

Author: svar-widgets
Repository: svar-widgets/skills
Category: Development
Installs: 119
GitHub stars: 2

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: 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

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

858.0k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.