前端设计需要联网github未标认证来源可访问clear审计通过

dedsi-vue-ui（dedsi Vue UI 前端）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

264

周安装

GitHub Stars

公开资料未说明

下载量

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：dedsi-vue-ui（dedsi Vue UI 前端）
来源仓库：https://github.com/dedsiteam/dedsi-skills
仓库路径：skills/dedsi-vue-ui
安装命令：
npx skills add https://github.com/dedsiteam/dedsi-skills --skill dedsi-vue-ui
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异；本站展示可直接复制的安装命令，安装前请核对来源页面。

skills.shnpx skills

npx skills add https://github.com/dedsiteam/dedsi-skills --skill dedsi-vue-ui

简介

dedsi-vue-ui 用于辅助 Vue 3 + TypeScript 项目的前端开发，适合在 Codex、Claude、Cursor、Gemini CLI 中生成或审查组件代码。

适用于需要使用 Dedsi UI 组件库、配置 Props 或解决常见问题的情况，尤其适合 CRUD 功能实现。
通过 npx skills add 命令从 dedsi-skills 仓库安装，支持组件命名规范和表格使用指南。
使用时需遵循核心规范，如 component-naming 和 component-table，避免命名冲突或结构错误。
建议结合原始 SKILL.md 的规则列表，确保组件可复用且符合项目约定。

SKILL.md

Dedsi-Vue-UI 组件库 SKILL 文档

帮助 AI 理解和使用 Dedsi-Vue-UI 组件库的详细指南。

何时使用

使用 Dedsi Vue UI 组件库开发 Vue 3 + TypeScript 项目
需要查询组件的 Props、Events、Slots 和使用方法
解决组件使用中的常见问题
遵循 Dedsi UI 组件的开发和使用规范

能力规则

没有这些规则，AI 无法解决问题或生成的代码无法正确运行。

核心规范

规则	影响	描述
component-naming.md	HIGH	组件命名规范和使用格式
component-table.md	HIGH	表格组件的完整使用指南
component-menu.md	HIGH	导航菜单的使用方法

基础组件

规则	影响	描述
component-alert.md	MEDIUM	警告提示组件
component-avatar.md	MEDIUM	头像组件
component-badge.md	MEDIUM	徽标数组件
component-breadcrumb.md	MEDIUM	面包屑导航
component-card.md	MEDIUM	卡片容器
component-divider.md	MEDIUM	分割线
component-empty.md	MEDIUM	空状态占位
component-tag.md	MEDIUM	标签组件
component-space.md	MEDIUM	间距布局
component-split.md	MEDIUM	分割布局
component-typography.md	MEDIUM	排版组件

布局组件

规则	影响	描述
component-grid.md	MEDIUM	栅格布局系统
component-scrollbar.md	MEDIUM	自定义滚动条
component-skeleton.md	MEDIUM	骨架屏

导航组件

规则	影响	描述
component-menu.md	HIGH	导航菜单
component-tabs.md	MEDIUM	标签页切换
component-dropdown.md	MEDIUM	下拉菜单

数据展示组件

规则	影响	描述
component-table.md	HIGH	数据表格
component-statistic.md	MEDIUM	统计数值
component-number-converter.md	MEDIUM	数字转换
component-countdown.md	MEDIUM	倒计时
component-image.md	MEDIUM	图片预览
component-qrcode.md	MEDIUM	二维码生成

反馈组件

规则	影响	描述
component-dialog.md	HIGH	对话框
component-modal.md	MEDIUM	模态框
component-drawer.md	MEDIUM	抽屉
component-message.md	HIGH	全局提示
component-popconfirm.md	MEDIUM	气泡确认框
component-popover.md	MEDIUM	气泡卡片
component-tooltip.md	MEDIUM	文字提示
component-result.md	MEDIUM	结果反馈
component-popper.md	MEDIUM	基础气泡

其他组件

规则	影响	描述
component-segmented.md	MEDIUM	分段器
component-marquee.md	MEDIUM	跑马灯

效率规则

这些规则帮助 AI 更有效、更一致地解决问题。

最佳实践

规则	影响	描述
best-practices.md	HIGH	组件使用最佳实践

安装使用

npm install dedsi-vue-ui

import { createApp } from 'vue'
import { DedsiAlert, DedsiButton, DedsiTable } from 'dedsi-vue-ui'

const app = createApp(App)
app.use(DedsiAlert)
app.use(DedsiButton)
app.use(DedsiTable)

组件统计

已实现组件 (37个)

基础组件 (10个):

DedsiAlert, DedsiAvatar, DedsiBadge, DedsiBreadcrumb, DedsiCard
DedsiDivider, DedsiEmpty, DedsiTag, DedsiSpace, DedsiSplit

布局组件 (3个):

DedsiRow/DedsiCol, DedsiScrollbar, DedsiSkeleton

导航组件 (3个):

DedsiMenu, DedsiTabs, DedsiDropdown

数据展示组件 (7个):

DedsiTable, DedsiStatistic, DedsiNumberConverter, DedsiCountdown
DedsiImage, DedsiQRCode, DedsiTypography

反馈组件 (9个):

DedsiDialog, DedsiModal, DedsiDrawer, DedsiMessage
DedsiPopconfirm, DedsiPopover, DedsiTooltip, DedsiResult, DedsiPopper

其他组件 (5个):

DedsiSegmented, DedsiMarquee, DedsiCountdown, DedsiEmpty, DedsiResult

未实现组件 (23个)

表单组件:

DedsiButton, DedsiForm/DedsiFormItem, DedsiInput/DedsiInputNumber/DedsiInputPassword
DedsiTextarea, DedsiCheckbox/DedsiCheckboxGroup, DedsiRadio/DedsiRadioGroup
DedsiSelect, DedsiSwitch, DedsiSlider, DedsiRate

数据选择组件:

DedsiAutoComplete, DedsiCascader, DedsiDatePicker/DedsiMonthPicker/DedsiRangePicker
DedsiTimePicker/DedsiTimeRangePicker, DedsiTreeSelect, DedsiTransfer, DedsiMentions

其他:

DedsiUpload

核心特性

Vue 3 Composition API: 充分利用 Vue 3 的新特性
TypeScript 支持: 完整的类型定义和类型推断
组件化设计: 高复用性和可组合性
响应式布局: 支持多种屏幕尺寸
主题定制: 支持自定义主题和样式

组件命名规则

单文件组件: Dedsi + 功能名称（如 DedsiAlert、DedsiButton）
组合组件: 主组件 + 子组件（如 DedsiMenu + DedsiMenuItem）

重要: 在模板中使用组件时，必须使用 kebab-case 格式的 name 值（如 dedsi-alert），而不是 PascalCase（如 DedsiAlert）。

统计信息

指标	数值
总组件数	60
已实现	37
未实现	23
组件类别	6

技术栈

框架: Vue 3.5.26 (Composition API)
语言: TypeScript 5.9.3
构建工具: Vite
图标: @ant-design/icons-vue
日期处理: dayjs

参考

Vue 3 Documentation - Vue 3 官方文档
TypeScript Documentation - TypeScript 官方文档

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

25.66%

按下载量换算23

windsurf

21.49%

按下载量换算19

OpenCode

18.87%

按下载量换算17

Codex

14.23%

按下载量换算13

Antigravity

8.69%

按下载量换算8

Gemini CLI

3.17%

按下载量换算3

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

GitHub 仓库

github.com

/dedsiteam/dedsi-skills

SKILL.md 来源

github.com

/dedsiteam/dedsi-skills/tree/main/skills/dedsi-vue-ui

skills-sh

skills.sh

/dedsiteam/dedsi-skills/dedsi-vue-ui

agentskills-to

agentskills.to

/dedsiteam/dedsi-skills/dedsi-vue-ui

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

decompose-task（分解任务）

decompose-task 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

dedsi-vue3-coding（dedsi vue3 编码）