enze00/uniapp-frontend-skills

Overview

This skill provides a practical toolkit for building uni-app cross-platform frontends using Vue 3 and TypeScript. It bundles project templates, component patterns, UI library integration guides, theming strategies, and Vite/SCSS configuration to accelerate development across H5 and Mini Program platforms. The focus is on reusable patterns, predictable builds, and maintainable theme systems.

How this skill works

It inspects and supplies ready-to-use templates for pages, components, and store modules, plus configuration snippets for Vite, global SCSS, and UI libraries like uView Plus, uni-ui, and TuniaoUI. It includes example API wrappers, request interceptors, Pinia store patterns, navigation and lifecycle snippets, and multi-theme design approaches for both build-time and dynamic switching. Use the included commands and file layouts to scaffold projects and ensure consistent cross-platform behavior.

When to use it

• Starting a new uni-app project with Vue 3 + TypeScript
• Adding or switching a UI library (uView Plus, uni-ui, TuniaoUI)
• Implementing global theming or multi-brand theme switching
• Targeting WeChat Mini Program, H5, or other uni-app platforms
• Configuring Vite and global SCSS for shared variables and styles

Best practices

• Use TypeScript across components and stores to catch errors early
• Centralize theme variables in theme.scss and inject via Vite additionalData
• Keep components small and reuse templates from the component-templates folder
• Manage complex state with Pinia and expose simple actions/getters
• Handle API errors and show loading states to improve UX

Example use cases

• Scaffold a new page, register it in pages.json, and wire navigation
• Integrate uView Plus styles and plugin via App.vue and main.ts
• Create dynamic theme switching using a Pinia theme store and CSS variables
• Build and run platform-specific targets: WeChat Mini Program and H5
• Set up a shared request wrapper with token interceptors for unified API calls