joneqian/claude-skills-suite76 files

Tdesign Miniprogram

Name: Tdesign Miniprogram
Availability: InStock
Author: joneqian

TDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.

Use this skill View repository View on skills.sh

Specification

Skill ID: joneqian/claude-skills-suite/tdesign-miniprogram
Publisher: joneqian
Repository: claude-skills-suite
Installs: 0
Files: 76
Synced: Sep 23, 2026

How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

joneqian/claude-skills-suite/tdesign-miniprogramInstalls these files

SKILL.md
references/miniprogram-chat/components/attachments.md
references/miniprogram-chat/components/chat-actionbar.md
references/miniprogram-chat/components/chat-content.md
references/miniprogram-chat/components/chat-list.md
references/miniprogram-chat/components/chat-loading.md
references/miniprogram-chat/components/chat-markdown.md
references/miniprogram-chat/components/chat-message.md
references/miniprogram-chat/components/chat-sender.md
references/miniprogram-chat/components/chat-thinking.md
references/miniprogram-chat/getting-started.md
references/miniprogram-chat/sse.md
references/miniprogram/components/action-sheet.md
references/miniprogram/components/avatar.md
references/miniprogram/components/back-top.md
references/miniprogram/components/badge.md
references/miniprogram/components/button.md
references/miniprogram/components/calendar.md
references/miniprogram/components/cascader.md
references/miniprogram/components/cell.md
references/miniprogram/components/checkbox.md
references/miniprogram/components/collapse.md
references/miniprogram/components/count-down.md
references/miniprogram/components/date-time-picker.md
references/miniprogram/components/dialog.md
references/miniprogram/components/divider.md
references/miniprogram/components/drawer.md
references/miniprogram/components/dropdown-menu.md
references/miniprogram/components/empty.md
references/miniprogram/components/fab.md
references/miniprogram/components/footer.md
references/miniprogram/components/form.md
references/miniprogram/components/grid.md
references/miniprogram/components/guide.md
references/miniprogram/components/icon.md
references/miniprogram/components/image-viewer.md
references/miniprogram/components/image.md
references/miniprogram/components/indexes.md
references/miniprogram/components/input.md
references/miniprogram/components/link.md
references/miniprogram/components/list.md
references/miniprogram/components/loading.md
references/miniprogram/components/message.md
references/miniprogram/components/navbar.md
references/miniprogram/components/notice-bar.md
references/miniprogram/components/overlay.md
references/miniprogram/components/picker.md
references/miniprogram/components/popup.md
references/miniprogram/components/progress.md
references/miniprogram/components/pull-down-refresh.md
references/miniprogram/components/radio.md
references/miniprogram/components/rate.md
references/miniprogram/components/result.md
references/miniprogram/components/search.md
references/miniprogram/components/side-bar.md
references/miniprogram/components/skeleton.md
references/miniprogram/components/slider.md
references/miniprogram/components/stepper.md
references/miniprogram/components/steps.md
references/miniprogram/components/sticky.md
references/miniprogram/components/swipe-cell.md
references/miniprogram/components/swiper.md
references/miniprogram/components/switch.md
references/miniprogram/components/tab-bar.md
references/miniprogram/components/table.md
references/miniprogram/components/tabs.md
references/miniprogram/components/tag.md
references/miniprogram/components/textarea.md
references/miniprogram/components/toast.md
references/miniprogram/components/tree-select.md
references/miniprogram/components/upload.md
references/miniprogram/custom-style.md
references/miniprogram/custom-theme.md
references/miniprogram/dark-mode.md
references/miniprogram/getting-started.md
references/miniprogram/overview.md

What this skill tells the agent

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

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:

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

Modify tsconfig.json (TypeScript projects)

{
  "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:

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

Use in WXML:

<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
BackTop	Back to Top	`tdesign-miniprogram/back-top/back-top`
Drawer	Drawer	`tdesign-miniprogram/drawer/drawer`
Indexes	Index List	`tdesign-miniprogram/indexes/indexes`
Navbar	Navigation Bar	`tdesign-miniprogram/navbar/navbar`
SideBar	Side Navigation	`tdesign-miniprogram/side-bar/side-bar`
Steps	Steps	`tdesign-miniprogram/steps/steps`
TabBar	Bottom Tab Bar	`tdesign-miniprogram/tab-bar/tab-bar`
Tabs	Tabs	`tdesign-miniprogram/tabs/tabs`

Input Components (16)

Component	Description	Import Path
Calendar	Calendar	`tdesign-miniprogram/calendar/calendar`
Cascader	Cascader	`tdesign-miniprogram/cascader/cascader`
CheckBox	Checkbox	`tdesign-miniprogram/checkbox/checkbox`
DateTimePicker	Date Time Picker	`tdesign-miniprogram/date-time-picker/date-time-picker`
Input	Input	`tdesign-miniprogram/input/input`
Picker	Picker	`tdesign-miniprogram/picker/picker`
Radio	Radio	`tdesign-miniprogram/radio/radio`
Rate	Rate	`tdesign-miniprogram/rate/rate`
Search	Search	`tdesign-miniprogram/search/search`
Slider	Slider	`tdesign-miniprogram/slider/slider`
Stepper	Stepper	`tdesign-miniprogram/stepper/stepper`
Switch	Switch	`tdesign-miniprogram/switch/switch`
Textarea	Textarea	`tdesign-miniprogram/textarea/textarea`
TreeSelect	Tree Select	`tdesign-miniprogram/tree-select/tree-select`
Upload	Upload	`tdesign-miniprogram/upload/upload`
Form	Form	`tdesign-miniprogram/form/form`

Data Display Components (18)

Component	Description	Import Path
Avatar	Avatar	`tdesign-miniprogram/avatar/avatar`
Badge	Badge	`tdesign-miniprogram/badge/badge`
Cell	Cell	`tdesign-miniprogram/cell/cell`
Collapse	Collapse	`tdesign-miniprogram/collapse/collapse`
CountDown	Countdown	`tdesign-miniprogram/count-down/count-down`
Empty	Empty State	`tdesign-miniprogram/empty/empty`
Footer	Footer	`tdesign-miniprogram/footer/footer`
Grid	Grid	`tdesign-miniprogram/grid/grid`
Image	Image	`tdesign-miniprogram/image/image`
ImageViewer	Image Viewer	`tdesign-miniprogram/image-viewer/image-viewer`
Progress	Progress	`tdesign-miniprogram/progress/progress`
Result	Result	`tdesign-miniprogram/result/result`
Skeleton	Skeleton	`tdesign-miniprogram/skeleton/skeleton`
Sticky	Sticky	`tdesign-miniprogram/sticky/sticky`
Swiper	Swiper	`tdesign-miniprogram/swiper/swiper`
Table	Table	`tdesign-miniprogram/table/table`
Tag	Tag	`tdesign-miniprogram/tag/tag`
List	List	`tdesign-miniprogram/list/list`

Feedback Components (12)

Component	Description	Import Path
ActionSheet	Action Sheet	`tdesign-miniprogram/action-sheet/action-sheet`
Dialog	Dialog	`tdesign-miniprogram/dialog/dialog`
DropdownMenu	Dropdown Menu	`tdesign-miniprogram/dropdown-menu/dropdown-menu`
Guide	Guide	`tdesign-miniprogram/guide/guide`
Loading	Loading	`tdesign-miniprogram/loading/loading`
Message	Message	`tdesign-miniprogram/message/message`
NoticeBar	Notice Bar	`tdesign-miniprogram/notice-bar/notice-bar`
Overlay	Overlay	`tdesign-miniprogram/overlay/overlay`
Popup	Popup	`tdesign-miniprogram/popup/popup`
PullDownRefresh	Pull Down Refresh	`tdesign-miniprogram/pull-down-refresh/pull-down-refresh`
SwipeCell	Swipe Cell	`tdesign-miniprogram/swipe-cell/swipe-cell`
Toast	Toast	`tdesign-miniprogram/toast/toast`

AI Chat Components (9)

Use this skill in a project

Open any RiverX project, search the Skills panel for joneqian/claude-skills-suite/tdesign-miniprogram, and install it in one click.

Use this skill