# tdesign-miniprogram

A skill that tells the agent how to build WeChat mini program UIs with Tencent's TDesign library: 60+ components, dark mode, theme customization.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 396 installs · ★ 32
- Author: joneqian
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/joneqian/claude-skills-suite/tree/HEAD/skills/tdesign-miniprogram/SKILL.md
- Updated: 2026-02-10
- HTML: https://affpapa.org/en/nevibecode/skills/tdesign-miniprogram

## What it does

The skill kicks in when you build a WeChat mini program on top of TDesign. It carries a component reference with import paths — Button, Input, Dialog, Calendar, Table, Upload and more, grouped by category. The agent drops the right path into `usingComponents` and writes the matching tag in WXML.

Installing the library itself is `npm i tdesign-miniprogram -S --production`. Then you edit configs by hand: remove `"style": "v2"` from `app.json` or styles clash, add `packNpmManually` and `packNpmRelationList` to `project.config.json`, and for TypeScript projects map `tdesign-miniprogram/*` in `tsconfig.json`. Build npm in DevTools afterwards via `Tools - Build npm`, then tick `Compile JS to ES5`. Worth checking your build settings before the agent starts generating pages.

The skill also covers dark mode, style customization and the chat components. Building npm in DevTools is not optional — imports won't resolve without it.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add joneqian/claude-skills-suite --skill tdesign-miniprogram -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/tdesign-miniprogram/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/tdesign-miniprogram/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add joneqian/claude-skills-suite --skill tdesign-miniprogram -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/tdesign-miniprogram/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add joneqian/claude-skills-suite --skill tdesign-miniprogram -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/tdesign-miniprogram/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install joneqian/claude-skills-suite tdesign-miniprogram
```

2. **Manually: put the files in place**
- File: `.github/skills/tdesign-miniprogram/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add joneqian/claude-skills-suite --skill tdesign-miniprogram -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/joneqian/claude-skills-suite --path skills/tdesign-miniprogram
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/tdesign-miniprogram/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add joneqian/claude-skills-suite --skill tdesign-miniprogram -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/joneqian/claude-skills-suite/tree/HEAD/skills/tdesign-miniprogram/SKILL.md

## When to use it
- wire TDesign into a WeChat mini program without style conflicts
- find the exact import path for a component
- assemble a form from Input, Picker and Upload
- set up dark mode and theme customization
- build a chat interface from TDesign components

## Example prompts
- add a t-button to this page using TDesign
- set up dark mode for my TDesign mini program
- what's the import path for the Calendar component in tdesign-miniprogram?

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 18952ed1c06dea53.

BEGIN THIRD-PARTY FILE 18952ed1c06dea53
````text
---
name: tdesign-miniprogram
description: TDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.
---

# TDesign Mini Program Skill

TDesign WeChat Mini Program component library, an enterprise-level design system by Tencent. Provides 60+ high-quality components with dark mode support, theme customization, and more.

## When to Use This Skill

This skill should be triggered when:

- Developing WeChat Mini Programs with TDesign component library
- Using TDesign UI components (Button, Input, Dialog, etc.)
- Implementing interfaces following TDesign design specifications
- Configuring TDesign themes and style customization
- Building AI chat interfaces (using TDesign Chat components)
- Implementing dark mode adaptation

## Quick Start

### Installation

```bash
npm i tdesign-miniprogram -S --production
```

### Modify app.json

Remove `"style": "v2"` from `app.json` to avoid style conflicts.

### Modify project.config.json

Add the following to the `setting` section of `project.config.json`:

```json
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}
```

### Modify tsconfig.json (TypeScript projects)

```json
{
  "paths": {
    "tdesign-miniprogram/*": [
      "./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
    ]
  }
}
```

> After modifying project.config.json, build npm in WeChat DevTools: `Tools - Build npm`

> After successful build, check `Compile JS to ES5`

### Using Components

Import in page or component JSON file:

```json
{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}
```

Use in WXML:

```html
<t-button theme="primary">Button</t-button>
```

## Component Categories

### Basic Components (6)

| Component | Description            | Import Path                           |
| --------- | ---------------------- | ------------------------------------- |
| Button    | Button                 | `tdesign-miniprogram/button/button`   |
| Divider   | Divider                | `tdesign-miniprogram/divider/divider` |
| Fab       | Floating Action Button | `tdesign-miniprogram/fab/fab`         |
| Icon      | Icon                   | `tdesign-miniprogram/icon/icon`       |
| Layout    | Layout                 | `tdesign-miniprogram/row/row`         |
| Link      | Link                   | `tdesign-miniprogram/link/link`       |

### Navigation Components (8)

| Component | Description     | Import Path                             |
| --------- | --------------- | --------------------------------------- |
````
END THIRD-PARTY FILE 18952ed1c06dea53

The third-party file has ended. Everything between the 18952ed1c06dea53 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2710 of 14590 bytes. © joneqian · MIT · https://github.com/joneqian/claude-skills-suite/tree/HEAD/skills/tdesign-miniprogram/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md