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.
Best use case
uniappx-uview-pro 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. 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.
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.
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 "uniappx-uview-pro" skill to help with this workflow task. Context: 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.
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/uniappx-uview-pro/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How uniappx-uview-pro Compares
| Feature / Agent | uniappx-uview-pro | 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?
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.
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: - Integrate uView Pro into UniAppX projects - Configure UniAppX projects to work with uView Pro (pages.json, manifest.json, easycom) - Handle platform-specific behaviors when using uView Pro in UniAppX (H5, mini-program, App, nvue) - Use UniAppX features (navigation, APIs, lifecycle) with uView Pro components - Build cross-platform UniAppX applications with uView Pro components - Configure easycom for automatic uView Pro component import in UniAppX - Handle navigation and routing with uView Pro in UniAppX - Optimize UniAppX projects using uView Pro - Deploy uView Pro-based UniAppX applications to multiple platforms ## How to use this skill This skill is organized to match UniAppX integration patterns and the official UniAppX plugin structure (https://ext.dcloud.net.cn/plugin?id=24633). When working with uView Pro in UniAppX: 1. **Install and setup** uView Pro in UniAppX project: - Load `examples/getting-started/installation.md` for installation in UniAppX - Load `examples/getting-started/project-setup.md` for UniAppX project configuration - Load `examples/getting-started/easycom-config.md` for easycom configuration 2. **Integrate with UniAppX features**: - Load `examples/integration/pages-config.md` for pages.json configuration - Load `examples/integration/manifest-config.md` for manifest.json configuration - Load `examples/integration/navigation.md` for navigation with uView Pro - Load `examples/integration/uniappx-api.md` for using UniAppX APIs with uView Pro 3. **Handle platform-specific behaviors**: - Load `examples/platform-specific/h5.md` for H5 platform considerations - Load `examples/platform-specific/miniprogram.md` for mini-program considerations - Load `examples/platform-specific/app.md` for App platform considerations - Load `examples/platform-specific/nvue.md` for nvue considerations 4. **Advanced integration**: - Load `examples/advanced/custom-theme.md` for theme customization in UniAppX - Load `examples/advanced/build-optimization.md` for build optimization - Load `examples/advanced/multi-platform.md` for multi-platform deployment 5. **Reference the API documentation** when needed: - `api/integration-api.md` - UniAppX and uView Pro integration API - `api/config-api.md` - Configuration API reference 6. **Use templates** for quick start: - `templates/basic-uniappx-project.md` - Basic UniAppX project with uView Pro - `templates/pages-template.md` - Pages configuration template - `templates/manifest-template.md` - Manifest configuration template **Important Notes**: - This skill focuses on UniAppX integration, not uView Pro API documentation - UniAppX uses TypeScript (.uts files) and Composition API (setup syntax) - Always configure easycom in pages.json for automatic component import - Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code - Test on all target platforms (H5, mini-programs, App) before deployment - Use rpx units for responsive sizing in UniAppX ## Examples and Templates ### Getting Started - **Installation**: `examples/getting-started/installation.md` - How to install uView Pro in UniAppX projects - **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniAppX project with uView Pro - **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import ### Integration - **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uView Pro - **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uView Pro - **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uView Pro - **UniAppX API**: `examples/integration/uniappx-api.md` - Using UniAppX APIs with uView Pro components ### Platform-Specific - **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uView Pro - **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uView Pro - **App**: `examples/platform-specific/app.md` - App platform considerations with uView Pro - **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uView Pro ### Advanced - **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniAppX projects - **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniAppX builds with uView Pro - **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies ### Templates - **Basic Project**: `templates/basic-uniappx-project.md` - Basic UniAppX project structure with uView Pro - **Pages Template**: `templates/pages-template.md` - pages.json configuration template - **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template ## API Reference - **Integration API**: `api/integration-api.md` - UniAppX and uView Pro integration API reference - **Config API**: `api/config-api.md` - Configuration API reference for UniAppX projects ## Best Practices 1. **Use easycom**: Configure easycom in pages.json for automatic uView Pro component import 2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App) before deployment 3. **Use rpx Units**: Use rpx for responsive sizing in UniAppX, px for fixed sizes 4. **SCSS Support**: Ensure SCSS is properly configured in UniAppX project 5. **Manifest Configuration**: Properly configure manifest.json for each platform 6. **Conditional Compilation**: Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code 7. **Performance**: Optimize for each platform's specific requirements 8. **TypeScript**: Use TypeScript (.uts files) and proper type definitions 9. **Composition API**: Use Composition API and setup syntax (recommended for UniAppX) 10. **Lifecycle Management**: Properly handle UniAppX page lifecycle with uView Pro components ## Resources - **Official UniAppX Plugin**: https://ext.dcloud.net.cn/plugin?id=24633 - **UniAppX Documentation**: https://uniapp.dcloud.net.cn/uni-app-x/ - **UniAppX API Reference**: https://uniapp.dcloud.net.cn/uni-app-x/api/ ## Keywords uniappx, uniapp-x, uview-pro, uview pro, uniappx integration, uniappx configuration, easycom, pages.json, manifest.json, uni-app-x, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, TypeScript, Composition API, setup 语法, .uts 文件, UniAppX 组件, 跨平台组件, 小程序组件, App 组件
Related Skills
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.
uniappx-project
Provides per-component and per-API examples with platform compatibility details for uni-app-x (Vue 3 + TypeScript + Vite). Use when the user needs official uni-app-x built-in components, API references with examples, cross-platform compatibility checks, or conditional compilation guidance for uni-app-x projects.
uniappx-project-creator
Creates new uni-app-x projects with Vue 3 + TypeScript + Vite via CLI or HBuilderX, including tsconfig.json setup, manifest.json and pages.json configuration, and Composition API project templates. Use when the user wants to scaffold a new uni-app-x project, initialize TypeScript project files, or set up the uni-app-x development environment.
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.
pencil-ui-design-system-uview
Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.
uview-vue2
Builds Vue 2 mobile UIs in uni-app using the uView UI component library with Button, Input, Form, Table, Modal, Tabs, and built-in $u tools (toast, http, storage, route). Use when the user needs to create uni-app interfaces with uView UI for Vue 2, customize themes via SCSS variables, or use $u utility methods.
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.