component-guide

🌐 Language Policy (i18n)

Language Detection: Detect the language of the user's input.

Response Consistency: Always respond in the same language as the user's input (e.g., if the user asks in English, output the report and suggestions in English; if in Chinese, use Chinese).

Core Logic: The internal rules and design specs (like spacing, colors) remain the same regardless of the language.

For English Users: When recommending component reuse vs. creation, explain clearly why one approach is preferred:

• Reuse existing: Explain how the existing component already meets their needs, or how it can be extended with minimal changes
• Create new: Explain what unique functionality requires a new component, and how it will integrate with existing ones

组件使用手册技能

技能概述

智能组件管理助手，根据用户指令自动判断是否创建新组件、复用现有组件，或在需要时询问用户创建决策。

核心功能

1. 组件智能识别 - 分析用户需求，识别所需组件类型
2. 现有组件检查 - 检查代码库中是否有可复用的组件
3. 创建决策逻辑 - 根据用户指令决定是否创建新组件
4. 组件规范生成 - 按照设计系统规范创建组件

设计系统上下文

基于以下设计系统规范：

技术栈

• React + TypeScript + Tailwind CSS v4 + Radix UI
• Tailwind v4 无配置特性：本项目采用 Tailwind v4，所有自定义 Token 均通过 CSS 变量在 globals.css 中定义。生成组件时，直接使用 bg-primary、text-te-md 或 z-toast 等变量别名，严禁生成任何需配置在 tailwind.config.js 中的类名。
• 设计系统：基于 CSS 变量的自定义设计令牌系统
• 组件库：使用 Radix UI 作为基础组件，配合自定义样式

品牌个性

• 专业、可信赖、现代、创新、简洁、高效、友好、易用

视觉规范

• 色彩系统：遵循主色调（亮色模式蓝色/暗色模式紫罗兰色）和辅助色（灰色）
• 字体：PingFang SC字体，支持中英文显示
• 布局：响应式设计，移动端优先
• 主题：支持亮色/暗色模式

决策流程

1. 需求分析阶段

用户指令 → 提取关键词 → 识别组件类型 → 检查现有组件

2. 组件匹配逻辑

• 完全匹配: 组件名称/功能与需求完全一致 → 直接复用
• 部分匹配: 功能相似但需要调整 → 询问是否修改现有组件
• 无匹配: 全新功能需求 → 进入创建决策流程

3. 创建决策规则

IF 用户明确说"创建新组件" THEN
  创建新组件
ELSE IF 用户说"使用组件"或"添加组件" THEN
  检查现有组件 → 存在则复用，不存在则创建
ELSE IF 用户描述功能但未指定组件 THEN
  检查现有组件 → 存在则复用，不存在则询问用户
ELSE
  默认复用现有组件或询问用户

4. 询问模板

当需要用户决策时，使用以下模板：

检测到您需要 [组件功能描述] 功能。

现有组件检查：
- ✅ [现有组件1] - 功能相似度: 80%
- ❌ [现有组件2] - 功能不匹配

选项：
1. 复用现有组件 [组件名称] 并进行调整
2. 创建新的专用组件 [建议组件名称]
3. 使用组合组件方案 [组件A + 组件B]

您希望选择哪种方案？