Vuer UIKit Documentation Skill
Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications.
What is Vuer UIKit?
Vuer UIKit is a comprehensive React component library designed for building modern user interfaces, particularly for 3D visualization and interactive applications. It provides a rich set of components including forms, layouts, data displays, and a powerful Dial system for creating control panels.
Documentation Coverage
This skill includes complete documentation for:
Getting Started
- Introduction and overview
- Installation and setup guide
Style Guide
- Color system and theming
- Typography and fonts
- Icon library
- Layout principles
Form Inputs
- Standard input components
- Number inputs with specialized controls
- Interactive playground
- Specialized input types
Dial System
The Dial system is a powerful feature for creating control panels:
- Overview and concepts
- Getting started guide
- Step-by-step tutorial
- Comprehensive input type reference
- Type inheritance patterns
- CLI tooling reference
- Testing strategies
- Controlled dial patterns
- API design notes
Menu & Tool Layouts
- Dock layout for panels
- Liquid float layout for dynamic positioning
- Toolbar components
Components (38 total)
Complete documentation for all UI components including:
- Navigation: Navbar, Navigation, Sidebar, Tabs
- Data Display: Avatar, Badge, Card, Table, Waterfall
- Overlays: Modal, Drawer, Popover, Sheet, Toast, Tooltip
- Inputs: Button, Checkbox, Radio Group, Select, Slider, Switch, Textarea, Toggle components
- Feedback: Progress, Spinner, Version Badge
- Advanced: Tree View, Collapsible, Cursor Display, Drag Selectable, Sync Scroll, Preview
Hooks
Custom React hooks for common patterns
Usage
When helping with Vuer UIKit:
- Reference the specific component documentation in
docs/components/
- For Dial-related questions, check the comprehensive Dial system docs in
docs/dial/
- For styling and theming, refer to
docs/style-guide/
- For layout patterns, see
docs/menu-tool-layouts/
Official Resources
Skills
This skill helps you:
- Build UIs with Vuer UIKit components
- Create control panels using the Dial system
- Apply consistent styling and theming
- Implement complex layouts and interactions
- Use specialized form inputs and controls
- Test Dial-annotated components
1---2name: vuer-uikit3description: Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications with 38 components and a powerful Dial system4---5
6# Vuer UIKit Documentation Skill
7
8Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications.
9
10## What is Vuer UIKit?
11
12Vuer UIKit is a comprehensive React component library designed for building modern user interfaces, particularly for 3D visualization and interactive applications. It provides a rich set of components including forms, layouts, data displays, and a powerful Dial system for creating control panels.
13
14## Documentation Coverage
15
16This skill includes complete documentation for:
17
18### Getting Started
19- Introduction and overview
20- Installation and setup guide
21
22### Style Guide
23- Color system and theming
24- Typography and fonts
25- Icon library
26- Layout principles
27
28### Form Inputs
29- Standard input components
30- Number inputs with specialized controls
31- Interactive playground
32- Specialized input types
33
34### Dial System
35The Dial system is a powerful feature for creating control panels:
36- Overview and concepts
37- Getting started guide
38- Step-by-step tutorial
39- Comprehensive input type reference
40- Type inheritance patterns
41- CLI tooling reference
42- Testing strategies
43- Controlled dial patterns
44- API design notes
45
46### Menu & Tool Layouts
47- Dock layout for panels
48- Liquid float layout for dynamic positioning
49- Toolbar components
50
51### Components (38 total)
52Complete documentation for all UI components including:
53- Navigation: Navbar, Navigation, Sidebar, Tabs
54- Data Display: Avatar, Badge, Card, Table, Waterfall
55- Overlays: Modal, Drawer, Popover, Sheet, Toast, Tooltip
56- Inputs: Button, Checkbox, Radio Group, Select, Slider, Switch, Textarea, Toggle components
57- Feedback: Progress, Spinner, Version Badge
58- Advanced: Tree View, Collapsible, Cursor Display, Drag Selectable, Sync Scroll, Preview
59
60### Hooks
61Custom React hooks for common patterns
62
63## Usage
64
65When helping with Vuer UIKit:
661. Reference the specific component documentation in `docs/components/`
672. For Dial-related questions, check the comprehensive Dial system docs in `docs/dial/`
683. For styling and theming, refer to `docs/style-guide/`
694. For layout patterns, see `docs/menu-tool-layouts/`
70
71## Official Resources
72
73- Documentation Site: https://uikit.vuer.ai/
74- GitHub Repository: https://github.com/vuer-ai/vuer-uikit
75
76## Skills
77
78This skill helps you:
79- Build UIs with Vuer UIKit components
80- Create control panels using the Dial system
81- Apply consistent styling and theming
82- Implement complex layouts and interactions
83- Use specialized form inputs and controls
84- Test Dial-annotated components
majiayu000