.claude/skills/create-oo-component-documentation/SKILL.md
Create comprehensive, standardized documentation for object-oriented components following industry best practices and architectural documentation standards.
npx skillsauth add gitdevaldo/tanyahukum create-oo-component-documentationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Create comprehensive documentation for the object-oriented component(s) at: ${input:ComponentPath}.
Analyze the component by examining code in the provided path. If folder, analyze all source files. If single file, treat as main component and analyze related files in same directory.
Generate well-structured Markdown with clear heading hierarchy, code blocks, tables, bullet points, and proper formatting for readability and maintainability.
The documentation should be saved in the /docs/components/ directory and named according to the convention: [component-name]-documentation.md.
The documentation file must follow the template below, ensuring that all sections are filled out appropriately. The front matter for the markdown should be structured correctly as per the example following:
---
title: [Component Name] - Technical Documentation
component_path: `${input:ComponentPath}`
version: [Optional: e.g., 1.0, Date]
date_created: [YYYY-MM-DD]
last_updated: [Optional: YYYY-MM-DD]
owner: [Optional: Team/Individual responsible for this component]
tags: [Optional: List of relevant tags or categories, e.g., `component`,`service`,`tool`,`infrastructure`,`documentation`,`architecture` etc]
---
# [Component Name] Documentation
[A short concise introduction to the component and its purpose within the system.]
## 1. Component Overview
### Purpose/Responsibility
- OVR-001: State component's primary responsibility
- OVR-002: Define scope (included/excluded functionality)
- OVR-003: Describe system context and relationships
## 2. Architecture Section
- ARC-001: Document design patterns used (Repository, Factory, Observer, etc.)
- ARC-002: List internal and external dependencies with purposes
- ARC-003: Document component interactions and relationships
- ARC-004: Include visual diagrams (UML class, sequence, component)
- ARC-005: Create mermaid diagram showing component structure, relationships, and dependencies
### Component Structure and Dependencies Diagram
Include a comprehensive mermaid diagram that shows:
- **Component structure** - Main classes, interfaces, and their relationships
- **Internal dependencies** - How components interact within the system
- **External dependencies** - External libraries, services, databases, APIs
- **Data flow** - Direction of dependencies and interactions
- **Inheritance/composition** - Class hierarchies and composition relationships
```mermaid
graph TD
subgraph "Component System"
A[Main Component] --> B[Internal Service]
A --> C[Internal Repository]
B --> D[Business Logic]
C --> E[Data Access Layer]
end
subgraph "External Dependencies"
F[External API]
G[Database]
H[Third-party Library]
I[Configuration Service]
end
A --> F
E --> G
B --> H
A --> I
classDiagram
class MainComponent {
+property: Type
+method(): ReturnType
+asyncMethod(): Promise~Type~
}
class InternalService {
+businessOperation(): Result
}
class ExternalAPI {
<<external>>
+apiCall(): Data
}
MainComponent --> InternalService
MainComponent --> ExternalAPI
| Method/Property | Purpose | Parameters | Return Type | Usage Notes | |-----------------|---------|------------|-------------|-------------| | [Name] | [Purpose] | [Parameters] | [Type] | [Notes] |
// Basic usage example
var component = new ComponentName();
component.DoSomething();
// Advanced configuration patterns
var options = new ComponentOptions();
var component = ComponentFactory.Create(options);
await component.ProcessAsync(data);
tools
Generate a Playwright test based on a scenario using Playwright MCP
tools
Website exploration for testing using Playwright MCP
tools
Automate filling in a form using Playwright MCP
development
Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag