agentsclimarketplace

Zalo mini app

Skill neddtu/zalo-mini-app-skills/skills/zalo-mini-app

Updated Zalo Mini App agent skill based on latest official docs

Install
npx -y skills add neddtu/zalo-mini-app-skills --skill zalo-mini-app

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build Zalo Mini Apps - lightweight React web apps running inside the Zalo super-app. Use for Zalo Mini App setup, zmp-cli/devtools, ZaUI 1.11.x components, zmp-sdk APIs, permissions, token-based phone number flow, user info, storage, local file storage, camera/media, document preview, payment/Checkout, Open APIs, partner APIs, KYB/eKYC, publication, testing, and Zalo design guidelines.

SKILL.md

5.4 KB, as published. Nobody here has run it

Zalo Mini App Development

Build Mini Apps for the Zalo platform using React, ZaUI, zmp-sdk, Zalo Mini App CLI/Extension, and platform Open APIs.

Docs baseline: official Zalo Mini App docs checked on 2026-06-24.

Quick Start

npm install -g zmp-cli
zmp create my-app
cd my-app
zmp start

Core packages:

npm install zmp-ui zmp-sdk

import { App, Page, Button, Input, Modal } from "zmp-ui";
import "zmp-ui/zaui.css";
import { getUserInfo, authorize } from "zmp-sdk/apis";

Current package versions observed on 2026-06-24:

  • zmp-sdk: 2.51.x
  • zmp-ui: 1.11.x
  • zmp-cli: 4.0.x

Always verify package types in the installed project when implementing exact props or SDK return types.

References

Setup & Release

SDK APIs

Payment / Backend APIs

ZaUI Components

Critical Current Patterns

Phone Number: Token Flow, Not Direct Number

import { getPhoneNumber } from "zmp-sdk/apis";

const { token } = await getPhoneNumber({});
// Send token to backend immediately.
// Backend exchanges token with Zalo Open API to get the actual phone number.
// Token is single-use and short-lived.

Do not expect getPhoneNumber to return { number } in current docs.

Location: Token Flow, Not Direct Coordinates

import { getLocation } from "zmp-sdk/apis";

const { token } = await getLocation();
// Send token to backend for Zalo Open API exchange.

Do not expect getLocation to return direct { latitude, longitude } in current docs.

Local File Storage: LFSStorage Namespace

import { LFSStorage } from "zmp-sdk/apis";

const { support } = await LFSStorage.isSupportLFS();
const { savedPath } = await LFSStorage.saveFile({ filePath: "local-temp-path" });

Use filePath / savedPath, not old tempFilePath helpers.

Media Picker: Current Shape

import { openMediaPicker } from "zmp-sdk/apis";

const { data } = await openMediaPicker({
  type: "photo",
  maxSelectItem: 5,
  serverUploadUrl: "https://example.com/upload"
});

Use maxSelectItem, not maxSelection.

Basic Page Layout

import { App, Page, Header, List, Icon, BottomNavigation } from "zmp-ui";

export default function Root() {
  return (
    <App>
      <Page>
        <Header title="Home" />
        <List>
          <List.Item title="Item" suffix={<Icon icon="zi-chevron-right" />} />
        </List>
      </Page>
      <BottomNavigation fixed>
        <BottomNavigation.Item key="home" label="Home" icon={<Icon icon="zi-home" />} />
      </BottomNavigation>
    </App>
  );
}

Resources

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.