スキル一覧に戻る

docs-as-marketing

jonathimer
更新日 2 days ago
7 閲覧
76
4
76
GitHubで表示
メタwordaiapidesign

について

このスキルは、開発者が技術文書を効果的なマーケティングツールに変え、ユーザーを惹きつけてコンバージョンにつなげるための支援をします。検索最適化されたドキュメント、コンバージョン重視のクイックスタート、開発者中心の情報アーキテクチャに関する戦略を提供します。ドキュメント主導の成長を実装する必要がある場合や、APIリファレンスを最適化して採用率を向上させたい場合にご活用ください。

クイックインストール

Claude Code

推奨
メイン
npx skills add jonathimer/devmarketing-skills -a claude-code
プラグインコマンド代替
/plugin add https://github.com/jonathimer/devmarketing-skills
Git クローン代替
git clone https://github.com/jonathimer/devmarketing-skills.git ~/.claude/skills/docs-as-marketing

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

Documentation as Marketing

Documentation is often a developer's first meaningful interaction with your product. Great docs don't just explain—they market. They reduce friction, build trust, and turn curious visitors into active users who recommend your product to others.

Overview

Developer documentation serves multiple marketing functions:

  • Acquisition: Docs rank in search and attract developers actively seeking solutions
  • Activation: Well-structured quickstarts reduce time-to-value
  • Retention: Comprehensive references keep developers building
  • Referral: Developers share docs they love, not marketing pages

This skill covers the intersection of technical writing and developer marketing—creating documentation that serves both education and conversion goals.

Before You Start

Review the developer-audience-context skill to understand your target developers:

  • What problems are they searching for solutions to?
  • What's their technical sophistication level?
  • What frameworks and languages do they use?
  • Where do they currently look for answers?

Your documentation strategy should directly address these audience insights.

Information Architecture That Converts

The Four Types of Documentation

Structure your docs around the four types developers need:

TypePurposeMarketing Function
TutorialsLearning-oriented, step-by-stepBuilds confidence, shows product value
How-to GuidesTask-oriented, problem-solvingDemonstrates capability breadth
ReferenceInformation-oriented, accurateProves product depth and reliability
ExplanationUnderstanding-oriented, conceptualEstablishes thought leadership

Navigation That Reduces Bounce

Good Navigation Structure:

Getting Started
├── Quickstart (< 5 min)
├── Installation
└── Core Concepts

Guides
├── Authentication
├── [Most Common Use Case]
├── [Second Most Common Use Case]
└── ...

API Reference
├── Overview
├── Authentication
├── Endpoints (alphabetical or logical grouping)
└── SDKs

Resources
├── Examples
├── Changelog
└── Support

Bad Navigation Structure:

Documentation
├── Chapter 1: Introduction
├── Chapter 2: Getting Started
├── Chapter 3: Advanced Topics
├── Appendix A
└── API (link to separate site)

Information Hierarchy

Every documentation page should follow this hierarchy:

  1. What is this? (1 sentence)
  2. Why would I use it? (1-2 sentences)
  3. How do I use it? (the bulk of the page)
  4. What's next? (clear next steps)

Quickstart Optimization

Your quickstart is your most important conversion page. Optimize ruthlessly.

The 5-Minute Rule

Developers should reach a meaningful success moment within 5 minutes. If your quickstart takes longer, you're losing developers.

Measure and optimize:

  • Time from page load to first successful API call
  • Drop-off points in the quickstart flow
  • Completion rate

Quickstart Structure

# Quickstart

Get your first [meaningful result] in under 5 minutes.

## Prerequisites
- [Specific version] of [language/tool]
- [Account/API key] (link to signup)

## Step 1: Install
[Single command, copy-paste ready]

## Step 2: Configure
[Minimal configuration, explain what each part does]

## Step 3: Run
[The payoff—show them it works]

## What You Built
[Explain what just happened and why it matters]

## Next Steps
- [Immediate next tutorial]
- [Reference docs for what they just used]
- [Community/support link]

Good vs. Bad Quickstarts

Good Quickstart:

# Send Your First Message

Send an SMS in under 5 minutes.

## Prerequisites
- Node.js 16 or higher
- A Twilio account ([sign up free](link))

## Install the SDK
```bash
npm install twilio

Send a Message

Create send-sms.js:

const twilio = require('twilio');
const client = twilio('YOUR_ACCOUNT_SID', 'YOUR_AUTH_TOKEN');

client.messages.create({
  body: 'Hello from my app!',
  to: '+15551234567',
  from: '+15559876543'
}).then(message => console.log(`Sent: ${message.sid}`));

Run it:

node send-sms.js

You should see: Sent: SM1234...

What Just Happened

You authenticated with your API credentials and sent an SMS...


**Bad Quickstart:**
```markdown
# Getting Started

Welcome to our platform! Before we begin, let's discuss
the architecture of our messaging system...

[500 words of background]

## Installation

First, ensure you have the correct version of Node.js.
You can check this by running...

[200 words on version checking]

You'll also need to configure your environment variables.
Create a .env file and add the following variables...

[Complex configuration with 10+ variables]

API Reference Best Practices

Every Endpoint Needs

  1. One-sentence description of what it does
  2. Authentication requirements clearly stated
  3. Request format with all parameters documented
  4. Response format with example
  5. Error responses with common causes
  6. Copy-paste example that actually works

Copy-Paste Code That Works

Critical: Example code must work when copied. Test it.

Good Example:

## Create a User

Creates a new user in your organization.

### Request
```bash
curl -X POST https://api.example.com/v1/users \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "[email protected]",
    "name": "Jane Developer"
  }'

Response

{
  "id": "usr_123abc",
  "email": "[email protected]",
  "name": "Jane Developer",
  "created_at": "2024-01-15T10:30:00Z"
}

Errors

CodeMeaning
400Invalid email format
409Email already exists
401Invalid or missing API key

**Bad Example:**
```markdown
## POST /users

Parameters:
- email (string)
- name (string)
- org_id (string, optional)
- role (enum, optional)
- metadata (object, optional)
- ...

Returns a user object.

Language-Specific Examples

Provide examples in languages your developers actually use:

  • cURL (universal, always include)
  • JavaScript/Node.js
  • Python
  • Go
  • Ruby
  • PHP
  • Your most-used SDK languages

Search Optimization for Docs

Docs That Rank

Developer documentation can capture high-intent search traffic.

Target Query Types:

  1. Problem queries: "how to send sms from node.js"
  2. Comparison queries: "[your product] vs [competitor]"
  3. Integration queries: "integrate [your product] with [popular tool]"
  4. Error queries: "[specific error message]"

SEO Fundamentals for Docs

Page Titles:

Good: "Send SMS with Node.js | Twilio Docs"
Bad: "Documentation - Messaging - SMS - Send"

Meta Descriptions:

Good: "Learn how to send SMS messages using Node.js and the
Twilio API. Includes code examples and troubleshooting tips."

Bad: "This page contains documentation for the SMS sending
functionality of our messaging product."

URL Structure:

Good: /docs/sms/send-messages/nodejs
Bad: /docs/section/3/page/27?lang=nodejs

Internal Linking

Create a documentation web, not documentation silos:

  • Link related concepts
  • Link from reference to tutorials
  • Link from tutorials to reference
  • Cross-link between SDK docs

Measuring Documentation Effectiveness

Key Metrics

MetricWhat It Tells You
Time on quickstartEngagement (but also confusion)
Quickstart completion rateConversion effectiveness
Search → signup rateDocs as acquisition channel
Support ticket deflectionDocs comprehensiveness
Page ratings/feedbackContent quality
Internal search queriesContent gaps

Feedback Loops

Implement:

  • "Was this helpful?" on every page
  • Internal search analytics (what are people searching for?)
  • Support ticket analysis (what questions do docs fail to answer?)
  • Developer interviews (what's confusing? What's missing?)

Common Documentation Anti-Patterns

The "Wall of Text"

Problem: Pages with no code, no structure, no visual breaks Fix: Lead with code, use headers liberally, break up paragraphs

The "Assumed Knowledge" Trap

Problem: Assuming developers know your terminology Fix: Define terms on first use, link to glossary

The "Everything Page"

Problem: One page trying to cover all use cases Fix: Separate pages for distinct tasks, link between them

The "Outdated Quickstart"

Problem: Quickstart code that no longer works Fix: Automated testing of documentation code samples

The "Hidden Prerequisites"

Problem: Discovering requirements mid-tutorial Fix: All prerequisites at the top, with version numbers

Tools

Documentation Platforms

  • GitBook: Good for smaller teams, nice defaults
  • ReadMe: Interactive API docs, metrics built-in
  • Mintlify: Modern, fast, good DX
  • Docusaurus: Flexible, self-hosted, React-based
  • Notion: Quick to set up, limited customization

Code Sample Testing

  • Doctest: Python code in docs
  • mdx-js: JSX in markdown
  • Custom CI: Run code samples as tests

Search and Analytics

  • Algolia DocSearch: Free for open source, powerful
  • Google Analytics: Basic traffic metrics
  • FullStory/Hotjar: Session recording, heatmaps
  • Internal search analytics: What are devs searching for?

Related Skills

  • api-onboarding: Optimize the complete first API call experience
  • sdk-dx: Create SDKs that make your docs simpler
  • developer-sandbox: Interactive environments that complement docs
  • technical-content-strategy: Broader content strategy including docs
  • developer-audience-context: Understanding who you're writing for

GitHub リポジトリ

jonathimer/devmarketing-skills
パス: skills/docs-as-marketing
0

関連スキル

content-collections

メタ

このスキルは、Content Collections(Markdown/MDXファイルを型安全なデータコレクションに変換するTypeScriptファーストのツール)の本番環境でテストされた設定を提供します。Zodバリデーションによる型安全性を実現し、ブログ、ドキュメントサイト、コンテンツ重視のVite + Reactアプリケーション構築時にご利用ください。Viteプラグインの設定、MDXコンパイルから、デプロイ最適化、スキーマバリデーションまで、すべてを網羅しています。

スキルを見る

polymarket

メタ

このスキルは、開発者がPolymarket予測市場プラットフォームを活用したアプリケーション構築を可能にします。API統合による取引や市場データの取得に加え、WebSocketを介したリアルタイムデータストリーミングにより、ライブ取引や市場活動を監視できます。取引戦略の実装や、ライブ市場更新を処理するツールの作成にご利用ください。

スキルを見る

creating-opencode-plugins

メタ

このスキルは、開発者がコマンド、ファイル、LSP操作など25種類以上のイベントタイプにフックするOpenCodeプラグインを作成することを支援します。JavaScript/TypeScriptモジュール向けに、プラグイン構造、イベントAPI仕様、および実装パターンを提供します。カスタムイベント駆動ロジックでOpenCode AIアシスタントのライフサイクルをインターセプト、監視、または拡張する必要がある場合にご利用ください。

スキルを見る

sglang

メタ

SGLangは、高性能なLLMサービングフレームワークであり、RadixAttentionプレフィックスキャッシュを活用したJSON、正規表現、エージェントワークフロー向けの高速で構造化された生成を特長とします。特にプレフィックスが繰り返されるタスクにおいて、大幅に高速な推論を実現し、複雑な構造化出力やマルチターン対話に最適です。制約付きデコードが必要な場合や、広範なプレフィックス共有を伴うアプリケーションを構築する場合は、vLLMなどの代替案ではなくSGLangを選択してください。

スキルを見る