Toolverse
All skills

c4-component

by sickn33

Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
sickn33
Category
Frontend
Views
2

About this skill

Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships. Creates component diagrams and documentation. Use when synthesizing code-level documentation into logical components.

How to use

  1. Przygotuj dokumentację kodu, którą chcesz przekształcić w widok komponentów C4. Zbierz informacje o funkcjach, modułach i ich wzajemnych zależnościach na poziomie kodu.

  2. Wyjaśnij cel analizy — określ, które komponenty chcesz wyodrębnić, jakie są ograniczenia projektowe i jakie dane wejściowe masz dostępne (np. struktura repozytorium, dokumentacja API, diagramy przepływu).

  3. Zastosuj najlepsze praktyki C4 dla poziomu komponentów — zdefiniuj granice każdego komponentu, opisz jego typ (aplikacja, serwis, biblioteka), technologie oraz cel biznesowy, który spełnia.

  4. Zdokumentuj interfejsy komponentów, wskazując protokoły komunikacji (REST, GraphQL, gRPC, eventy), operacje dostępne oraz parametry i typy zwracane.

  5. Mapuj zależności — wymień komponenty wewnętrzne, które są używane, oraz systemy zewnętrzne, z którymi komponenty się integrują.

  6. Wygeneruj diagram Mermaid C4Component, który wizualizuje wszystkie komponenty w ramach kontenera, ich interfejsy i relacje — użyj składni C4Component do poprawnego renderowania.

Related skills

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

browser-automation

by browserbase

Automate web browser interactions using natural language via CLI commands. Use when the user asks to browse websites, navigate web pages, extract data from websites, take screenshots, fill forms, click buttons, or interact with web applications. Triggers include \

Frontend
21175

keyword-research

by openclaw

Discovers high-value keywords with search intent analysis, difficulty assessment, and content opportunity mapping. Essential for starting any SEO or GEO content strategy.

Frontend
24138

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

senior-fullstack

by davila7

Comprehensive fullstack development skill for building complete web applications with React, Next.js, Node.js, GraphQL, and PostgreSQL. Includes project scaffolding, code quality analysis, architecture patterns, and complete tech stack guidance. Use when building new projects,

Frontend
2896

bubbletea

by hmans

Browse Bubbletea TUI framework documentation and examples. Use when working with Bubbletea components, models, commands, or building terminal user interfaces in Go.

Frontend
2158