Agent skill · bighardperson
tdesign-miniprogram
TDesign WeChat Mini Program UI component library by Tencent. Use when building WeChat mini apps with TDesign components (Button, Dialog, Input, Tabs, Chat, etc.), implementing TDesign design system, customizing themes/dark mode, or building AI chat interfaces in mini programs.
What it needs
About 6k tokens when loaded.
What this skill does
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 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: Modify tsconfig.json (TypeScript projects) 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: Use in WXML: 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-miniprogra …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills bighardperson/TDesign 微信小程序组件