Tabler Vue

简体中文

English

简体中文

English

Appearance

AI 驱动开发 ​

本页面向你介绍如何利用项目中内置的 SKILL 文件，让 AI 助手更精准地生成 Tabler-Vue 组件代码。

什么是 SKILL？ ​

SKILL 是专为 AI 助手（大语言模型）量身定制的机器可读文档。它不像传统手册那样长篇大论，而是以结构化的 Markdown 形式，告诉 AI：

  • 这个组件有哪些 Props、Events、Slots
  • 正确的代码怎么写
  • 哪些写法是禁止的

解决了什么痛点？ ​

平时用 AI 写 UI 经常会遇到：

  • AI 随意编造不存在的组件名或 Props
  • AI 输出 Vue 2 Options API 而非 Vue 3 <script setup>
  • AI 引入不存在的第三方库
  • AI 混用其它组件库（Element Plus、Ant Design）的语法

❌ 没有 SKILL 时：AI 经常按 Element Plus 的习惯输出 <el-button>，并带上一堆手写的 <style scoped>。 ✅ 有了 SKILL 后：AI 乖乖输出符合 Tabler 规范的 <TButton color="primary">，代码干净利落。

这一套 SKILL 文件彻底解决了这些问题。AI 有了精确的"参考手册"，输出质量大幅提升。

使用方法 ​

场景 A：在 Cursor / Windsurf 等 AI IDE 中 ​

方式一（推荐）：将 /SKILL.md 🔗跳转 的内容直接完整复制并粘贴到 IDE 的 Rules for AI 中（或下载该文件放入项目根目录）：

  • Cursor：Project Settings → Rules for AI → 粘贴 /SKILL.md 的纯文本内容
  • Windsurf：将内容写入 .windsurfrules
  • Cline/Claude Code：在 CLINE.md 或 CLAUDE.md 中引用

方式二：在对话中通过 @ 引用具体的组件 SKILL 文件：

请帮我创建一个带删除确认的弹窗，参考 @skills/TModal/SKILL.md 和 @skills/TDelete/SKILL.md

场景 B：在 ChatGPT / Claude Web 端 ​

在提问前，将对应的组件 SKILL 内容粘贴给 AI，然后描述你的需求：

以下是我需要使用的组件 API 定义：
[粘贴 %URL%/skills/TButton/SKILL.md 的内容]

请使用这个组件创建一个工具栏，包含保存和取消按钮。

你也可以直接提供在线链接（建议提供 Raw 格式纯文本，确保 AI 正确读取而非 HTML 页面）：/skills/TButton/SKILL.md

SKILL 架构一览 ​

这套规则分为两层：

宏观指南 — 全局编码规范 ​

位置：/SKILL.md

包含所有组件共用的编码铁律：

  • 必须使用 Vue 3 <script setup lang="ts"> + Composition API
  • Props 使用响应式解构，禁止 withDefaults
  • 双向绑定使用 defineModel()
  • 样式优先使用 Tabler CSS utility classes
  • 禁止伪造不存在的组件或 Props

微观字典 — 每个组件精确 API ​

位置：/skills/{组件名}/SKILL.md

每个文件针对一个具体组件，包含：

  • Props 清单：精确的类型、默认值和说明
  • Events 清单：组件抛出的事件名和载荷
  • Slots 清单：具名插槽及其作用域参数
  • 基础用法：可直接复制运行的示例代码
  • 进阶场景：复杂组合和业务逻辑示例
  • 避坑指南：易错点和注意事项

覆盖了 TButton、TTable、TModal 等组件。

提示：AI 生成的代码仍需人工 review。SKILL 文件能大幅降低出错率，但不能完全替代开发者的判断。