uniappx-uview-pro
$
npx mdskill add partme-ai/full-stack-skills/uniappx-uview-proIntegrates uView Pro components into UniAppX projects with TypeScript and easycom configuration for cross-platform development.
- Helps add uView Pro library to UniAppX projects and configure TypeScript .uts integration.
- Depends on UniAppX framework, uView Pro component library, and TypeScript with Composition API.
- Decides based on user needs for platform-specific handling in H5, mini-program, App, or nvue.
- Presents results through configured pages.json, manifest.json, and automatic component imports via easycom.
SKILL.md
.github/skills/uniappx-uview-proView on GitHub ↗
--- name: uniappx-uview-pro description: "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." license: Complete terms in LICENSE.txt --- ## 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 组件
More from partme-ai/full-stack-skills
- adobe-xd"Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD. Use when the user asks about Adobe XD artboards, prototype links, repeat grids, component states, design tokens export, or developer handoff."
- angular"Provides comprehensive guidance for Angular framework including components, modules, services, dependency injection, routing, forms, and TypeScript integration. Use when the user asks about Angular, needs to create Angular applications, implement Angular components, or work with Angular features."
- ansible"Provides comprehensive guidance for Ansible automation including playbooks, roles, inventory, and module usage. Use when the user asks about Ansible, needs to automate IT tasks, create Ansible playbooks, or manage infrastructure with Ansible."
- ant-design-mini"Builds mini-program UIs with Ant Design Mini components for Alipay and WeChat mini-programs. Covers Button, Form, List, Modal, Tabs, NavBar, and 60+ components with theme customization and CSS variable theming. Use when the user needs to create mini-program interfaces with Ant Design Mini, configure themes, or implement mini-program-specific UI patterns."
- ant-design-mobile"Builds React mobile UIs with Ant Design Mobile (antd-mobile) components including Button, Form, List, Modal, Picker, Tabs, PullToRefresh, InfiniteScroll, and 50+ mobile-optimized components. Use when the user needs to create mobile-first React interfaces, implement mobile navigation, forms, or data display with Ant Design Mobile."
- ant-design-react"Builds enterprise React UIs with Ant Design (antd) including 60+ components (Button, Form, Table, Select, Modal, Message), design tokens, TypeScript support, and ConfigProvider theming. Use when the user needs to create React applications with Ant Design, build forms with validation, display data tables, or customize the Ant Design theme."
- ant-design-vueProvides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
- api-doc-generator"Generate API documentation by scanning Controller classes, extracting endpoint URLs, HTTP methods, parameters, and response structures, then producing standardized docs from templates. Use when the user explicitly mentions generating API documentation, creating API docs, scanning interfaces, or documenting REST APIs. Do not trigger for generic documentation requests without explicit API mention."
- appium"Provides comprehensive guidance for Appium mobile testing including mobile app automation, element location, gestures, and cross-platform testing. Use when the user asks about Appium, needs to test mobile applications, automate mobile apps, or write Appium test scripts."
- ascii-ansi-colorizer"Add an ANSI color layer to existing ASCII/plain-text output (gradient/rainbow/highlights) with alignment-safe rules and a required no-color fallback. Use when the user wants to colorize terminal output, add rainbow effects to CLI text, or style ASCII art with ANSI colors."