Agent skill

uCharts for UniApp

by feige996 in feige996/unibest

Guides uCharts chart integration across a UniApp project, covering install, page config, and platform-specific quirks.

Apache-2.0Auto-check passedMobile

Install uCharts for UniApp

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

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

GitHub CLI
$ gh skill install feige996/unibest uniapp-ucharts --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/bak-skills/uniapp-ucharts .claude/skills/uniapp-ucharts && 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-ucharts
GitHub stars
2.3k
Token cost
~1.8k tokens
SKILL.md length
654 words
Files
22
Skills in repo
14
Repo updated
First seen
Licence
Apache-2.0

At a glance

Guides uCharts chart integration across a UniApp project, covering install, page config, and platform-specific quirks.

  • Works in 5 steps: 环境准备 → 配置初始化 → 核心功能使用 → …
  • Adding uCharts to a UniApp project for the first time
  • SKILL.md covers When to use this skill, How to use this skill, Examples and Templates and API Reference, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Adding uCharts to a UniApp project follows the order a real integration takes: installation and easycom setup, then wiring charts into pages.json and manifest.json, then handling the differences between H5, mini-program, App, and nvue targets. Each stage points to its own reference file rather than dumping every detail into one document.

Theme customization, build optimization, and multi-platform deployment are covered too, alongside an API reference split between the integration API and the configuration API, so a chart that behaves correctly on H5 can be adjusted for a mini-program or native app target without starting over.

When your agent uses it

  • Adding uCharts to a UniApp project for the first time
  • Debugging a chart that behaves differently on one UniApp platform
  • Deploying the same chart-based UniApp project to multiple targets

Example prompts

  • “Set up uCharts in this UniApp project with easycom enabled.”
  • “Why does this chart render correctly on H5 but not in the mini-program?”
  • “Configure manifest.json so our bar chart works on nvue too.”

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

    No scripts in the folder and no shell commands in SKILL.md.

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

    • ext.dcloud.net.cn
    • uniapp.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

uCharts for UniApp loads about 1.8k tokens when it runs. Until then it costs about 97 tokens; SKILL.md has 654 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~97
When it runs · the whole SKILL.md, loaded when a task matches
~1.8k

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 feige996/unibest at commit dc3af8d, republished under its Apache-2.0 licence (© feige996). 654 words, ~1,817 tokens.

Download SKILL.mdSave it as .claude/skills/uniapp-ucharts/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
uniapp-ucharts
description
A comprehensive skill for integrating and using uCharts with UniApp projects. This skill focuses on UniApp-specific integration, configuration, and platform-specific considerations when using uCharts in UniApp applications. Use this skill whenever the user needs to integrate uCharts into UniApp projects, configure UniApp-specific settings, or handle platform differences.
license
Complete terms in LICENSE.txt

When to use this skill

Use this skill whenever the user wants to:

  • Integrate uCharts into UniApp projects
  • Configure UniApp projects to work with uCharts (pages.json, manifest.json, easycom)
  • Handle platform-specific behaviors when using uCharts in UniApp (H5, mini-program, App, nvue)
  • Use UniApp features (navigation, APIs, lifecycle) with uCharts components
  • Build cross-platform UniApp applications with uCharts charts
  • Configure easycom for automatic uCharts component import in UniApp
  • Handle navigation and routing with uCharts in UniApp
  • Optimize UniApp projects using uCharts
  • Deploy uCharts-based UniApp applications to multiple platforms

How to use this skill

This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=271). When working with uCharts in UniApp:

  1. Install and setup uCharts in UniApp project:

    • Load examples/getting-started/installation.md for installation in UniApp
    • Load examples/getting-started/project-setup.md for UniApp project configuration
    • Load examples/getting-started/easycom-config.md for easycom configuration
  2. Integrate with UniApp 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 uCharts
    • Load examples/integration/uni-api.md for using UniApp APIs with uCharts
  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 UniApp
    • 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 - UniApp and uCharts integration API
    • api/config-api.md - Configuration API reference
  6. Use templates for quick start:

    • templates/basic-uniapp-project.md - Basic UniApp project with uCharts
    • templates/pages-template.md - Pages configuration template
    • templates/manifest-template.md - Manifest configuration template

Important Notes:

  • This skill focuses on UniApp integration, not uCharts API documentation
  • 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 UniApp

Examples and Templates

Getting Started
  • Installation: examples/getting-started/installation.md - How to install uCharts in UniApp projects
  • Project Setup: examples/getting-started/project-setup.md - Setting up UniApp project with uCharts
  • 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 uCharts
  • Manifest Config: examples/integration/manifest-config.md - Configuring manifest.json for uCharts
  • Navigation: examples/integration/navigation.md - Navigation and routing with uCharts
  • UniApp API: examples/integration/uni-api.md - Using UniApp APIs with uCharts components
Platform-Specific
  • H5: examples/platform-specific/h5.md - H5 platform considerations with uCharts
  • Mini-Program: examples/platform-specific/miniprogram.md - Mini-program considerations with uCharts
  • App: examples/platform-specific/app.md - App platform considerations with uCharts
  • nvue: examples/platform-specific/nvue.md - nvue considerations with uCharts
Show full SKILL.md (268 more words)Show less
Advanced
  • Custom Theme: examples/advanced/custom-theme.md - Customizing themes in UniApp projects
  • Build Optimization: examples/advanced/build-optimization.md - Optimizing UniApp builds with uCharts
  • Multi-Platform: examples/advanced/multi-platform.md - Multi-platform deployment strategies
Templates
  • Basic Project: templates/basic-uniapp-project.md - Basic UniApp project structure with uCharts
  • 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 - UniApp and uCharts integration API reference
  • Config API: api/config-api.md - Configuration API reference for UniApp projects

Best Practices

  1. Use easycom: Configure easycom in pages.json for automatic uCharts 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 UniApp, px for fixed sizes
  4. Canvas Support: Ensure canvas is properly supported on target platforms
  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. Data Format: Ensure data format is compatible with uCharts requirements
  9. Lifecycle Management: Properly handle UniApp page lifecycle with uCharts instances
  10. Memory Management: Clean up chart instances in onUnload lifecycle

Resources

Keywords

uniapp, ucharts, uniapp charts, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, 图表, canvas, 图表组件, UniApp 图表, 跨平台图表, 小程序图表, App 图表

能力边界

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

常见陷阱 (Gotchas)

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

使用流程

Step 1: 环境准备

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

Step 2: 配置初始化

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

Step 3: 核心功能使用

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

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

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

© feige996, Apache-2.0. 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 21 other files in .agents/bak-skills/uniapp-ucharts of feige996/unibest.

  • SKILL.md
  • LICENSE.txt
  • api/config-api.md
  • api/integration-api.md
  • examples/advanced/build-optimization.md
  • examples/advanced/custom-theme.md
  • examples/advanced/multi-platform.md
  • examples/getting-started/easycom-config.md
  • examples/getting-started/installation.md
  • examples/getting-started/project-setup.md
  • examples/integration/manifest-config.md
  • examples/integration/navigation.md
  • examples/integration/pages-config.md
  • examples/integration/uni-api.md
  • examples/platform-specific/app.md
  • … and 7 more

Open the folder on GitHubat commit dc3af8d

Compare with similar skills

uCharts for UniApp 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.

uCharts for UniApp compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
uCharts for UniApp this skillfeige996/unibest2.3k—~1.8kAutomated safety check: PassApache-2.0
Ionic FrameworkLeoYeAI/openclaw-master-skills2.2k—~5.5kAutomated safety check: PassMIT
Solar Iconssaoudi-h/solar-icons190—~2.1kAutomated safety check: PassMIT
Frontend Designavibebuilder/claude-prime120—~2.1kAutomated safety check: PassMIT
Frontend SpecialistProrise-cool/Claude-Code-Multi-Agent306—~1.4kAutomated safety check: PassNone
JSON Render Catalogyonatangross/orchestkit292—~6.4kAutomated safety check: PassMIT

Similar skills

  • 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
  • Solar Icons

    saoudi-h/solar-icons

    Add Solar Icons via @solar-icons/cli to any React, Vue, Svelte, Solid, Angular, React Native, Nuxt, Static, vanilla JS, or Laravel Blade project.

    190 GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Frontend Design

    avibebuilder/claude-prime

    Builds distinctive, production-grade UIs that avoid generic AI aesthetics.

    120 GitHub stars~2.1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed
  • Frontend Specialist

    Prorise-cool/Claude-Code-Multi-Agent

    提供前端开发、UI 实现、移动应用开发和现代前端框架能力。当需要实现用户界面、构建组件或开发移动应用时使用. An agent skill from Prorise-cool/Claude-Code-Multi-Agent.

    306 GitHub stars~1.4k tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed
  • JSON Render Catalog

    yonatangross/orchestkit

    json-render component catalog patterns for AI-safe generative UI.

    292 GitHub stars~6.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 26 repos~3.6k tokens
    Frontend & DesignAuto-check: notes

More from feige996/unibest

All 14 skills in this repo
  • Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.

    2.3k GitHub stars~1.6k tokensUpdated 25 days ago
    Auto-check passed
  • 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 25 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 25 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 25 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 25 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 25 days ago
    Auto-check passed

Works with

Questions about uCharts for UniApp

What does uCharts for UniApp do?

Guides uCharts chart integration across a UniApp project, covering install, page config, and platform-specific quirks. json, then handling the differences between H5, mini-program, App, and nvue targets. Each stage points to its own reference file rather than dumping every detail into one document.

When should I use uCharts for UniApp?

uCharts for UniApp fits situations like: adding uCharts to a UniApp project for the first time; debugging a chart that behaves differently on one UniApp platform; deploying the same chart-based UniApp project to multiple targets.

How do I install uCharts for UniApp in Claude Code?

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

How do I install uCharts for UniApp in Codex?

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

Can I use uCharts for UniApp 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-ucharts -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-ucharts, .gemini/skills/uniapp-ucharts, .github/skills/uniapp-ucharts and .opencode/skills/uniapp-ucharts in your project.

What does uCharts for UniApp need to run?

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

Does uCharts for UniApp access the network?

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

Is uCharts for UniApp 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 uCharts for UniApp use?

uCharts for UniApp is published under the Apache-2.0 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 uCharts for UniApp use?

About 1.8k tokens (SKILL.md is roughly 7.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to uCharts for UniApp?

Skills that share tags, products or a category with uCharts for UniApp: Ionic Framework (LeoYeAI/openclaw-master-skills, 2.2k stars), Solar Icons (saoudi-h/solar-icons, 190 stars), Frontend Design (avibebuilder/claude-prime, 120 stars) and Frontend Specialist (Prorise-cool/Claude-Code-Multi-Agent, 306 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains uCharts for UniApp?

feige996 (a GitHub user) maintains it in feige996/unibest, which has 2,277 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.