본문으로 건너뛰기
cccskills
무료GitHub에 공개

technical-doc-creator

Create HTML technical documentation with code blocks, API workflows, system architecture diagrams, and syntax highlighting. Use when users request technical documentation, API docs, API references, code examples, or developer documentation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

실행 점수 미검증

설치 방법 보기

포함된 파일(4)

  • SKILL.md2.4 KB
  • assets/templates/base_template.html7.8 KB
  • references/design_patterns.md10.8 KB
  • references/svg_library.md17.0 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Technical Documentation Creator

Create comprehensive HTML technical documentation with code examples and API workflows.

When to Use

  • "Create API documentation for [endpoints]"
  • "Generate technical docs for [system]"
  • "Document API reference"
  • "Create developer documentation"

Components

  1. Overview: purpose, key features, tech stack
  2. Getting Started: installation, setup, quick start
  3. API Reference: endpoints with request/response examples
  4. Code Examples: syntax-highlighted code blocks
  5. Architecture: system diagram (SVG)
  6. Workflows: step-by-step processes

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[API/System] Documentation</title>
  <style>
    body { font-family: system-ui; max-width: 1000px; margin: 0 auto; }
    pre { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; overflow-x: auto; }
    .endpoint { background: #f7fafc; padding: 15px; margin: 10px 0; border-left: 4px solid #4299e1; }
    code { background: #e2e8f0; padding: 2px 6px; border-radius: 3px; }
  </style>
</head>
<body>
  <h1>[System] Documentation</h1>
  <!-- Overview, Getting Started, API Reference, Examples -->
</body>
</html>

API Endpoint Pattern

<div class="endpoint">
  <h3><span style="color: #48bb78;">GET</span> /api/users/{id}</h3>
  <p>Retrieve user by ID</p>

  <h4>Request</h4>
  <pre><code>curl -X GET https://api.example.com/users/123</code></pre>

  <h4>Response</h4>
  <pre><code>{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}</code></pre>
</div>

Code Block Pattern

<pre><code>// Installation
npm install package-name

// Usage
import { feature } from 'package-name';
const result = feature.doSomething();</code></pre>

Workflow

  1. Extract API endpoints, methods, parameters
  2. Create overview and getting started sections
  3. Document each endpoint with examples
  4. Add code snippets for common operations
  5. Include architecture diagram if relevant
  6. Write to [system]-docs.html

Use semantic colors for HTTP methods: GET (green), POST (blue), DELETE (red).

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

Performs comprehensive codebase analysis covering architecture, code quality, security, performance, testing, and maintainability. Use when user wants to audit code quality, identify technical debt, find security issues, assess test coverage, or get a codebase health check.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

Execute Python code locally with marketplace API access for 90%+ token savings on bulk operations. Activates when user requests bulk operations (10+ files), complex multi-step workflows, iterative processing, or mentions efficiency/performance.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

Perform bulk code refactoring operations like renaming variables/functions across files, replacing patterns, and updating API calls. Use when users request renaming identifiers, replacing deprecated code patterns, updating method calls, or making consistent changes across multiple locations.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

Transfer code between files with line-based precision. Use when users request copying code from one location to another, moving functions or classes between files, extracting code blocks, or inserting code at specific line numbers.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

Generates comprehensive documentation explaining how a codebase works, including architecture, key components, data flow, and development guidelines. Use when user wants to understand unfamiliar code, create onboarding docs, document architecture, or explain how the system works.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mhattingpete/claude-skills-marketplace6882026년 7월 25일 업데이트

mhattingpete의 스킬 모두 보기

이 스킬의 문제 신고