关于 c4-component
用于编写 C4 组件级软件文档的技能模板,指导团队描述组件边界、接口、依赖和 Mermaid 图;模板占位内容需要结合具体项目填写。
主要功能
- 01组件边界指导
- 02接口与依赖文档
- 03Mermaid 组件图
- 04组件主索引模板
适用场景
- 01将代码文件归并为组件
- 02划分 API 层组件边界
- 03编写组件接口文档
- 04创建组件关系图
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ sickn33/ agentic-awesome-skills --skill c4-component安装后在 Claude Code 中输入/c4-component确认已加载。
详细介绍
C4 组件级别:[组件名称]
适用场景
- 处理 c4 组件级别:[组件名称]相关任务或工作流
- 需要 c4 组件级别:[组件名称]方面的指导、最佳实践或检查清单
不适用场景
- 任务与 c4 组件级别:[组件名称]无关
- 需要使用超出此范围的其他领域或工具
说明
- 明确目标、约束和所需输入。
- 应用相关最佳实践并验证结果。
- 提供可执行的步骤和验证方法。
概览
- 名称:[组件名称]
- 描述:[组件用途的简短说明]
- 类型:[组件类型:应用程序、服务、库等]
- 技术:[主要使用的技术]
用途
[详细说明此组件的功能及其解决的问题]
软件功能
- [功能 1]:[描述]
- [功能 2]:[描述]
- [功能 3]:[描述]
代码元素
此组件包含以下代码级元素:
- c4-code-file-1.md - [描述]
- c4-code-file-2.md - [描述]
接口
[接口名称]
- 协议:[REST/GraphQL/gRPC/事件等]
- 描述:[此接口提供的功能]
- 操作:
operationName(params): ReturnType- [描述]
依赖项
使用的组件
- [组件名称]:[使用方式]
外部系统
- [外部系统]:[使用方式]
组件图
使用正确的 Mermaid C4Component 语法。组件图展示单个容器内部的组件:
C4Component
title Component Diagram for [Container Name]
Container_Boundary(container, "Container Name") {
Component(component1, "Component 1", "Type", "Description")
Component(component2, "Component 2", "Type", "Description")
ComponentDb(component3, "Component 3", "Database", "Description")
}
Container_Ext(externalContainer, "External Container", "Description")
System_Ext(externalSystem, "External System", "Description")
Rel(component1, component2, "Uses")
Rel(component2, component3, "Reads from and writes to")
Rel(component1, externalContainer, "Uses", "API")
Rel(component2, externalSystem, "Uses", "API")
关键原则(来自 c4model.com):
- 展示单个容器内部的组件(深入某个容器)
- 聚焦于逻辑组件及其职责
- 展示组件接口(它们提供的功能)
- 展示组件之间如何交互
- 包含外部依赖项(其他容器、外部系统)
主组件索引模板
# C4 Component Level: System Overview
## System Components
### [Component 1]
- **Name**: [Component name]
- **Description**: [Short description]
- **Documentation**: c4-component-name-1.md
### [Component 2]
- **Name**: [Component name]
- **Description**: [Short description]
- **Documentation**: c4-component-name-2.md
## Component Relationships
[Mermaid diagram showing all components and their relationships]
交互示例
- “将所有 c4-code-*.md 文件整合为逻辑组件”
- “为身份验证和授权代码定义组件边界”
- “为 API 层创建组件级文档”
- “识别组件接口并创建组件图”
- “将数据库访问代码归类为组件并记录其关系”
关键区别
- 与 C4-Code Agent 的区别:将多个代码文件整合为组件;Code Agent 记录单个代码元素
- 与 C4-Container Agent 的区别:聚焦于逻辑分组;Container Agent 将组件映射到部署单元
- 与 C4-Context Agent 的区别:提供组件级细节;Context Agent 创建高层系统图
输出示例
整合组件时,请提供:
- 清晰的组件边界及其依据
- 描述性组件名称及用途
- 每个组件的完整功能列表
- 包含协议和操作的完整接口文档
- 指向所有已包含 c4-code-*.md 文件的链接
- 展示组件关系的 Mermaid 组件图
- 包含所有组件的主组件索引
- 所有组件均采用一致的文档格式
限制
- 仅当任务明确符合上述范围时才使用此技能。
- 不要将输出视为针对具体环境进行验证、测试或专家审核的替代品。
- 如果缺少所需输入、权限、安全边界或成功标准,请暂停并请求澄清。
评论
支持 Markdown