Comprehensive skill reference for uni-app cross-platform development framework

MITAuto-check passedFrontend & Design

Install Uni App

skills CLI
$ npx skills add sonofmagic/uni-app-tailwindcss-template --skill uni-app -a claude-code

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

GitHub CLI
$ gh skill install sonofmagic/uni-app-tailwindcss-template uni-app --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/sonofmagic/uni-app-tailwindcss-template.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/uni-app .claude/skills/uni-app && 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
uni-app
GitHub stars
336
Used in
2 other repos
Token cost
~1k tokens
SKILL.md length
318 words
Files
16 (incl. references)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Comprehensive skill reference for uni-app cross-platform development framework

  • Works in 6 steps: Use uni-app components and APIs instead… → Use condition compilation for… → Test on all target platforms → …
  • Frontend & Design work in your project
  • SKILL.md covers Core, Features, Configuration and Platform Support, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Uni App is an agent skill from sonofmagic/uni-app-tailwindcss-template. Comprehensive skill reference for uni-app cross-platform development framework

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including reference files (for example `GENERATION.md`, `references/config-manifest.md` and `references/config-pages.md`).

It sits in Frontend & Design. It works with Vue.js, Vite, TypeScript and Tailwind CSS. The repository describes itself as: uni-app vue3 tailwindcss 模板,集成了 iconify,eslint,typescript,prettier 等等工具作为解决方案. The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/uni-app”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Use uni-app components and APIs instead of platform-specific ones
  2. Use condition compilation for platform-specific features
  3. Test on all target platforms
  4. Use rpx for responsive layouts
  5. Handle platform differences in manifest.json
  6. must use uni-helper tools

What it can do on your machine

Read from SKILL.md and the folder at commit 110bc88. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are vue and javascript).

    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):

    • github.com

    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 loads about 1k tokens when it runs, and up to ~23k if it reads all its reference files. Until then it costs about 22 tokens; SKILL.md has 318 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from sonofmagic/uni-app-tailwindcss-template at commit 110bc88, republished under its MIT licence (© sonofmagic). 318 words, ~1,044 tokens.

Download SKILL.mdSave it as .claude/skills/uni-app/SKILL.md (or your agent's skills folder). This skill also uses 15 other files; get the full folder from GitHub.
name
uni-app
description
Comprehensive skill reference for uni-app cross-platform development framework
metadata.author
FlippeDround
metadata.version
2026.1.30
metadata.source
Generated from https://gitcode.com/dcloud/unidocs-zh, skills located at https://github.com/antfu/skills

The skill is based on uni-app documentation, generated at 2026-01-30.

uni-app is a Vue.js-based cross-platform framework for developing applications that run on iOS, Android, HarmonyOS, Web (responsive), and various mini-program platforms (WeChat/Alipay/Baidu/Douyin/Feishu/QQ/Kuaishou/DingTalk/Taobao/Jingdong/Xiaohongshu).

Core

TopicDescriptionReference
Core FrameworkProject structure, platform support, condition compilationcore-framework
View Componentsview, scroll-view, swiper, movable-area, cover-viewcore-view-components
Form Componentsinput, textarea, picker, checkbox, radio, switch, slidercore-form-components

Features

UI Components
TopicDescriptionReference
Media Componentsimage, video, camera, live-player, mapfeature-media-components
Navigationnavigator, routing, page navigationfeature-navigation
UI Feedbacktoast, modal, loading, action sheet, pull refreshfeature-ui-feedback
APIs
TopicDescriptionReference
NetworkHTTP requests, file upload/download, WebSocketfeature-network
StorageLocal storage, file system, cachingfeature-storage
System InfoDevice info, network status, screen, vibrationfeature-system-info
File OperationsImage/video selection, file system operationsfeature-file-operations
LocationGeolocation, map component, address selectionfeature-location
LifecycleApp and page lifecycle hooksfeature-lifecycle

Configuration

TopicDescriptionReference
pages.jsonPage routing, tab bar, global styles, sub-packagesconfig-pages
manifest.jsonApp config, permissions, platform settingsconfig-manifest

Platform Support

PlatformSupport Level
iOS AppFull support
Android AppFull support
HarmonyOS NextFull support
H5/WebFull support
WeChat Mini ProgramFull support
Alipay Mini ProgramFull support
Baidu Smart ProgramFull support
Douyin Mini ProgramFull support
QQ Mini ProgramFull support
Kuaishou Mini ProgramFull support
Feishu Mini ProgramFull support
JD Mini ProgramFull support
HarmonyOS Meta ServiceFull support

Key Concepts

Condition Compilation

Use special comments to write platform-specific code:

vue
<!-- #ifdef APP-PLUS -->
<view>App only</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>WeChat only</view>
<!-- #endif -->
API Promise Support

Most uni-app APIs support Promise when no callback is provided:

javascript
const res = await uni.request({ url: 'https://api.example.com' })
Cross-Platform Best Practices
  1. Use uni-app components and APIs instead of platform-specific ones
  2. Use condition compilation for platform-specific features
  3. Test on all target platforms
  4. Use rpx for responsive layouts
  5. Handle platform differences in manifest.json
  6. must use uni-helper tools
MCP扩展

当需要查询 uni-app 官方文档时,优先调用 search-docs-by-Uniapp-official MCP 工具搜索相关 API 文档和使用示例。

使用场景:

  • 用户询问特定 API 的详细用法
  • 需要官方文档中的代码示例
  • 查询组件的属性和事件
  • 了解 API 的平台兼容性

工具安装: 如果检测到该 MCP 工具不可用,引导用户访问 https://github.com/uni-helper/mcp 进行安装。

© sonofmagic, 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 15 other files (references) in .agents/skills/uni-app of sonofmagic/uni-app-tailwindcss-template.

  • SKILL.md
  • GENERATION.md
  • references/config-manifest.md
  • references/config-pages.md
  • references/core-form-components.md
  • references/core-framework.md
  • references/core-view-components.md
  • references/feature-file-operations.md
  • references/feature-lifecycle.md
  • references/feature-location.md
  • references/feature-media-components.md
  • references/feature-navigation.md
  • references/feature-network.md
  • references/feature-storage.md
  • references/feature-system-info.md
  • references/feature-ui-feedback.md

Open the folder on GitHubat commit 110bc88

Used in 2 other repositories

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in sonofmagic/uni-app-tailwindcss-template, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Uni App 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 compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Uni App this skillsonofmagic/uni-app-tailwindcss-template3362 repos~1kAutomated safety check: PassMIT
Cross Platform Tauri UIifer47/markeron1.2k—~2kAutomated safety check: PassMIT
Tauri Config Ipcifer47/markeron1.2k—~1kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Design To CodeMigoXLab/coderio1142 repos~1.2kAutomated safety check: PassApache-2.0
Nuxt UImegaarmos/vue-spring-bottom-sheet1411 repos~2.5kAutomated safety check: PassMIT

Similar skills

  • Cross-platform UI styling for MarkerOn Tauri app (macOS WKWebView vs Windows WebView2).

    1.2k GitHub stars~2k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed
  • Tauri Config Ipc

    ifer47/markeron

    Extend MarkerOn settings, persisted config, or Tauri IPC commands.

    1.2k GitHub stars~1k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed
  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed
  • Design To Code

    MigoXLab/coderio

    Pixel-perfect Figma to React conversion using coderio. An agent skill from MigoXLab/coderio.

    114 GitHub starsUsed in 2 repos~1.2k tokens
    Frontend & DesignAuto-check passed
  • Nuxt UI

    megaarmos/vue-spring-bottom-sheet

    Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming.

    141 GitHub starsUsed in 1 repo~2.5k tokens
    Frontend & DesignAuto-check passed
  • Vuetify Skilld

    logue/vite-vuetify-ts-starter

    Vue Material Component Framework. An agent skill from logue/vite-vuetify-ts-starter.

    181 GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed

Questions about Uni App

What does Uni App do?

Comprehensive skill reference for uni-app cross-platform development framework. Uni App is an agent skill from sonofmagic/uni-app-tailwindcss-template.

When should I use Uni App?

Uni App fits situations like: frontend & Design work in your project.

How do I install Uni App in Claude Code?

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

How do I install Uni App in Codex?

Run `npx skills add sonofmagic/uni-app-tailwindcss-template --skill uni-app -a codex`. Or copy the skill folder (.agents/skills/uni-app in sonofmagic/uni-app-tailwindcss-template) into .agents/skills/uni-app in your project. Codex loads it when a task matches its description.

Can I use Uni App 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 sonofmagic/uni-app-tailwindcss-template --skill uni-app -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/uni-app, .gemini/skills/uni-app, .github/skills/uni-app and .opencode/skills/uni-app in your project.

What does Uni App need to run?

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

Does Uni App access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Uni App 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. Review the folder before installing.

What licence does Uni App use?

Uni App is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Uni App use?

About 1k tokens (SKILL.md is roughly 4.2k 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 22k tokens, read only when the agent opens those files.

What are the alternatives to Uni App?

Skills that share tags, products or a category with Uni App: Cross Platform Tauri UI (ifer47/markeron, 1.2k stars), Tauri Config Ipc (ifer47/markeron, 1.2k stars), Web Artifacts Builder (anthropics/skills, 180k stars) and Design To Code (MigoXLab/coderio, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Uni App?

sonofmagic (a GitHub user) maintains it in sonofmagic/uni-app-tailwindcss-template, which has 336 GitHub stars. The repository was last updated on October 1, 2026.

Source: sonofmagic/uni-app-tailwindcss-template on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.