Tabler Vue

English

简体中文

English

简体中文

Appearance

AI-Driven Development ​

This page introduces how to leverage the built-in SKILL files in this project to help AI assistants generate more accurate Tabler-Vue component code.

What Are SKILLs? ​

SKILLs are machine-readable documentation tailored for AI assistants (large language models). Unlike traditional manuals, they tell the AI in structured Markdown:

  • What Props, Events, and Slots a component has
  • What correct code looks like
  • What patterns are prohibited

Pain Points Solved ​

When using AI to write UI components, common issues include:

  • AI fabricating non-existent component names or props
  • AI outputting Vue 2 Options API instead of Vue 3 <script setup>
  • AI importing non-existent third-party libraries
  • AI mixing syntax from other libraries (Element Plus, Ant Design)

❌ Without SKILLs: AI often outputs <el-button> from Element Plus with hand-written <style scoped>. ✅ With SKILLs: AI correctly outputs Tabler-compliant <TButton color="primary"> with clean code.

These SKILL files completely solve these problems. With precise reference documentation, AI output quality improves dramatically.

How to Use ​

Scenario A: In Cursor / Windsurf / AI IDEs ​

Method 1 (Recommended): Copy the full content of /SKILL.md 🔗Jump and paste it into your IDE's Rules for AI (or download the file to your project root):

  • Cursor: Project Settings → Rules for AI → paste the raw content of /SKILL.md
  • Windsurf: Write the content into .windsurfrules
  • Cline/Claude Code: Reference in CLINE.md or CLAUDE.md

Method 2: Use @ to reference specific component SKILL files:

Create a modal with delete confirmation, refer to @skills/TModal/SKILL.md and @skills/TDelete/SKILL.md

Scenario B: In ChatGPT / Claude Web ​

Paste the component SKILL content before asking your question:

Here is the component API I need to use:
[paste contents of %URL%/skills/TButton/SKILL.md]

Please create a toolbar with Save and Cancel buttons using this component.

You can also provide the online link (recommend using raw format to ensure the AI reads plain text, not an HTML page): /skills/TButton/SKILL.md

SKILL Architecture ​

The system has two layers:

Macro Guide — Global Coding Conventions ​

Location: /SKILL.md

Contains universal rules shared by all components:

  • Must use Vue 3 <script setup lang="ts"> + Composition API
  • Props use reactive destructuring, withDefaults is prohibited
  • Two-way binding uses defineModel()
  • Styles prefer Tabler CSS utility classes
  • No fabricated component names or props

Micro Dictionary — Per-Component Precise API ​

Location: /skills/{ComponentName}/SKILL.md

Each file targets one specific component and includes:

  • Props list: Exact types, defaults, and descriptions
  • Events list: Event names and payloads
  • Slots list: Named slots and their scoped parameters
  • Basic usage: Runnable code examples
  • Advanced scenarios: Complex combinations and business logic
  • Tips: Common mistakes and important notes

Covers components like TButton, TTable, TModal, and more.

Note: AI-generated code should still be reviewed. SKILL files significantly reduce error rates but cannot fully replace developer judgment.