agentsclimarketplace
Sign in

Zalo mini app

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

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.From its SKILL.md

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.

2 things 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.
  • runs commandsInstructs the agent to run 5 commands, including `npm install -g zmp-cli` and 4 more.

SKILL.md

5.4 KB, ~1.3k tokens by cl100k_base, 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

What ships with it: 21 files

72.8 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. 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.