85 lines
2.7 KiB
Markdown
85 lines
2.7 KiB
Markdown
---
|
|
name: vuer-uikit
|
|
description: Expert knowledge of Vuer UIKit, a React component library for building interactive 3D and UI applications with 38 components and a powerful Dial system
|
|
---
|
|
|
|
# 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:
|
|
1. Reference the specific component documentation in `docs/components/`
|
|
2. For Dial-related questions, check the comprehensive Dial system docs in `docs/dial/`
|
|
3. For styling and theming, refer to `docs/style-guide/`
|
|
4. For layout patterns, see `docs/menu-tool-layouts/`
|
|
|
|
## Official Resources
|
|
|
|
- Documentation Site: https://uikit.vuer.ai/
|
|
- GitHub Repository: https://github.com/vuer-ai/vuer-uikit
|
|
|
|
## 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
|