uview-pro-vue3
Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
Best use case
uview-pro-vue3 is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "uview-pro-vue3" skill to help with this workflow task. Context: Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/uview-pro-vue3/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How uview-pro-vue3 Compares
| Feature / Agent | uview-pro-vue3 | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Builds Vue 3 mobile UIs in uni-app using the uView Pro component library (100+ components). Covers Button, Form, List, Modal, Tabs, NavBar, plus built-in HTTP, storage, router, and validator utilities. Use when the user needs to create uni-app interfaces with uView Pro, configure themes, or use uView Pro utility tools.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## When to use this skill
Use this skill whenever the user wants to:
- Build Vue 3 / uni-app mobile interfaces with uView Pro components
- Use form, data display, feedback, or navigation components
- Configure uView Pro theme, internationalization, or global settings
- Use built-in tools (HTTP requests, storage, routing, validation, formatting)
- Set up uView Pro in a new uni-app project
## How to use this skill
### Workflow
1. **Install** - `npm install uview-pro` and register in main.js
2. **Choose component** - Match the UI need to component from reference below
3. **Load example file** - Each component has a detailed example in `examples/components/`
4. **Use tools** - Leverage built-in utilities from `examples/tools/`
### Quick-Start: Installation and Basic Usage
```javascript
// main.js
import { createSSRApp } from 'vue'
import uView from 'uview-pro'
import App from './App.vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return { app }
}
```
### Example: Form with Validation
```vue
<template>
<u-form :model="form" :rules="rules" ref="formRef">
<u-form-item label="Username" prop="name">
<u-input v-model="form.name" placeholder="Enter username" />
</u-form-item>
<u-form-item label="Email" prop="email">
<u-input v-model="form.email" placeholder="Enter email" />
</u-form-item>
<u-button type="primary" @click="submit">Submit</u-button>
</u-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
const formRef = ref(null)
const form = reactive({ name: '', email: '' })
const rules = {
name: [{ required: true, message: 'Name is required' }],
email: [{ required: true, message: 'Email is required' }, { type: 'email', message: 'Invalid email' }]
}
const submit = () => {
formRef.value.validate(valid => {
if (valid) uni.showToast({ title: 'Success!' })
})
}
</script>
```
### Component Categories
| Category | Components | Example Files |
|----------|-----------|---------------|
| Form | Button, Input, Form, Select, Switch, Checkbox, Radio, Upload | `examples/components/form.md` |
| Display | List, Card, Avatar, Badge, Tag, Empty | `examples/components/list.md` |
| Feedback | Toast, Modal, Loading, Popup, Drawer | `examples/components/modal.md` |
| Navigation | Tabs, NavBar, Pagination, Dropdown | `examples/components/tabs.md` |
### Tools Reference
| Tool | File | Purpose |
|------|------|---------|
| HTTP | `examples/tools/http.md` | Request wrapper with interceptors |
| Storage | `examples/tools/storage.md` | Local storage utilities |
| Router | `examples/tools/router.md` | Navigation helpers |
| Validator | `examples/tools/validator.md` | Form validation |
### API Reference
- `api/component-api.md` - Component props, events, methods, and slots
- `api/tools-api.md` - Utility function signatures and parameters
- `api/config-api.md` - Global and theme configuration
## Best Practices
1. **On-demand import** - Import only used components to reduce bundle size
2. **Composition API** - Prefer `<script setup>` for cleaner Vue 3 code
3. **Theme variables** - Customize via uView theme config rather than overriding CSS
4. **Use built-in tools** - Leverage HTTP, storage, and router utilities instead of adding extra dependencies
5. **Test on device** - Verify uni-app behavior on actual mobile devices, not just H5
## Resources
- **Official Docs**: https://uviewpro.cn/
## Keywords
uView Pro, uview-pro, Vue 3, uni-app, component library, 组件库, Button, Form, List, Modal, Tabs, NavBar, mobile UI, 表单, 列表Related Skills
vant-vue3
Provides structured guidance for Vant of Vue 3.0. Use when the user needs Vant with Vue 3, asks about mobile UI components such as Button, Cell, Form, Dialog, Toast, Popup, ConfigProvider, theme customization, project setup, or wants to implement mobile-first interfaces with vant or van- components.
layui-vue3
Provides comprehensive guidance for Layui Vue component library including components, layer dialogs, and utilities. Use when the user asks about Layui Vue, needs to use Layui components in Vue 3, or implement UI components.
element-plus-vue3
Provides comprehensive guidance for Element Plus Vue 3 component library including installation, components, themes, internationalization, and API reference. Use when the user asks about Element Plus for Vue 3, needs to build Vue 3 applications with Element Plus, or customize component styles.
bootstrap-vue3
Provides comprehensive guidance for Bootstrap Vue 3 component library including Bootstrap components, grid system, utilities, and Vue 3 integration. Use when the user asks about Bootstrap Vue 3, needs to use Bootstrap components in Vue 3, or implement responsive layouts.
vue3
Guidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.
uniappx-uview-pro
Integrates uView Pro component library into UniAppX (uni-app-x) projects with TypeScript and Composition API, including easycom configuration, pages.json and manifest.json setup, and platform-specific handling. Use when the user needs to add uView Pro components to a UniAppX project, configure TypeScript .uts integration, or handle cross-platform styling.
uniapp-uview
Integrates uView UI component library into UniApp projects including easycom configuration, pages.json and manifest.json setup, SCSS theming, and platform-specific handling (H5, mini-program, App, nvue). Use when the user needs to add uView UI components to a UniApp project, configure easycom auto-import, or handle cross-platform styling.
stitch-uviewpro-components
Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
stitch-uview-components
Convert Stitch designs into uni-app + Vue 2 + uView 2.0 pages and components. Use when the user mentions uView, uView 2, or uni-app Vue 2 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces uni-app page structure with uView 2 u-* components (u-navbar, u-form, u-button, u-cell-group).
stitch-ui-design-spec-uviewpro
uView Pro (uni-app/Vue 3) design spec for Stitch screen generation. Use when the user mentions uview-pro, uviewpro, or uview 3.0 in a Stitch design request. Outputs a hard-constraints prefix with uView Pro tokens (Primary #3c9cff, rpx units, u-button/u-form/u-navbar components, script setup) or a CONTRACT_SELECTION_JSON_V1 selector.
stitch-ui-design-spec-uview
uView 2.0 (uni-app/Vue 2) design spec for Stitch screen generation. Use when the user mentions uview, uview2, or u-view in a Stitch design request. Do NOT use for uView Pro requests. Outputs a hard-constraints prefix with uView 2 tokens (Primary #3c9cff, u-row/u-col/u-button components) or a CONTRACT_SELECTION_JSON_V1 selector.
pencil-ui-design-system-uviewpro
Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.