docs-as-marketing
정보
이 스킬은 개발자들이 기술 문서를 효과적인 마케팅 도구로 변환하여 사용자를 유치하고 전환시키는 데 도움을 줍니다. 검색 최적화된 문서, 전환 중심의 퀵스타트, 개발자 중심의 정보 아키텍처에 대한 전략을 제공합니다. 문서 주도 성장(Docs-led Growth)을 구현하거나 API 레퍼런스의 채택률을 높이기 위해 최적화가 필요할 때 사용하세요.
빠른 설치
Claude Code
추천npx skills add jonathimer/devmarketing-skills -a claude-code/plugin add https://github.com/jonathimer/devmarketing-skillsgit clone https://github.com/jonathimer/devmarketing-skills.git ~/.claude/skills/docs-as-marketingClaude 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:
| Type | Purpose | Marketing Function |
|---|---|---|
| Tutorials | Learning-oriented, step-by-step | Builds confidence, shows product value |
| How-to Guides | Task-oriented, problem-solving | Demonstrates capability breadth |
| Reference | Information-oriented, accurate | Proves product depth and reliability |
| Explanation | Understanding-oriented, conceptual | Establishes 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:
- What is this? (1 sentence)
- Why would I use it? (1-2 sentences)
- How do I use it? (the bulk of the page)
- 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
- One-sentence description of what it does
- Authentication requirements clearly stated
- Request format with all parameters documented
- Response format with example
- Error responses with common causes
- 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
| Code | Meaning |
|---|---|
| 400 | Invalid email format |
| 409 | Email already exists |
| 401 | Invalid 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:
- Problem queries: "how to send sms from node.js"
- Comparison queries: "[your product] vs [competitor]"
- Integration queries: "integrate [your product] with [popular tool]"
- 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
| Metric | What It Tells You |
|---|---|
| Time on quickstart | Engagement (but also confusion) |
| Quickstart completion rate | Conversion effectiveness |
| Search → signup rate | Docs as acquisition channel |
| Support ticket deflection | Docs comprehensiveness |
| Page ratings/feedback | Content quality |
| Internal search queries | Content 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 저장소
연관 스킬
content-collections
메타이 스킬은 콘텐츠 콜렉션(Content Collections)을 위한 프로덕션 검증된 설정을 제공합니다. 콘텐츠 콜렉션은 Markdown/MDX 파일을 Zod 검증이 포함된 타입 안전한 데이터 콜렉션으로 변환해주는 TypeScript 최우선 도구입니다. 블로그, 문서 사이트 또는 콘텐츠 중심의 Vite + React 애플리케이션을 구축할 때 타입 안전성과 자동 콘텐츠 검증을 보장하기 위해 사용하세요. Vite 플러그인 구성과 MDX 컴파일부터 배포 최적화 및 스키마 검증에 이르기까지 모든 것을 다룹니다.
polymarket
메타이 스킬은 개발자들이 Polymarket 예측 시장 플랫폼을 활용한 애플리케이션을 구축할 수 있도록 지원하며, 거래 및 시장 데이터를 위한 API 통합 기능을 포함합니다. 또한 WebSocket을 통한 실시간 데이터 스트리밍을 제공하여 실시간 거래와 시장 활동을 모니터링할 수 있습니다. 이를 통해 거래 전략을 구현하거나 실시간 시장 업데이트를 처리하는 도구를 생성하는 데 활용할 수 있습니다.
creating-opencode-plugins
메타이 스킬은 개발자들이 명령어, 파일, LSP 작업 등 25개 이상의 이벤트 유형에 연결되는 OpenCode 플러그인을 만들 수 있도록 돕습니다. JavaScript/TypeScript 모듈을 위한 플러그인 구조, 이벤트 API 명세, 구현 패턴을 제공합니다. OpenCode AI 어시스턴트의 라이프사이클을 사용자 정의 이벤트 기반 로직으로 가로채거나, 모니터링하거나, 확장해야 할 때 사용하세요.
sglang
메타SGLang은 RadixAttention 프리픽스 캐싱을 활용하여 JSON, 정규식, 에이전트 워크플로우를 위한 고속 구조화 생성에 특화된 고성능 LLM 서빙 프레임워크입니다. 특히 반복되는 프리픽스가 있는 작업에서 상당히 빠른 추론 속도를 제공하여 복잡한 구조화 출력 및 다중 턴 대화에 이상적입니다. 제약 디코딩이 필요하거나 광범위한 프리픽스 공유가 있는 애플리케이션을 구축할 때는 vLLM과 같은 대안보다 SGLang을 선택하십시오.
