Back to Details

integrate-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Integrate Claude Skill into Project Guidelines

将Claude Skill集成到项目指南中

Adapt and integrate a Claude global skill into your project's development guidelines (not directly into project code).
将Claude全局Skill适配并集成到项目的开发指南中（而非直接集成到项目代码）。

Usage

使用方法

/trellis:integrate-skill <skill-name>
Examples:
/trellis:integrate-skill frontend-design
/trellis:integrate-skill mcp-builder
/trellis:integrate-skill <skill-name>
示例:
/trellis:integrate-skill frontend-design
/trellis:integrate-skill mcp-builder

Core Principle

核心原则

[!] Important: The goal of skill integration is to update development guidelines, not to generate project code directly.
  • Guidelines content -> Write to 
    .trellis/spec/cli/{target}/doc.md
  • Code examples -> Place in 
    .trellis/spec/cli/{target}/examples/skills/<skill-name>/
  • Example files -> Use 
    .template
    suffix (e.g., 
    component.tsx.template
    ) to avoid IDE errors
Where 
{target}
is 
frontend
or 
backend
, determined by skill type.
[!] 重要提示：Skill集成的目标是更新开发指南，而非直接生成项目代码。
  • 指南内容 -> 写入 
    .trellis/spec/cli/{target}/doc.md
  • 代码示例 -> 放置在 
    .trellis/spec/cli/{target}/examples/skills/<skill-name>/
  • 示例文件 -> 使用 
    .template
    后缀（如 
    component.tsx.template
    ）以避免IDE报错
其中 
{target}
根据Skill类型分为 
frontend
或 
backend
。

Execution Steps

执行步骤

1. Read Skill Content

1. 读取Skill内容

bash
openskills read <skill-name>
If the skill doesn't exist, prompt user to check available skills:
bash
undefined
bash
openskills read <skill-name>
若Skill不存在，提示用户查看可用Skill：
bash
undefined

Available skills are listed in AGENTS.md under <available_skills>

可用Skill列在AGENTS.md的<available_skills>部分

undefined
undefined

2. Determine Integration Target

2. 确定集成目标

Based on skill type, determine which guidelines to update:
Skill CategoryIntegration Target
UI/Frontend (
frontend-design
, 
web-artifacts-builder
)
.trellis/spec/cli/frontend/
Backend/API (
mcp-builder
)
.trellis/spec/cli/backend/
Documentation (
doc-coauthoring
, 
docx
, 
pdf
)
.trellis/
or create dedicated guidelines
Testing (
webapp-testing
)
.trellis/spec/cli/frontend/
(E2E)
根据Skill类型，确定需要更新的指南：
Skill类别集成目标
UI/前端（
frontend-design
, 
web-artifacts-builder
）
.trellis/spec/cli/frontend/
后端/API（
mcp-builder
）
.trellis/spec/cli/backend/
文档（
doc-coauthoring
, 
docx
, 
pdf
）
.trellis/
或创建专用指南
测试（
webapp-testing
）
.trellis/spec/cli/frontend/
（端到端测试）

3. Analyze Skill Content

3. 分析Skill内容

Extract from the skill:
  • Core concepts: How the skill works and key concepts
  • Best practices: Recommended approaches
  • Code patterns: Reusable code templates
  • Caveats: Common issues and solutions
从Skill中提取以下信息：
  • 核心概念：Skill的工作原理和关键概念
  • 最佳实践：推荐的实施方法
  • 代码模式：可复用的代码模板
  • 注意事项：常见问题及解决方案

4. Execute Integration

4. 执行集成

4.1 Update Guidelines Document

4.1 更新指南文档

Add a new section to the corresponding 
doc.md
:
markdown
@@@section:skill-<skill-name>
在对应的
doc.md
中添加新章节：
markdown
@@@section:skill-<skill-name>

# <Skill Name> Integration Guide

# <Skill名称> 集成指南

Overview

概述

[Core functionality and use cases of the skill]
[Skill的核心功能和使用场景]

Project Adaptation

项目适配

[How to use this skill in the current project]
[如何在当前项目中使用该Skill]

Usage Steps

使用步骤

  1. [Step 1]
  2. [Step 2]
  1. [步骤1]
  2. [步骤2]

Caveats

注意事项

  • [Project-specific constraints]
  • [Differences from default behavior]
  • [项目特定约束]
  • [与默认行为的差异]

Reference Examples

参考示例

See 
examples/skills/<skill-name>/
@@@/section:skill-<skill-name>
undefined
参见
examples/skills/<skill-name>/
@@@/section:skill-<skill-name>
undefined

4.2 Create Examples Directory (if code examples exist)

4.2 创建示例目录（若存在代码示例）

bash
undefined
bash
undefined

Directory structure ({target} = frontend or backend)

目录结构（{target} = frontend或backend）

.trellis/spec/cli/{target}/ |-- doc.md # Add skill-related section |-- index.md # Update index +-- examples/ +-- skills/ +-- <skill-name>/ |-- README.md # Example documentation |-- example-1.ts.template # Code example (use .template suffix) +-- example-2.tsx.template

**File naming conventions**:
- Code files: `<name>.<ext>.template` (e.g., `component.tsx.template`)
- Config files: `<name>.config.template` (e.g., `tailwind.config.template`)
- Documentation: `README.md` (normal suffix)
.trellis/spec/cli/{target}/ |-- doc.md # 添加Skill相关章节 |-- index.md # 更新索引 +-- examples/ +-- skills/ +-- <skill-name>/ |-- README.md # 示例文档 |-- example-1.ts.template # 代码示例（使用.template后缀） +-- example-2.tsx.template

**文件命名规范**:
- 代码文件：`<name>.<ext>.template`（例如 `component.tsx.template`）
- 配置文件：`<name>.config.template`（例如 `tailwind.config.template`）
- 文档：`README.md`（正常后缀）

4.3 Update Index File

4.3 更新索引文件

Add to the Quick Navigation table in 
index.md
:
markdown
| <Skill-related task> | <Section name> | `skill-<skill-name>` |
在
index.md
的快速导航表格中添加条目：
markdown
| <Skill相关任务> | <章节名称> | `skill-<skill-name>` |

5. Generate Integration Report

5. 生成集成报告

Skill Integration Report: 
<skill-name>

Skill集成报告：
<skill-name>

# Overview

# 概述

  • Skill description: [Functionality description]
  • Integration target: 
    .trellis/spec/cli/{target}/
  • Skill描述：[功能说明]
  • 集成目标：
    .trellis/spec/cli/{target}/

# Tech Stack Compatibility

# 技术栈兼容性

Skill RequirementProject StatusCompatibility
[Tech 1][Project tech][OK]/[!]/[X]
Skill要求项目现状兼容性
[技术1][项目技术栈][兼容]/[需调整]/[不兼容]

# Integration Locations

# 集成位置

TypePath
Guidelines doc
.trellis/spec/cli/{target}/doc.md
(section: 
skill-<name>
)
Code examples
.trellis/spec/cli/{target}/examples/skills/<name>/
Index update
.trellis/spec/cli/{target}/index.md
{target}
= 
frontend
or 
backend
类型路径
指南文档
.trellis/spec/cli/{target}/doc.md
（章节：
skill-<name>
）
代码示例
.trellis/spec/cli/{target}/examples/skills/<name>/
索引更新
.trellis/spec/cli/{target}/index.md
{target}
= 
frontend
或 
backend

# Dependencies (if needed)

# 依赖项（如有需要）

bash
undefined
bash
undefined

Install required dependencies (adjust for your package manager)

安装所需依赖项（根据包管理器调整）

npm install <package>
npm install <package>

or

或

pnpm add <package>
pnpm add <package>

or

或

yarn add <package>
undefined
yarn add <package>
undefined

[OK] Completed Changes

[完成] 已完成的更改

  • Added 
    @@@section:skill-<name>
    section to 
    doc.md
  • Added index entry to 
    index.md
  • Created example files in 
    examples/skills/<name>/
  • Example files use 
    .template
    suffix
  • 向
    doc.md
    添加
    @@@section:skill-<name>
    章节
  • 向
    index.md
    添加索引条目
  • 在
    examples/skills/<name>/
    中创建示例文件
  • 示例文件使用
    .template
    后缀

# Related Guidelines

# 相关指南

  • [Existing related section IDs]
  • [现有相关章节ID]

6. Optional: Create Usage Command

6. 可选：创建使用命令

If this skill is frequently used, create a shortcut command:
bash
/trellis:create-command use-<skill-name> Use <skill-name> skill following project guidelines
如果该Skill频繁使用，可创建快捷命令：
bash
/trellis:create-command use-<skill-name> 按照项目指南使用<skill-name> Skill

Common Skill Integration Reference

常见Skill集成参考

SkillIntegration TargetExamples Directory
frontend-design
cli/frontend
examples/skills/frontend-design/
mcp-builder
cli/backend
examples/skills/mcp-builder/
webapp-testing
cli/frontend
examples/skills/webapp-testing/
doc-coauthoring
.trellis/
N/A (documentation workflow only)
Skill集成目标示例目录
frontend-design
cli/frontend
examples/skills/frontend-design/
mcp-builder
cli/backend
examples/skills/mcp-builder/
webapp-testing
cli/frontend
examples/skills/webapp-testing/
doc-coauthoring
.trellis/
无（仅文档工作流）

Example: Integrating 
mcp-builder
Skill

示例：集成
mcp-builder
Skill

Directory Structure

目录结构

.trellis/spec/cli/backend/
|-- doc.md                           # Add MCP section
|-- index.md                         # Add index entry
+-- examples/
    +-- skills/
        +-- mcp-builder/
            |-- README.md
            |-- server.ts.template
            |-- tools.ts.template
            +-- types.ts.template
.trellis/spec/cli/backend/
|-- doc.md                           # 添加MCP章节
|-- index.md                         # 添加索引条目
+-- examples/
    +-- skills/
        +-- mcp-builder/
            |-- README.md
            |-- server.ts.template
            |-- tools.ts.template
            +-- types.ts.template

New Section in doc.md

doc.md中的新章节

markdown
@@@section:skill-mcp-builder
markdown
@@@section:skill-mcp-builder

# MCP Server Development Guide

# MCP服务器开发指南

Overview

概述

Create LLM-callable tool services using MCP (Model Context Protocol).
使用MCP（Model Context Protocol）创建可被LLM调用的工具服务。

Project Adaptation

项目适配

  • Place services in a dedicated directory
  • Follow existing TypeScript and type definition conventions
  • Use project's logging system
  • 将服务放置在专用目录中
  • 遵循现有的TypeScript和类型定义约定
  • 使用项目的日志系统

Reference Examples

参考示例

See 
examples/skills/mcp-builder/
@@@/section:skill-mcp-builder
undefined
参见
examples/skills/mcp-builder/
@@@/section:skill-mcp-builder
undefined