playbooks

home / skills / partme-ai / full-stack-skills / uniappx-project

uniappx-project skill

/skills/uniappx-project

This skill guides you through uni-app-x components and APIs with official docs and cross-platform guidance for Vue 3 projects.

npx playbooks add skill partme-ai/full-stack-skills --skill uniappx-project

Review the files below or copy the command above to add this skill to your agents.

Files (127)
SKILL.md
2.5 KB
---
name: uniappx-project
description: Provides comprehensive uni-app-x component and API integration guidance. Use when the user needs official uni-app-x components or APIs, wants per-component or per-API examples, or needs cross-platform compatibility details for uni-app-x.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- Use any uni-app-x built-in component
- Use any uni-app-x API (network, storage, device, UI, navigation, media, etc.)
- Access per-component or per-API examples with official doc links
- Check platform compatibility for components and APIs in uni-app-x
- Build uni-app-x applications with Vue 3 + TypeScript + Vite

## How to use this skill

This skill is organized to match the official uni-app-x components and API documentation:

1. **Choose component or API category**:
   - Components → `examples/components/built-in/`
   - APIs → `examples/api/` (categorized by domain)

2. **Open the matching example file**:
   - Each component or API has its own example file
   - Each example includes the official documentation URL
   - Examples mirror the official documentation examples

3. **Use references when you need full specs**:
   - `references/components/built-in/` for built-in components
   - `references/api/` for API parameter/return/compatibility details

## Examples and References

### Components (Built-in)
- Examples: `examples/components/built-in/*.md`
- References: `references/components/built-in/*.md`
- Official docs: https://doc.dcloud.net.cn/uni-app-x/component/

### APIs
- Examples: `examples/api/{category}/*.md`
- References: `references/api/*.md`
- Official docs: https://doc.dcloud.net.cn/uni-app-x/api/

## Best Practices

1. **One file per component/API**: Each component and API has an independent example file with official doc link.
2. **Follow platform compatibility**: Check the compatibility section in each example/reference.
3. **Use conditional compilation**: Use `#ifdef`/`#endif` for platform-specific logic.
4. **Keep examples aligned**: Use the official documentation examples as the source of truth.
5. **Prefer references for specs**: Use `references/` for full parameter tables and compatibility.

## Resources

- **Components**: https://doc.dcloud.net.cn/uni-app-x/component/
- **APIs**: https://doc.dcloud.net.cn/uni-app-x/api/
- **uni-app-x**: https://doc.dcloud.net.cn/uni-app-x/

## Keywords

uniappx, uni-app-x, components, api, built-in components, examples, references, Vue 3, TypeScript, Vite, H5, App, mini program, 跨平台, 组件, API, 官方文档

Overview

This skill provides comprehensive guidance for integrating uni-app-x built-in components and APIs into Vue 3 + TypeScript + Vite projects. It delivers per-component and per-API examples, official documentation links, and platform compatibility details to accelerate cross-platform app development. Use it to find concise, example-driven implementation patterns and reference-level specifications.

How this skill works

The skill maps directly to the official uni-app-x documentation by organizing examples and references into component and API categories. Each component or API has a dedicated example file that mirrors official samples and includes the official doc URL. For detailed parameter lists, return types, and compatibility tables, use the corresponding reference files.

When to use it

  • You need an example for any uni-app-x built-in component (layout, form, media, etc.).
  • You want to use a uni-app-x API (network, storage, device, UI, navigation, media).
  • You need cross-platform compatibility info for a component or API.
  • You want ready-to-use examples tailored for Vue 3 + TypeScript + Vite.
  • You need official documentation links for validation or deeper reading.

Best practices

  • Keep one example file per component or API to simplify lookup and testing.
  • Always check the compatibility section before using platform-specific features.
  • Use conditional compilation (#ifdef / #endif) for platform-targeted logic.
  • Align example code with official samples to reduce maintenance overhead.
  • Rely on reference files for complete parameter, return, and compatibility details.

Example use cases

  • Implement a cross-platform camera flow using uni-app-x media APIs with platform guards.
  • Integrate native navigation and storage APIs with TypeScript types and examples.
  • Replace a web-only UI component with a uni-app-x built-in component and check compatibility.
  • Fetch data using uni-app-x network API examples and adapt responses to Vue 3 composition API.
  • Prototype a mini program feature with matching example files that include official doc links.

FAQ

Are examples production-ready?

Examples mirror official documentation and are intended as practical starting points. Review and adapt them for production concerns like error handling, security, and performance.

Where do I find platform compatibility details?

Each example links to a reference file that contains full compatibility tables and the official documentation URL for authoritative details.