Home
cd ../playbooks
Developer ToolsIntermediate

Technical Documentation from Engineering

Transform engineering inputs like code, architecture diagrams, and design docs into clear technical documentation for different audiences.

10 minutes
By communitySource
#technical-documentation#engineering-docs#architecture#system-design#documentation

Engineers write great code and terrible documentation. The architecture lives in someone's head, the API is documented in a 2-year-old README, and onboarding a new developer takes 3 weeks because nothing is written down. Turning engineering artifacts into clear docs for multiple audiences shouldn't require a technical writer.

Who it's for: engineering managers responsible for documentation standards, technical leads documenting system architecture for their teams, DevOps engineers creating runbooks and operational docs, platform teams writing developer-facing documentation, engineering organizations scaling without dedicated technical writers

Example

"Create technical documentation for our payments microservice" → Multi-audience doc set: architecture overview with system diagram description, API reference with endpoint documentation, developer onboarding guide with setup steps, operational runbook for on-call engineers, and a decision log documenting key architectural choices

CLAUDE.md Template

New here? 3-minute setup guide → | Already set up? Copy the template below.

# Technical Documentation from Engineering Inputs

## Your Role
You are an expert technical writer. Your job is to transform raw engineering artifacts into clear, audience-appropriate technical documentation that serves as a reliable single source of truth.

## Core Principles
- Start with "why" before "how"
- Use real examples from the actual system
- Document decisions (ADRs), not just current designs
- One diagram per concept, keep them simple
- Generate from code where possible to prevent staleness

## Instructions
Produce: architecture overview with system context, component descriptions with interfaces, runbook for operations, onboarding guide for new engineers, API reference with examples, and architecture decision records.

## Output Format
- **Architecture**: System purpose, components, interactions, data flow, technology choices
- **Runbook**: Deployment steps, monitoring dashboards, alert responses, troubleshooting
- **ADR**: Decision title, context, options considered, decision, consequences

## Commands
- "Architecture docs" - System overview and design
- "Runbook" - Operations documentation
- "Onboarding guide" - New engineer documentation
- "ADR" - Architecture decision record
README.md

What This Does

Converts raw engineering artifacts — code comments, architecture diagrams, design documents, and Slack conversations — into structured technical documentation suitable for different audiences (developers, ops, leadership).


Quick Start

Step 1: Download the Template

Click Download above to get the CLAUDE.md file.

Step 2: Gather Engineering Inputs

Collect code files, design documents, architecture diagrams, and any relevant team discussions.

Step 3: Start Using It

claude

Say: "Create technical documentation for our payment processing service from these design docs and code files. Target audience: new engineers onboarding to the team."


Documentation Types

Type Audience
Architecture Overview Engineers and architects — system design and decisions
Runbook Operations — how to deploy, monitor, and troubleshoot
Onboarding Guide New engineers — how the system works and how to contribute
API Reference Integration developers — endpoints, schemas, examples
Decision Records Future team — why decisions were made (ADRs)
System Diagram All audiences — visual representation with context

Tips

  • Start with "why": Before explaining how the system works, explain why it exists
  • Use real examples: Code snippets and API calls from the actual system
  • Document decisions, not just designs: Architecture Decision Records (ADRs) prevent re-debating
  • Keep diagrams simple: One diagram per concept — C4 model levels work well

Commands

"Create technical docs from these engineering files"
"Write an architecture overview for [service/system]"
"Generate a runbook for deploying and operating [service]"
"Build an onboarding guide for new engineers on [team]"

Troubleshooting

Docs too detailed for the audience Say: "Write for someone who's technical but unfamiliar with this specific system."

Information scattered across sources Ask: "Create a single source of truth that references but consolidates these inputs."

Docs go stale immediately Specify: "Generate docs from code where possible. Document stable concepts, not volatile details."

$Related Playbooks

Developer Tools

Technical Specification Writing

Write detailed technical specifications with requirements, architecture decisions, interface definitions, and implementation plans.

10 minutes
Intermediate
Developer Tools

PR Reviewer

Senior engineer PR review system - structured feedback on correctness, security, tests, and maintainability with actionable diffs.

5 minutes
Intermediate
Developer Tools

Security Guidance Review

Three-layer continuous security review for AI-generated code — instant regex warnings on edit, an LLM diff review at end of turn, and an agentic commit-time reviewer that traces data flow across files.

10 minutes
Advanced
Developer Tools

Shannon: Autonomous Pentesting for Your Own Apps

An operating guide for driving Keygraph's Shannon CLI: scope a white-box pentest against an app you own, run it, and turn the proven findings into fix tasks

15 minutes
Advanced
Developer Tools

Task Observer: One Skill to Rule Them All

A meta-skill that watches every work session, logs corrections and workflow patterns as skill candidates, and runs a review cycle that turns the log into new or improved skills

15 minutes
Advanced
Developer Tools

Soft UI Design Skill: Premium, Awwwards-Tier Interfaces

A design system that makes Claude build $150k-agency-feeling UI — double-bezel cards, spring-physics motion, magnetic buttons, and a banned list that blocks every cheap AI-design tell

5 minutes
Intermediate
Developer Tools

Stitch Design Taste: Semantic DESIGN.md Generator for Google Stitch

Generates a DESIGN.md that encodes premium, anti-generic design rules in Google Stitch's natural-language format — color, type, layout, motion intent, and a full banned-pattern list

5 minutes
Intermediate
Developer Tools

Taste Skill v1: Legacy Anti-Slop Frontend Design

The original numeric-dial version of the Taste Skill frontend framework, preserved for projects already built on v1 conventions

10 minutes
Intermediate
Developer Tools

Taste Skill: Anti-Slop Frontend Design

A design-taste inference system that reads your brief, tunes three dials, and stops Claude from shipping the same AI-purple centered-hero landing page everyone else gets

10 minutes
Intermediate
Developer Tools

Scrapling Web Extractor

Install, troubleshoot, and use the Scrapling CLI to extract HTML, Markdown, or text from webpages — including browser-backed fetching and tricky sources like WeChat articles.

10 minutes
Beginner
Developer Tools

Statusline Generator

Install, configure, customize, or troubleshoot the Claude Code statusline — cwd, model, token counts, cost via ccusage, git status — and fix a statusline that's blank, stuck, or silent.

10 minutes
Beginner
Developer Tools

Terminal Screenshot

Render a terminal program's colored output to a PNG so Claude can actually see the visual result — color contrast, alignment, highlighting — instead of only reading raw ANSI escape codes.

5 minutes
Beginner

Browse all Developer Tools playbooks →