mcpField
C
c4-component

c4-component

github.com/sickn33开发48.7k233 次安装今天更新
代码仓库

关于 c4-component

用于编写 C4 组件级软件文档的技能模板,指导团队描述组件边界、接口、依赖和 Mermaid 图;模板占位内容需要结合具体项目填写。

主要功能

  1. 01组件边界指导
  2. 02接口与依赖文档
  3. 03Mermaid 组件图
  4. 04组件主索引模板

适用场景

  1. 01将代码文件归并为组件
  2. 02划分 API 层组件边界
  3. 03编写组件接口文档
  4. 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