zalo-mini-app

Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo, getPhoneNumber, getLocation, Storage, Camera), Checkout SDK for payments, design guidelines, and development tools. Use when building Mini Apps, using ZaUI components, calling Zalo APIs, integrating payments, converting web apps to Mini Apps, or following Zalo design standards.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "zalo-mini-app" with this command: npx skills add suminhthanh/zalo-mini-app-skills/suminhthanh-zalo-mini-app-skills-zalo-mini-app

Zalo Mini App Development

Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.

Quick Start

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

See getting-started.md for full setup, deployment, and app-config.json.

Core Packages

npm install zmp-ui zmp-sdk

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

References

APIs

api-overview.md - API categories & patterns
api-user.md - authorize, getUserInfo, getPhoneNumber
api-storage.md - setItem, getItem, storage APIs
api-ui.md - showToast, navigation, routing
api-device.md - location, camera, QR, NFC
api-zalo.md - followOA, openChat, share

ZaUI Components

zaui-overview.md - Component list & design tokens
zaui-layout.md - App, Page, Header, Tabs, Router
zaui-display.md - Avatar, Icon, List, Swiper
zaui-form.md - Button, Input, Select, DatePicker
zaui-overlay.md - Modal, Sheet, ActionSheet

Design & Setup

design-guidelines.md - Colors, typography, UX
getting-started.md - Setup, deploy, publish
web-design-guidelines.md - Accessibility, forms, animations, touch, i18n

Performance & React

react-best-practices.md - Waterfalls, bundle size, re-renders, JS performance

Common Patterns

Get User Info

const { userInfo } = await getUserInfo({ autoRequestPermission: true });
// { id, name, avatar, followedOA }

Basic Page Layout

<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

Docs: https://miniapp.zaloplatforms.com/documents/
Mini App Center: https://miniapp.zaloplatforms.com/
React Best Practices: https://react.dev
SWR: https://swr.vercel.app

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Open in GitHub Open in ClawHub

Related Skills

Related by shared tags or category signals.

Coding

obsidian-notes

Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.

Archived SourceRecently Updated

--164149043

Coding

mcporter-cli

Use the mcporter CLI to list, configure, auth, and call MCP servers/tools directly (HTTP or stdio), including ad-hoc servers, config edits, and CLI/type generation.

Archived SourceRecently Updated

--164149043

Coding

github-tools

Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.

Archived SourceRecently Updated

--164149043

Coding

bili-rs

Development skill for bili-rs, a Rust CLI tool for Bilibili (B站). Use when implementing features, fixing bugs, or extending the bilibili-cli-rust codebase. Provides architecture conventions, API endpoints, coding patterns, and project-specific constraints. Triggers on tasks involving adding CLI commands, calling Bilibili APIs, handling authentication, implementing output formatting, or working with the layered cli/commands/client/payloads architecture.

Archived SourceRecently Updated

--18621063286