Back to Details

trident-ui-install

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Trident UI Installation

Trident UI 安装指南

Streamline the setup of Trident UI component library in your Vite or Next.js project. This skill automates dependency installation, configuration file creation, and design system setup.
简化Trident UI组件库在Vite或Next.js项目中的搭建流程。此技能可自动完成依赖安装、配置文件创建及设计系统搭建。

What This Skill Does

此技能的功能

Trident UI is a pre-built React component library using Tailwind 4 with CSS-only theming. This skill will:
  1. Detect your project type (Vite or Next.js) and package manager
  2. Install required dependencies (@clubmed/trident-icons, tailwindcss)
  3. Create configuration files (components.json, CSS, Tailwind config)
  4. Install the complete design system (157 CSS variables, 25+ animations, component styles)
  5. Set up TypeScript path aliases
  6. Validate the installation
After setup, you can use Trident UI components by copying them into your project:
  • shadcn CLI: 
    npx shadcn@latest add <registry-url>
    copies component source code into your project for full customization control
Trident UI是一个基于Tailwind 4构建的预封装React组件库，采用纯CSS主题方案。此技能将：
  1. 检测你的项目类型（Vite或Next.js）及包管理器
  2. 安装所需依赖（@clubmed/trident-icons、tailwindcss）
  3. 创建配置文件（components.json、CSS文件、Tailwind配置文件）
  4. 安装完整设计系统（157个CSS变量、25+种动画、组件样式）
  5. 设置TypeScript路径别名
  6. 验证安装结果
搭建完成后，你可通过以下方式在项目中使用Trident UI组件：
  • shadcn CLI：
    npx shadcn@latest add <registry-url>
    将组件源代码复制到你的项目中，实现完全自定义控制

Phase 1: Preflight & Detection

阶段1：预检与检测

EXPLAIN: I need to understand your project structure to provide the right configuration. Let me detect your project type, package manager, and check for any existing installations.
DO: Running detection...
bash
undefined
说明：我需要了解你的项目结构以提供合适的配置。请允许我检测你的项目类型、包管理器，并检查是否存在已安装的相关内容。
执行：正在运行检测...
bash
undefined

Check for package.json

Check for package.json

if [ ! -f "package.json" ]; then echo "❌ Error: No package.json found. Please run this in a project root." exit 1 fi
if [ ! -f "package.json" ]; then echo "❌ Error: No package.json found. Please run this in a project root." exit 1 fi

Detect project type

Detect project type

PROJECT_TYPE="unknown" if grep -q '"next"' package.json 2>/dev/null || [ -f "next.config.js" ] || [ -f "next.config.ts" ] || [ -f "next.config.mjs" ]; then PROJECT_TYPE="nextjs" elif grep -q '"vite"' package.json 2>/dev/null || [ -f "vite.config.js" ] || [ -f "vite.config.ts" ] || [ -f "vite.config.mjs" ]; then PROJECT_TYPE="vite" fi
PROJECT_TYPE="unknown" if grep -q '"next"' package.json 2>/dev/null || [ -f "next.config.js" ] || [ -f "next.config.ts" ] || [ -f "next.config.mjs" ]; then PROJECT_TYPE="nextjs" elif grep -q '"vite"' package.json 2>/dev/null || [ -f "vite.config.js" ] || [ -f "vite.config.ts" ] || [ -f "vite.config.mjs" ]; then PROJECT_TYPE="vite" fi

Detect package manager

Detect package manager

PKG_MANAGER="npm" if [ -f "pnpm-lock.yaml" ]; then PKG_MANAGER="pnpm" elif [ -f "yarn.lock" ]; then PKG_MANAGER="yarn" elif [ -f "bun.lockb" ] || [ -f "bun.lock" ]; then PKG_MANAGER="bun" elif [ -f "package-lock.json" ]; then PKG_MANAGER="npm" fi
PKG_MANAGER="npm" if [ -f "pnpm-lock.yaml" ]; then PKG_MANAGER="pnpm" elif [ -f "yarn.lock" ]; then PKG_MANAGER="yarn" elif [ -f "bun.lockb" ] || [ -f "bun.lock" ]; then PKG_MANAGER="bun" elif [ -f "package-lock.json" ]; then PKG_MANAGER="npm" fi

Check Node.js version

Check Node.js version

NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1) if [ "$NODE_VERSION" -lt 18 ]; then echo "⚠️ Warning: Node.js >= 18 required. You have $(node -v)" fi
NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1) if [ "$NODE_VERSION" -lt 18 ]; then echo "⚠️ Warning: Node.js >= 18 required. You have $(node -v)" fi

Check for existing installation

Check for existing installation

EXISTING_INSTALL="no" if grep -q "@clubmed/trident-icons" package.json 2>/dev/null; then EXISTING_INSTALL="yes" fi
EXISTING_INSTALL="no" if grep -q "@clubmed/trident-icons" package.json 2>/dev/null; then EXISTING_INSTALL="yes" fi

Check for Tailwind 3.x

Check for Tailwind 3.x

TAILWIND_VERSION="" if [ -d "node_modules/tailwindcss" ]; then TAILWIND_VERSION=$(node -e "try{console.log(require('./node_modules/tailwindcss/package.json').version)}catch(e){}" 2>/dev/null) TAILWIND_MAJOR=$(echo "$TAILWIND_VERSION" | cut -d'.' -f1) if [ -n "$TAILWIND_MAJOR" ] && [ "$TAILWIND_MAJOR" -lt 4 ]; then echo "⚠️ Tailwind $TAILWIND_VERSION detected (requires 4.x) — see error handling section below" fi fi
TAILWIND_VERSION="" if [ -d "node_modules/tailwindcss" ]; then TAILWIND_VERSION=$(node -e "try{console.log(require('./node_modules/tailwindcss/package.json').version)}catch(e){}" 2>/dev/null) TAILWIND_MAJOR=$(echo "$TAILWIND_VERSION" | cut -d'.' -f1) if [ -n "$TAILWIND_MAJOR" ] && [ "$TAILWIND_MAJOR" -lt 4 ]; then echo "⚠️ Tailwind $TAILWIND_VERSION detected (requires 4.x) — see error handling section below" fi fi

Detect CSS file path

Detect CSS file path

CSS_FILE="" if [ "$PROJECT_TYPE" = "vite" ]; then for file in "src/index.css" "src/main.css" "src/styles.css" "src/global.css"; do if [ -f "$file" ]; then CSS_FILE="$file" break fi done [ -z "$CSS_FILE" ] && CSS_FILE="src/index.css" elif [ "$PROJECT_TYPE" = "nextjs" ]; then for file in "app/globals.css" "src/app/globals.css" "app/global.css" "styles/globals.css"; do if [ -f "$file" ]; then CSS_FILE="$file" break fi done if [ -z "$CSS_FILE" ]; then [ -d "src/app" ] && CSS_FILE="src/app/globals.css" || CSS_FILE="app/globals.css" fi fi
CSS_FILE="" if [ "$PROJECT_TYPE" = "vite" ]; then for file in "src/index.css" "src/main.css" "src/styles.css" "src/global.css"; do if [ -f "$file" ]; then CSS_FILE="$file" break fi done [ -z "$CSS_FILE" ] && CSS_FILE="src/index.css" elif [ "$PROJECT_TYPE" = "nextjs" ]; then for file in "app/globals.css" "src/app/globals.css" "app/global.css" "styles/globals.css"; do if [ -f "$file" ]; then CSS_FILE="$file" break fi done if [ -z "$CSS_FILE" ]; then [ -d "src/app" ] && CSS_FILE="src/app/globals.css" || CSS_FILE="app/globals.css" fi fi

Detect Tailwind config file

Detect Tailwind config file

TAILWIND_CONFIG="" if [ "$PROJECT_TYPE" = "vite" ]; then for file in "vite.config.ts" "vite.config.js" "vite.config.mjs"; do if [ -f "$file" ]; then TAILWIND_CONFIG="$file" break fi done [ -z "$TAILWIND_CONFIG" ] && TAILWIND_CONFIG="vite.config.ts" elif [ "$PROJECT_TYPE" = "nextjs" ]; then for file in "postcss.config.mjs" "postcss.config.js" "postcss.config.cjs"; do if [ -f "$file" ]; then TAILWIND_CONFIG="$file" break fi done [ -z "$TAILWIND_CONFIG" ] && TAILWIND_CONFIG="postcss.config.mjs" fi

**SHOW**: Detection results:
🔍 Project Detection Results:
Project Type: [PROJECT_TYPE] Package Manager: [PKG_MANAGER] Node.js Version: [VERSION] Existing Installation: [yes/no]
Files to create/modify:
  • components.json (new)
  • [CSS_FILE] (create or update)
  • [TAILWIND_CONFIG] (create or update)
  • tsconfig.json (update paths only, if exists)
This installation will: ✓ Configure Tailwind 4 for your project type ✓ Install design system (157 CSS variables + 25+ animations) ✓ Set up TypeScript path aliases ✓ Enable shadcn CLI for component installation

**PAUSE**: Ready to proceed with installation? [Continue]

---
TAILWIND_CONFIG="" if [ "$PROJECT_TYPE" = "vite" ]; then for file in "vite.config.ts" "vite.config.js" "vite.config.mjs"; do if [ -f "$file" ]; then TAILWIND_CONFIG="$file" break fi done [ -z "$TAILWIND_CONFIG" ] && TAILWIND_CONFIG="vite.config.ts" elif [ "$PROJECT_TYPE" = "nextjs" ]; then for file in "postcss.config.mjs" "postcss.config.js" "postcss.config.cjs"; do if [ -f "$file" ]; then TAILWIND_CONFIG="$file" break fi done [ -z "$TAILWIND_CONFIG" ] && TAILWIND_CONFIG="postcss.config.mjs" fi

**展示**：检测结果：
🔍 项目检测结果:
项目类型: [PROJECT_TYPE] 包管理器: [PKG_MANAGER] Node.js版本: [VERSION] 已存在安装: [yes/no]
需创建/修改的文件:
  • components.json (新建)
  • [CSS_FILE] (创建或更新)
  • [TAILWIND_CONFIG] (创建或更新)
  • tsconfig.json (仅更新路径，若存在)
本次安装将: ✓ 为你的项目类型配置Tailwind 4 ✓ 安装设计系统（157个CSS变量 + 25+种动画） ✓ 设置TypeScript路径别名 ✓ 启用shadcn CLI用于组件安装

**暂停**：准备继续安装吗？[继续]

---

Phase 2: Install Dependencies

阶段2：安装依赖

EXPLAIN: Installing Trident UI and its required dependencies. This includes the core library, icon package, and Tailwind 4 with the appropriate plugins for your project type.
DO: Running package installation...
bash
undefined
说明：安装Trident UI及其所需依赖，包括核心库、图标包，以及适配你项目类型的Tailwind 4插件。
执行：正在运行包安装...
bash
undefined

Vite project dependencies

Vite project dependencies

if [ "$PROJECT_TYPE" = "vite" ]; then [PKG_MANAGER] install @clubmed/trident-icons tailwindcss [PKG_MANAGER] install -D @tailwindcss/vite fi
if [ "$PROJECT_TYPE" = "vite" ]; then [PKG_MANAGER] install @clubmed/trident-icons tailwindcss [PKG_MANAGER] install -D @tailwindcss/vite fi

Next.js project dependencies

Next.js project dependencies

if [ "$PROJECT_TYPE" = "nextjs" ]; then [PKG_MANAGER] install @clubmed/trident-icons tailwindcss [PKG_MANAGER] install -D @tailwindcss/postcss postcss fi

**SHOW**: Installation progress and results:
📦 Installing packages...
✓ @clubmed/trident-icons@[version] ✓ tailwindcss@[version] [✓ @tailwindcss/vite@[version] (Vite only)] [✓ @tailwindcss/postcss@[version] (Next.js only)] [✓ postcss@[version] (Next.js only)]
Dependencies installed successfully!

---
if [ "$PROJECT_TYPE" = "nextjs" ]; then [PKG_MANAGER] install @clubmed/trident-icons tailwindcss [PKG_MANAGER] install -D @tailwindcss/postcss postcss fi

**展示**：安装进度与结果：
📦 正在安装包...
✓ @clubmed/trident-icons@[version] ✓ tailwindcss@[version] [✓ @tailwindcss/vite@[version] (仅Vite)] [✓ @tailwindcss/postcss@[version] (仅Next.js)] [✓ postcss@[version] (仅Next.js)]
依赖安装成功！

---

Phase 3: Create Configuration Files

阶段3：创建配置文件

EXPLAIN: Creating configuration files for shadcn CLI compatibility, Tailwind 4 integration, and TypeScript path aliases.
说明：创建兼容shadcn CLI、集成Tailwind 4及配置TypeScript路径别名的配置文件。

3.1 Create components.json

3.1 创建components.json

DO: Creating 
components.json
in project root. Set 
"rsc": true
for Next.js (React Server Components), 
"rsc": false
for Vite.
json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "[TAILWIND_CONFIG]",
    "css": "[CSS_FILE]",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@tridentui": "https://develop.trident-ui.pro.clubmed/r/{name}.json"
  }
}
SHOW: 
✓ components.json created
执行：在项目根目录创建
components.json
。Next.js项目设置
"rsc": true
（React Server Components），Vite项目设置
"rsc": false
。
json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "[TAILWIND_CONFIG]",
    "css": "[CSS_FILE]",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@tridentui": "https://develop.trident-ui.pro.clubmed/r/{name}.json"
  }
}
展示：
✓ components.json 创建完成

3.2 Create/Update CSS File

3.2 创建/更新CSS文件

DO: Setting up CSS imports in 
[CSS_FILE]
...
For Vite projects:
css
@import "tailwindcss";
@source '../src/**/*.{tsx,ts,jsx,js}';

/* Your custom styles below */
For Next.js projects:
css
@import "tailwindcss";
@source '../app/**/*.{tsx,ts}';
@source '../components/**/*.{tsx,ts}';

/* Your custom styles below */
SHOW: 
✓ [CSS_FILE] [created/updated]
执行：在
[CSS_FILE]
中设置CSS导入...
Vite项目：
css
@import "tailwindcss";
@source '../src/**/*.{tsx,ts,jsx,js}';

/* 你的自定义样式写在下方 */
Next.js项目：
css
@import "tailwindcss";
@source '../app/**/*.{tsx,ts}';
@source '../components/**/*.{tsx,ts}';

/* 你的自定义样式写在下方 */
展示：
✓ [CSS_FILE] [已创建/已更新]

3.3 Configure Tailwind 4

3.3 配置Tailwind 4

DO: Configuring Tailwind 4 for your project...
For Vite projects - updating 
[TAILWIND_CONFIG]
:
typescript
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
// ... other imports

export default defineConfig({
  // ... other config
  plugins: [
    // ... other plugins
    tailwindcss(),
  ],
});
For Next.js projects - creating 
postcss.config.mjs
:
javascript
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
SHOW: 
✓ Tailwind 4 configured for [PROJECT_TYPE]
执行：为你的项目配置Tailwind 4...
Vite项目 - 更新
[TAILWIND_CONFIG]
：
typescript
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
// ... 其他导入

export default defineConfig({
  // ... 其他配置
  plugins: [
    // ... 其他插件
    tailwindcss(),
  ],
});
Next.js项目 - 创建
postcss.config.mjs
：
javascript
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
展示：
✓ Tailwind 4 已为[PROJECT_TYPE]配置完成

3.4 Update TypeScript Configuration

3.4 更新TypeScript配置

DO: Adding path aliases to 
tsconfig.json
(if exists)...
json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"]
    }
  }
}
SHOW: 
✓ TypeScript paths configured
or 
⊘ Skipped (no tsconfig.json)
执行：为
tsconfig.json
添加路径别名（若存在）...
json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"]
    }
  }
}
展示：
✓ TypeScript路径已配置
或 
⊘ 已跳过（无tsconfig.json）

3.5 Install Design System

3.5 安装设计系统

EXPLAIN: Installing the Trident UI design system foundation. This provides 157 CSS variables (colors, typography, spacing, etc.), 25+ animations, and component base styles. This is installed via the shadcn CLI tool (used on-demand via npx, no separate installation needed).
DO: Running shadcn CLI to install design system...
bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/tailwind-config.json
SHOW: Design system installation results:
✓ Design system installed successfully!

What was added:
  • 157 CSS variables (colors, typography, spacing, radii, shadows, breakpoints)
  • 25+ animations (bounceEnter, slideDown, zoomIn, loaders, etc.)
  • Component base styles (buttons, forms, tabs, switches, etc.)
  • Custom Tailwind utilities (aspect ratios, line-clamp, grid areas)
  • Custom variants (hocus, hoverable, popover states)

These design tokens are now available in your styles:
  color: var(--color-saffron);
  font-size: var(--text-h2);
  animation: bounceEnter 0.3s ease-out;
说明：安装Trident UI设计系统基础框架，包含157个CSS变量（颜色、排版、间距等）、25+种动画及组件基础样式。通过shadcn CLI工具安装（按需通过npx使用，无需单独安装）。
执行：运行shadcn CLI安装设计系统...
bash
npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/tailwind-config.json
展示：设计系统安装结果：
✓ 设计系统安装成功！

已添加内容:
  • 157个CSS变量（颜色、排版、间距、圆角、阴影、断点）
  • 25+种动画（bounceEnter、slideDown、zoomIn、加载动画等）
  • 组件基础样式（按钮、表单、标签页、开关等）
  • 自定义Tailwind工具类（宽高比、行数限制、网格区域）
  • 自定义变体（hocus、hoverable、弹出框状态）

这些设计标记现已可在你的样式中使用:
  color: var(--color-saffron);
  font-size: var(--text-h2);
  animation: bounceEnter 0.3s ease-out;

Phase 4: Validation

阶段4：验证

EXPLAIN: Validating the installation to ensure everything is set up correctly.
DO: Running validation checks...
bash
undefined
说明：验证安装结果，确保所有配置正确完成。
执行：运行验证检查...
bash
undefined

Check packages installed

Check packages installed

test -d "node_modules/@clubmed/trident-icons" && echo "✓ trident-icons installed" || echo "❌ trident-icons missing" test -d "node_modules/tailwindcss" && echo "✓ tailwindcss installed" || echo "❌ tailwindcss missing"
test -d "node_modules/@clubmed/trident-icons" && echo "✓ trident-icons installed" || echo "❌ trident-icons missing" test -d "node_modules/tailwindcss" && echo "✓ tailwindcss installed" || echo "❌ tailwindcss missing"

Check config files

Check config files

test -f "components.json" && echo "✓ components.json created" || echo "❌ components.json missing" test -f "[CSS_FILE]" && echo "✓ CSS file exists" || echo "❌ CSS file missing" test -f "[TAILWIND_CONFIG]" && echo "✓ Tailwind config exists" || echo "❌ Tailwind config missing"
test -f "components.json" && echo "✓ components.json created" || echo "❌ components.json missing" test -f "[CSS_FILE]" && echo "✓ CSS file exists" || echo "❌ CSS file missing" test -f "[TAILWIND_CONFIG]" && echo "✓ Tailwind config exists" || echo "❌ Tailwind config missing"

Check design system

Check design system

if [ -f "components/ui/tailwind-config.tsx" ] || grep -rq --exclude-dir=node_modules "color-saffron" .; then echo "✓ Design system installed" else echo "⚠️ Design system may not be installed" fi

**SHOW**: Validation results:
✅ Validation Complete!
All checks passed: ✓ @clubmed/trident-icons installed ✓ tailwindcss installed ✓ components.json created ✓ [CSS_FILE] configured ✓ [TAILWIND_CONFIG] configured ✓ Trident UI styles imported ✓ Design system installed

---
if [ -f "components/ui/tailwind-config.tsx" ] || grep -rq --exclude-dir=node_modules "color-saffron" .; then echo "✓ Design system installed" else echo "⚠️ Design system may not be installed" fi

**展示**：验证结果：
✅ 验证完成！
所有检查通过: ✓ @clubmed/trident-icons 已安装 ✓ tailwindcss 已安装 ✓ components.json 已创建 ✓ [CSS_FILE] 已配置 ✓ [TAILWIND_CONFIG] 已配置 ✓ Trident UI样式已导入 ✓ 设计系统已安装

---

Phase 5: Next Steps

阶段5：后续步骤

EXPLAIN: Installation complete! Here's how to use Trident UI in your project.
SHOW: Usage examples and documentation:
✅ Installation Complete!

📦 Installed:
  - @clubmed/trident-icons@[version]
  - tailwindcss@[version]
  - Design system (157 CSS variables, 25+ animations, component styles)

🚀 Usage:

1. shadcn CLI (copy component to project):
   npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/button.json

   This copies the component source into your project for full customization.
   After copying, import and use it like any local component.

2. Use design tokens in your styles:
   .my-element {
     color: var(--color-saffron);
     font-size: var(--text-h2);
     border-radius: var(--radius-lg);
     animation: bounceEnter 0.3s ease-out;
   }

3. Browse available components:
   Visit the registry: https://develop.trident-ui.pro.clubmed/r
   Or check documentation: https://trident-ui.pro.clubmed

📚 Next Steps:
  • Add a component via shadcn CLI and test in your app
  • Explore the design system CSS variables
  • Browse the component registry for available components
  • Read the documentation for component props and usage

🎨 Design Tokens Available:
  Colors: --color-black, --color-ultramarine, --color-saffron, --color-wave, etc.
  Typography: --text-b6 through --text-h0 (body and heading scales)
  Spacing: --spacing (base unit)
  Radii: --radius-sm, --radius-md, --radius-lg, --radius-pill, --radius-full
  Animations: bounceEnter, slideDown, zoomIn, pulse, spin, and 20+ more

💡 Tips:
  • Use TypeScript for autocomplete on component props
  • Check Storybook examples for component usage patterns
  • The library uses Tailwind 4's CSS-only theming
  • All components are marked with 'use client' for Next.js compatibility
说明：安装完成！以下是在项目中使用Trident UI的方法。
展示：使用示例与文档：
✅ 安装完成！

📦 已安装:
  - @clubmed/trident-icons@[version]
  - tailwindcss@[version]
  - 设计系统（157个CSS变量、25+种动画、组件样式）

🚀 使用方法:

1. shadcn CLI（将组件复制到项目）:
   npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/button.json

   此命令将组件源代码复制到你的项目中，实现完全自定义。
   复制完成后，可像导入本地组件一样使用它。

2. 在样式中使用设计标记:
   .my-element {
     color: var(--color-saffron);
     font-size: var(--text-h2);
     border-radius: var(--radius-lg);
     animation: bounceEnter 0.3s ease-out;
   }

3. 浏览可用组件:
   访问注册表: https://develop.trident-ui.pro.clubmed/r
   或查看文档: https://trident-ui.pro.clubmed

📚 后续步骤:
  • 通过shadcn CLI添加组件并在应用中测试
  • 探索设计系统的CSS变量
  • 浏览组件注册表查看可用组件
  • 阅读文档了解组件属性与使用方法

🎨 可用设计标记:
  颜色: --color-black, --color-ultramarine, --color-saffron, --color-wave等
  排版: --text-b6至--text-h0（正文与标题层级）
  间距: --spacing（基础单位）
  圆角: --radius-sm, --radius-md, --radius-lg, --radius-pill, --radius-full
  动画: bounceEnter, slideDown, zoomIn, pulse, spin及20+种其他动画

💡 提示:
  • 使用TypeScript可获得组件属性的自动补全
  • 查看Storybook示例了解组件使用模式
  • 该库使用Tailwind 4的纯CSS主题方案
  • 所有组件均标记'use client'以兼容Next.js

Error Handling

错误处理

Partial Installation Detected

检测到部分安装

If existing Trident UI installation found:
  • Offer to update existing files or skip
  • Show diff of changes to be made
  • Provide option to force reinstall
若发现已存在Trident UI安装:
  • 提供更新现有文件或跳过的选项
  • 展示待修改内容的差异
  • 提供强制重新安装的选项

Unknown Project Type

未知项目类型

If neither Vite nor Next.js detected:
⚠️  Unknown project type detected.

I couldn't automatically detect if this is a Vite or Next.js project.
Please specify your project type:
  1. Vite
  2. Next.js
  3. Other (show manual instructions)

[User selects option]
若未检测到Vite或Next.js:
⚠️  检测到未知项目类型。

我无法自动检测这是Vite还是Next.js项目。
请指定你的项目类型:
  1. Vite
  2. Next.js
  3. 其他（显示手动安装说明）

[用户选择选项]

Tailwind 3.x Detected

检测到Tailwind 3.x

If Tailwind 3.x is installed:
⚠️  Tailwind 3.x detected!

Trident UI requires Tailwind 4.x. This is a major version upgrade with breaking changes.

Options:
  1. Upgrade to Tailwind 4 (recommended)
  2. Show migration guide
  3. Cancel installation

[User selects option]
若已安装Tailwind 3.x:
⚠️  检测到Tailwind 3.x!

Trident UI需要Tailwind 4.x版本。这是包含破坏性变更的重大版本升级。

选项:
  1. 升级到Tailwind 4（推荐）
  2. 显示迁移指南
  3. 取消安装

[用户选择选项]

Node.js Version Too Low

Node.js版本过低

If Node.js < 18:
❌ Node.js version too low

Trident UI requires Node.js >= 18. You have [current version].

Please upgrade Node.js and try again:
  https://nodejs.org/
若Node.js < 18:
❌ Node.js版本过低

Trident UI需要Node.js >= 18。你当前的版本是[当前版本]。

请升级Node.js后重试:
  https://nodejs.org/

Permission Errors

权限错误

If file write fails:
❌ Permission denied writing to [file]

Please ensure you have write permissions to the project directory.
You may need to run with appropriate permissions.
若文件写入失败:
❌ 写入[file]时权限被拒绝

请确保你拥有项目目录的写入权限。
你可能需要使用适当的权限运行此命令。

Guardrails

防护规则

  • Never overwrite files without asking: Always check if files exist and ask before overwriting
  • Validate before proceeding: Check all preflight conditions before making changes
  • Preserve existing content: When updating CSS or config files, preserve user's existing content
  • Clear error messages: Provide actionable error messages with recovery steps
  • Graceful degradation: If optional steps fail (like TypeScript config), continue but warn the user
  • Version compatibility: Check for conflicting versions and warn appropriately
  • Rollback guidance: If installation fails midway, provide steps to clean up
  • 未经询问绝不覆盖文件: 始终检查文件是否存在，覆盖前需征得同意
  • 执行前先验证: 在进行修改前检查所有预检条件
  • 保留现有内容: 更新CSS或配置文件时，保留用户的现有内容
  • 清晰的错误提示: 提供可操作的错误信息及恢复步骤
  • 优雅降级: 若可选步骤失败（如TypeScript配置），继续执行但向用户发出警告
  • 版本兼容性: 检查冲突版本并适当发出警告
  • 回滚指导: 若安装中途失败，提供清理步骤

Troubleshooting

故障排除

Components not styled correctly

组件样式未正确显示

Check that:
  1. CSS import is present in your main CSS file
  2. Tailwind 4 is configured correctly for your project type
  3. Design system was installed via shadcn CLI
  4. Build/dev server was restarted after installation
检查以下内容:
  1. 主CSS文件中是否存在CSS导入
  2. Tailwind 4是否针对你的项目类型正确配置
  3. 设计系统是否已通过shadcn CLI安装
  4. 安装后是否重启了构建/开发服务器

TypeScript errors on imports

导入时出现TypeScript错误

Check that:
  1. tsconfig.json
    has correct path aliases
  2. TypeScript version is compatible (>= 4.9)
检查以下内容:
  1. tsconfig.json
    是否包含正确的路径别名
  2. TypeScript版本是否兼容（>= 4.9）

Tailwind classes not working

Tailwind类无法生效

Check that:
  1. @source
    directive includes your component paths
  2. Tailwind 4 postcss plugin is configured
  3. CSS file is imported in your app entry point
检查以下内容:
  1. @source
    指令是否包含你的组件路径
  2. Tailwind 4 postcss插件是否已配置
  3. CSS文件是否已在应用入口导入

Design tokens not available

设计标记不可用

Check that:
  1. npx shadcn add tailwind-config.json
    completed successfully
  2. Generated files are in your project
  3. Build/dev server was restarted
For more help, visit: https://trident-ui.pro.clubmed/troubleshooting
检查以下内容:
  1. npx shadcn add tailwind-config.json
    是否执行成功
  2. 生成的文件是否在你的项目中
  3. 是否已重启构建/开发服务器
如需更多帮助，请访问: https://trident-ui.pro.clubmed/troubleshooting