Agent skill

Uni-app Components and APIs

by feige996 in feige996/unibest

Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.

MITAuto-check passedMobile

Install Uni-app Components and APIs

skills CLI
$ npx skills add feige996/unibest --skill uniapp-project -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install feige996/unibest uniapp-project --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/feige996/unibest.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/uniapp-project .claude/skills/uniapp-project && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
uniapp-project
GitHub stars
2.3k
Token cost
~1.6k tokens
SKILL.md length
472 words
Files
234 (incl. scripts, references)
Skills in repo
14
Repo updated
First seen
Licence
MIT

At a glance

Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.

  • Works in 5 steps: 环境准备 → 配置初始化 → 核心功能使用 → …
  • Using a built-in uni-app component or a uni-ui component correctly
  • SKILL.md covers When to use this skill, How to use this skill, Examples and References and Best Practices, plus 9 more sections
  • Calling a uni-app API such as storage, network, device or navigation

What it does

The skill is organized to mirror the official uni-app documentation. Examples live in folders for built-in components, uni-ui components and APIs grouped by domain, such as device, file, location and media, and each component or API has its own example file with the official documentation link. Matching reference folders hold full parameter, return value and platform compatibility details.

The agent picks the component or API category, opens the matching example, and turns to the references when it needs exact specs. Guidance includes checking the compatibility section for each item, using `#ifdef` and `#endif` conditional compilation for platform-specific logic, and treating the official examples as the source of truth. A checklist file and an update plan sit alongside a large set of example and reference files.

When your agent uses it

  • Using a built-in uni-app component or a uni-ui component correctly
  • Calling a uni-app API such as storage, network, device or navigation
  • Checking which platforms a component or API supports
  • Writing platform-specific code with conditional compilation

Example prompts

  • “Show me how to use the uni-app battery info API and which platforms support it.”
  • “Build a list page with uni-ui components and note any platform limits.”
  • “Wrap the location picker in conditional compilation so the code only runs on one platform.”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 环境准备
  2. 配置初始化
  3. 核心功能使用
  4. 测试验证
  5. 部署上线

What it can do on your machine

Read from SKILL.md and the folder at commit dc3af8d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • uniapp.dcloud.net.cn
    • ext.dcloud.net.cn
    • ask.dcloud.net.cn

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Uni-app Components and APIs loads about 1.6k tokens when it runs, and up to ~127k if it reads all its reference files. Until then it costs about 59 tokens; SKILL.md has 472 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~59
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~127k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from feige996/unibest at commit dc3af8d, republished under its MIT licence (© feige996). 472 words, ~1,591 tokens.

Download SKILL.mdSave it as .claude/skills/uniapp-project/SKILL.md (or your agent's skills folder). This skill also uses 233 other files; get the full folder from GitHub.
name
uniapp-project
description
Provides comprehensive uni-app component and API integration guidance. Use when the user needs official uni-app components or APIs, wants per-component or per-API examples, or needs cross-platform compatibility details.
license
Complete terms in LICENSE.txt

When to use this skill

Use this skill whenever the user wants to:

  • Use any uni-app built-in component or uni-ui component
  • Use any uni-app 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
  • Build cross-platform uni-app applications with official patterns

How to use this skill

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

  1. Choose component or API category:

    • Components → examples/components/built-in/ and examples/uni-ui/
    • 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/components/uni-ui/ for uni-ui components
    • references/api/ for API parameter/return/compatibility details

Examples and References

Components (Built-in)
Components (uni-ui)
APIs

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

Show full SKILL.md (225 more words)Show less

Keywords

uniapp, uni-app, components, api, built-in components, uni-ui, examples, references, pages.json, manifest.json, H5, App, mini program, 跨平台, 组件, API, 官方文档

  • examples/api/network/ - 网络请求 API 示例
  • examples/api/storage/ - 数据存储 API 示例
  • examples/api/device/ - 设备信息 API 示例
  • examples/api/ui/ - 界面交互 API 示例
  • examples/api/location/ - 位置服务 API 示例
  • examples/api/media/ - 媒体处理 API 示例
  • examples/api/navigation/ - 页面路由 API 示例
  • examples/api/file/ - 文件操作 API 示例
  • examples/api/payment/ - 支付 API 示例
  • examples/api/share/ - 分享 API 示例
  • examples/api/other/ - 其他 API 示例
  • examples/uni-ui/ - uni-ui 组件的完整示例代码(每个组件一个独立的 .vue 文件)

使用场景:当需要查看组件或 API 的完整使用示例时,参考此目录下的示例文件。每个示例文件包含官网展示的所有示例场景,可直接复制使用。

注意:

  • references/ 和 examples/ 职责不同,不应合并。references/ 提供文档说明,examples/ 提供可运行代码。
  • 每个组件和 API 都有独立的示例文件,包含原文档地址和官网全部示例
  • 内置组件的示例代码在 examples/components/built-in/ 目录
  • API 的示例代码在 examples/api/ 目录,按分类组织
  • uni-ui 组件的完整示例代码在 examples/uni-ui/ 目录

平台支持

uni-app 支持以下平台:

  • H5:Web 浏览器
  • 微信小程序:WeChat Mini Program
  • 支付宝小程序:Alipay Mini Program
  • 百度小程序:Baidu Smart Program
  • 字节跳动小程序:ByteDance Mini Program
  • QQ 小程序:QQ Mini Program
  • 快手小程序:Kuaishou Mini Program
  • App:iOS、Android(nvue、vue)
  • 快应用:Quick App

每个组件和 API 的详细平台支持情况见对应文档。

参考资源

使用示例

组件使用示例

基础组件使用示例:

vue
<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="handleClick">点击按钮</button>
    <image :src="imageUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp',
      imageUrl: '/static/logo.png'
    }
  },
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击',
        icon: 'success' 
      })
    }
  }
}
</script>

更多组件示例:

  • 内置组件示例:请参考官方文档或 references/components/built-in/ 目录下的组件文档
  • uni-ui 组件完整示例:见 examples/uni-ui/ 目录(每个组件都有独立的 .vue 示例文件)
  • 组件详细文档:见 references/components/built-in/ 和 references/components/uni-ui/ 目录(每个组件都有独立的文档文件,包含属性、事件、平台兼容性、使用示例)
API 使用示例
javascript
// 网络请求
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data)
  },
  fail: (err) => {
    console.error(err)
  }
})

// 数据存储
uni.setStorage({
  key: 'userInfo',
  data: { name: 'John', age: 30 },
  success: () => {
    console.log('存储成功')
  }
})

// 页面跳转
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

更多 API 示例:见 references/api/ 目录中的详细文档

注意事项

  1. 组件层级:原生组件(如 video、map)层级高于普通组件,需要使用 cover-view 覆盖
  2. 条件编译:使用 #ifdef、#endif 处理平台差异
  3. 生命周期:注意 uni-app 的页面生命周期和组件生命周期
  4. 样式单位:推荐使用 rpx 作为响应式单位
  5. 性能优化:合理使用组件,避免过度嵌套,注意长列表优化

能力边界

✅ 适用场景
  • 当你需要使用此技能对应的技术栈时
  • 当项目需要遵循最佳实践时
  • 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
  • 复杂业务逻辑需要结合具体场景调整
  • 性能优化需要根据实际数据量评估
❌ 不适用场景
  • 不相关的技术栈或框架
  • 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

  1. 版本兼容性:注意框架版本与依赖库的兼容性,不同版本 API 可能有差异
  2. 配置文件格式:配置文件格式错误是最常见的问题,建议使用编辑器的语法检查
  3. 环境变量:确保所有必要的环境变量已正确设置,敏感信息不要硬编码
  4. 依赖冲突:多版本共存时注意依赖冲突,使用 lock 文件锁定版本
  5. 性能陷阱:大数据量场景下注意性能优化,避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

© feige996, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 233 other files (scripts, references) in .agents/skills/uniapp-project of feige996/unibest.

  • SKILL.md
  • CHECKLIST.md
  • LICENSE.txt
  • UPDATE_PLAN.md
  • examples/api/device/get-battery-info.md
  • examples/api/device/get-network-type.md
  • examples/api/device/get-screen-brightness.md
  • examples/api/device/get-system-info.md
  • examples/api/device/set-screen-brightness.md
  • examples/api/file/get-file-info.md
  • examples/api/file/get-saved-file-list.md
  • examples/api/file/save-file.md
  • examples/api/location/choose-location.md
  • examples/api/location/get-location.md
  • examples/api/location/open-location.md
  • examples/api/media
  • … and 218 more

Open the folder on GitHubat commit dc3af8d

Compare with similar skills

Uni-app Components and APIs next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Uni-app Components and APIs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Uni-app Components and APIs this skillfeige996/unibest2.3k—~1.6kAutomated safety check: PassMIT
Vue ExpertJeffallan/claude-skills12k—~1.1kAutomated safety check: PassMIT
Vuetify Playgroundvuetifyjs/vuetify41k—~730Automated safety check: PassCustom licence
Vue Expert (JavaScript)Jeffallan/claude-skills12k—~1.6kAutomated safety check: PassMIT
Vue ExpertAratKruglik/claude-laravel155—~1.1kAutomated safety check: PassNone
Cloudbase Sites RuntimeTencentCloudBase/CloudBase-AI-Toolkit1.1k—~5kAutomated safety check: NotesMIT

Similar skills

  • Vue Expert

    Jeffallan/claude-skills

    Builds Vue 3 apps with the Composition API and script setup, Pinia state, Nuxt 3, Vite tuning and Quasar or Capacitor mobile builds, checked with vue-tsc and Vitest.

    12k GitHub stars~1.1k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Vuetify Playground

    vuetifyjs/vuetify

    Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.

    41k GitHub stars~730 tokensUpdated today
    Frontend & DesignAuto-check passed
  • Vue Expert (JavaScript)

    Jeffallan/claude-skills

    Builds Vue 3 apps in plain JavaScript with JSDoc typing instead of TypeScript: script setup components, composables, Pinia and Vitest, with ESLint JSDoc coverage checks.

    12k GitHub stars~1.6k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Vue Expert

    AratKruglik/claude-laravel

    A skill your agent uses when building Vue 3 applications with Composition API, Nuxt 3, or Quasar.

    155 GitHub stars~1.1k tokensUpdated 5 mo ago
    MobileAuto-check passed
  • Cloudbase Sites Runtime

    TencentCloudBase/CloudBase-AI-Toolkit

    A skill your agent uses when the user wants to develop, run, preview, save, deploy, or roll back a CloudBase Web app in this conversation as a Lovable/Codex-Sites-like vibe- coding session — i.e.

    1.1k GitHub stars~5k tokensUpdated today
    MobileAuto-check: notes
  • Ionic Framework

    LeoYeAI/openclaw-master-skills

    Comprehensive Ionic Framework expert skill consolidating core concepts, component reference, CLI usage, theming, layout, page lifecycle, framework-specific patterns for Angular/React/Vue…

    2.2k GitHub stars~5.5k tokensUpdated 2 mo ago
    MobileAuto-check passed

More from feige996/unibest

All 14 skills in this repo
  • Reference for using uni-app-x's built-in components and APIs, with one example file per item, official doc links and platform compatibility notes.

    2.3k GitHub stars~788 tokensUpdated 24 days ago
    Auto-check passed
  • uni-ad Ads for uni-app

    feige996/unibest

    A comprehensive skill for uni-ad monetization in uni-app. Use this skill to integrate ads, configure ad types, handle ad events, and follow official uni-ad…

    2.3k GitHub stars~675 tokensUpdated 24 days ago
    Auto-check passed
  • Covers uniCloud for uni-app projects: project and cloud space setup, cloud database CRUD and permissions, cloud functions, storage and datacom components.

    2.3k GitHub stars~813 tokensUpdated 24 days ago
    Auto-check passed
  • A comprehensive skill for uni-app mini program development. Use when building uni-app mini programs, configuring mini program settings, or working with mini…

    2.3k GitHub stars~516 tokensUpdated 24 days ago
    Auto-check passed
  • A comprehensive skill for uni-app native app offline packaging. Use this skill to package uni-app as native Android/iOS apps, configure native app settings…

    2.3k GitHub stars~651 tokensUpdated 24 days ago
    Auto-check passed
  • A comprehensive skill for developing native plugins for uni-app. Use this skill when building Android/iOS native plugins, integrating native capabilities, or…

    2.3k GitHub stars~659 tokensUpdated 24 days ago
    Auto-check passed

Works with

Questions about Uni-app Components and APIs

What does Uni-app Components and APIs do?

Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation. The skill is organized to mirror the official uni-app documentation. Examples live in folders for built-in components, uni-ui components and APIs grouped by domain, such as device, file, location and media, and each component or API has its own example file with the official documentation link.

When should I use Uni-app Components and APIs?

Uni-app Components and APIs fits situations like: using a built-in uni-app component or a uni-ui component correctly; calling a uni-app API such as storage, network, device or navigation; checking which platforms a component or API supports; writing platform-specific code with conditional compilation.

How do I install Uni-app Components and APIs in Claude Code?

Run `npx skills add feige996/unibest --skill uniapp-project -a claude-code`. Or copy the skill folder (.agents/skills/uniapp-project in feige996/unibest) into .claude/skills/uniapp-project in your project. Claude Code loads it when a task matches its description.

How do I install Uni-app Components and APIs in Codex?

Run `npx skills add feige996/unibest --skill uniapp-project -a codex`. Or copy the skill folder (.agents/skills/uniapp-project in feige996/unibest) into .agents/skills/uniapp-project in your project. Codex loads it when a task matches its description.

Can I use Uni-app Components and APIs in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add feige996/unibest --skill uniapp-project -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/uniapp-project, .gemini/skills/uniapp-project, .github/skills/uniapp-project and .opencode/skills/uniapp-project in your project.

What does Uni-app Components and APIs need to run?

SKILL.md names no scripts, command-line tools or credentials: Uni-app Components and APIs is instructions for the agent only.

Does Uni-app Components and APIs access the network?

SKILL.md names 3 domains. As links in the text: uniapp.dcloud.net.cn, ext.dcloud.net.cn and ask.dcloud.net.cn. This is read from the text; nothing was executed.

Is Uni-app Components and APIs safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Uni-app Components and APIs use?

Uni-app Components and APIs is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Uni-app Components and APIs use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 126k tokens, read only when the agent opens those files.

What are the alternatives to Uni-app Components and APIs?

Skills that share tags, products or a category with Uni-app Components and APIs: Vue Expert (Jeffallan/claude-skills, 12k stars), Vuetify Playground (vuetifyjs/vuetify, 41k stars), Vue Expert (JavaScript) (Jeffallan/claude-skills, 12k stars) and Vue Expert (AratKruglik/claude-laravel, 155 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Uni-app Components and APIs?

feige996 (a GitHub user) maintains it in feige996/unibest, which has 2,275 GitHub stars. The repository holds 14 skills in this directory. The repository was last updated on September 15, 2026.

Source: feige996/unibest on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.