Pular para o conteúdo
Skillpedia
Documentação48 mil · #2485

c4-component

Ajuda seu agente a criar documentação C4 no nível de componente. Ele combina a documentação do código para descrever componentes, suas interfaces e como eles se conectam.

O que ela faz

Esta ferramenta ajuda a organizar e documentar as partes (componentes) de um sistema de software. Ela define o que cada parte faz, como ela se comunica com outras partes e quais tecnologias usa.

Quando usar

  • ✓Quando você precisa entender ou descrever as peças de um software.
  • ✓Ao criar um mapa visual das interações entre as partes do software.
  • ✓Para documentar as funcionalidades e conexões de um componente específico.

Exemplo do que pedir para a IA

“Crie a documentação do componente 'Serviço de Autenticação', incluindo suas interfaces e dependências.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/c4-component/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/c4-component/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

A ferramenta analisa as descrições das partes do código e as organiza em componentes lógicos. Ela define os limites, as funções e como esses componentes se conectam, gerando diagramas e descrições.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill c4-component

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/c4-component/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Nível de Componente C4: [Nome do Componente]

Use esta habilidade quando

  • Trabalhando em tarefas ou fluxos de trabalho de nível de componente C4: [nome do componente]
  • Precisando de orientação, melhores práticas ou checklists para nível de componente C4: [nome do componente]

Não use esta habilidade quando

  • A tarefa não estiver relacionada ao nível de componente C4: [nome do componente]
  • Você precisar de um domínio ou ferramenta diferente fora deste escopo

Instruções

  • Clarifique objetivos, restrições e entradas necessárias.
  • Aplique as melhores práticas relevantes e valide os resultados.
  • Forneça etapas acionáveis e verificação.

Visão Geral

  • Nome: [Nome do Componente]
  • Descrição: [Breve descrição do propósito do componente]
  • Tipo: [Tipo de componente: Aplicação, Serviço, Biblioteca, etc.]
  • Tecnologia: [Principais tecnologias utilizadas]

Propósito

[Descrição detalhada do que este componente faz e quais problemas ele resolve]

Funcionalidades de Software

Elementos de Código

Este componente contém os seguintes elementos em nível de código:

  • c4-code-file-1.md - [Descrição]
  • c4-code-file-2.md - [Descrição]

Interfaces

[Nome da Interface]

  • Protocolo: [REST/GraphQL/gRPC/Eventos/etc.]
  • Descrição: [O que esta interface fornece]
  • Operações:
    • operationName(params): ReturnType - [Descrição]

Dependências

Componentes Utilizados

  • [Nome do Componente]: [Como é usado]

Sistemas Externos

  • [Sistema Externo]: [Como é usado]

Diagrama de Componente

Use a sintaxe C4Component do Mermaid apropriada. Diagramas de componentes mostram componentes dentro de um único contêiner:

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")

**Key Principles** (from [c4model.com](https://c4model.com/diagrams/component)):

- Show components **within a single container** (zoom into one container)
- Focus on **logical components** and their responsibilities
- Show **component interfaces** (what they expose)
- Show how components **interact** with each other
- Include **external dependencies** (other containers, external systems)

Modelo de Índice Mestre de Componentes

# 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]

Exemplos de Interações

  • "Sintetizar todos os arquivos c4-code-*.md em componentes lógicos"
  • "Definir limites de componentes para o código de autenticação e autorização"
  • "Criar documentação em nível de componente para a camada de API"
  • "Identificar interfaces de componentes e criar diagramas de componentes"
  • "Agrupar código de acesso a banco de dados em componentes e documentar seus relacionamentos"

Principais Distinções

  • vs Agente C4-Code: Sintetiza múltiplos arquivos de código em componentes; o agente de código documenta elementos de código individuais
  • vs Agente C4-Container: Foca no agrupamento lógico; o agente de contêiner mapeia componentes para unidades de implantação
  • vs Agente C4-Context: Fornece detalhes em nível de componente; o agente de contexto cria diagramas de sistema de alto nível

Exemplos de Saída

Ao sintetizar componentes, forneça:

  • Limites claros de componentes com justificativa
  • Nomes e propósitos descritivos de componentes
  • Listas abrangentes de funcionalidades para cada componente
  • Documentação completa de interfaces com protocolos e operações
  • Links para todos os arquivos c4-code-*.md contidos
  • Diagramas de componentes do Mermaid mostrando relacionamentos
  • Índice mestre de componentes com todos os componentes
  • Formato de documentação consistente em todos os componentes

Limitações

  • Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.

…

Perguntas frequentes

Qual a diferença entre esta ferramenta e uma que documenta código?

Esta ferramenta agrupa várias partes de código em 'componentes' maiores e documenta esses componentes. A outra foca em documentar cada pedacinho de código individualmente.

O que é um 'componente' neste contexto?

Um componente é uma parte lógica do software que realiza uma função específica, como um serviço de login, um sistema de pagamentos, etc.

Para que servem os diagramas gerados?

Os diagramas mostram visualmente como os componentes de um sistema se encaixam e interagem uns com os outros dentro de uma unidade maior (container).

Detalhes

Descrição original do autor

Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub
48 mil
Posição no ranking
#2485
Licença
MIT
Atualizada em
15/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas