mcpField
U
uview-pro

uview-pro

github.com/uview-proDevelopment10564 installsUpdated today
Repository

About uview-pro

uview-pro is a skill index for the uView Pro component library in uni-app projects. It covers UI components, utility functions, composition API hooks, layout templates, and guides for topics such as theming and internationalization.

Key features

  1. 01Index form, navigation, and feedback components
  2. 02Provide utility functions and composition API hooks
  3. 03Catalog common page layout templates
  4. 04Cover theming, styling, and internationalization guides

Use cases

  1. 01Choose UI components for uni-app pages
  2. 02Find usage guidance for forms and modals
  3. 03Reuse login or order layout templates
  4. 04Look up theming and internationalization guidance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/uview-pro/skills --skill uview-pro

After installing, type/uview-proin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/components/
actionSheet.md
alertTips.md
avatar.md
avatarCropper.md
backTop.md
badge.md
button.md
calendar.md
card.md
cell.md
checkbox.md
circleProgress.md
collapse.md
color.md
common.md
configProvider.md
countDown.md
countTo.md
divider.md
downloadSetting.md
dropdown.md
empty.md
fab.md
feature.md
field.md
form.md
fullScreen.md
gap.md
grid.md
icon.md

Details

From the project README

uView Pro 组件库技能

触发条件

在以下场景中自动调用此技能：

  1. 开发 uni-app 页面时
  2. 使用 u- 前缀的组件时（如 u-button, u-input, u-form 等）
  3. 需要表单、按钮、弹窗、提示、导航等 UI 组件时
  4. 需要使用工具函数（防抖、节流、深拷贝等）时
  5. 需要使用组合式 API 钩子（useToast, useModal, useTheme 等）时
  6. 需要 uView Pro 相关的布局模板时

组件快速索引

基础组件
组件说明文档
button按钮组件button
icon图标组件icon
image图片组件image
text文本组件text
tag标签组件tag
badge徽章组件badge
link链接组件link
avatar头像组件avatar
表单组件
组件说明文档
form表单组件form
input输入框组件input
field表单字段组件field
textarea文本域组件textarea
checkbox复选框组件checkbox
radio单选框组件radio
switch开关组件switch
slider滑块组件slider
rate评分组件rate
numberBox数字输入框组件numberBox
upload上传组件upload
picker选择器组件picker
select选择器组件select
keyboard键盘组件keyboard
数据展示组件
组件说明文档
card卡片组件card
grid宫格组件grid
cell单元格组件cell
collapse折叠面板组件collapse
table表格组件table
list列表组件indexList
skeleton骨架屏组件skeleton
empty空状态组件empty
loading加载组件loading
swiper轮播组件swiper
steps步骤组件steps
timeLine时间轴组件timeLine
反馈组件
组件说明文档
toast提示组件toast
modal模态框组件modal
popup弹出层组件popup
actionSheet操作菜单组件actionSheet
noticeBar通知栏组件noticeBar
alertTips警告提示组件alertTips
topTips顶部提示组件topTips
loadingPopup加载弹窗组件loadingPopup
导航组件
组件说明文档
navbar导航栏组件navbar
tabbar标签栏组件tabbar
tabs标签页组件tabs
subsection分段器组件subsection
pagination分页组件pagination
布局组件
组件说明文档
layout布局组件layout
gap间距组件gap
divider分割线组件divider
line线条组件line
section区块组件section
safeAreaInset安全区域适配组件safeAreaInset
功能组件
组件说明文档
calendar日历组件calendar
countDown倒计时组件countDown
countTo数字滚动组件countTo
backTop返回顶部组件backTop
lazyLoad懒加载组件lazyLoad
readMore阅读更多组件readMore
search搜索组件search
swipeAction滑动操作组件swipeAction
transition过渡动画组件transition
waterfall瀑布流组件waterfall

工具函数快速索引

工具说明文档
debounce防抖工具debounce
deepClone深拷贝工具deepClone
deepMerge深度合并工具deepMerge
route路由工具route
time时间工具time
test测试工具（验证）test
queryParams查询参数工具queryParams
guid生成GUID工具guid
random随机数工具random
trim字符串修剪工具trim
color颜色值工具color
colorSwitch颜色转换工具colorSwitch

组合式 API 钩子

钩子说明文档
useToast提示钩子useToast
useModal模态框钩子useModal
useTheme主题管理钩子useTheme
useLocale国际化钩子useLocale
useDebounce防抖钩子useDebounce
useThrottle节流钩子useThrottle
useColor颜色管理钩子useColor

布局模板

布局说明文档
login登录布局login
address地址布局address
citySelect城市选择布局citySelect
comment评论布局comment
coupon优惠券布局coupon
order订单布局order
submitBar提交栏布局submitBar
menu菜单布局menu
keyboardPay键盘支付布局keyboardPay
wxCenter微信中心布局wxCenter

指南文档

指南说明文档
design设计指南design
customTheme自定义主题指南customTheme
customStyle自定义样式指南customStyle
customIcon自定义图标指南customIcon
i18n国际化指南i18n
faq常见问题指南faq
note注意事项指南note

使用示例

按钮组件
<template>
  <u-button type="primary" @click="handleClick">主要按钮</u-button>
  <u-button type="success">成功按钮</u-button>
  <u-button type="warning" plain>镂空按钮</u-button>
</template>
表单组件
<template>
  <u-form :model="form" :rules="rules" ref="formRef">
    <u-form-item label="用户名" prop="username">
      <u-input v-model="form.username" placeholder="请输入用户名" />
    </u-form-item>
    <u-form-item label="密码" prop="password">
      <u-input v-model="form.password" type="password" placeholder="请输入密码" />
    </u-form-item>
  </u-form>
</template>
提示组件
<script setup>
import { useToast } from '@/uni_modules/uview-pro'

const toast = useToast()

const showToast = () => {
  toast.show({
    title: '操作成功',
    type: 'success'
  })
}
</script>

完整组件列表

指南类 Skills
组件类 Skills
工具类 Skills
钩子类 Skills
布局类 Skills

Comments

Markdown supported