technical-tutorials

Name: technical-tutorials
Author: jonathimer

88installs6forks

How to install technical-tutorials?

jonathimer/devmarketing-skills/technical-tutorials

$npx -y skills add jonathimer/devmarketing-skills --skill technical-tutorials

Installs into the current project.

Summary

When the user wants to create step-by-step technical tutorials, quickstarts, or code walkthroughs. Trigger phrases include "tutorial," "quickstart," "getting started guide," "walkthrough," "step by step," "how to guide," "hands-on guide," or "code tutorial.

Files · 1

View on GitHub

SKILL.md

1	# Technical Tutorials
2
3	This skill helps you create step-by-step tutorials that actually work. Covers prerequisite handling, progressive complexity, troubleshooting sections, and creating those satisfying "it works!" moments.
4
5	---
6
7	## Before You Start
8
9	Load your audience context first. Read `.agents/developer-audience-context.md` to understand:
10
11	- Developer skill level (beginner, intermediate, senior)
12	- Tech stack familiarity (what can you assume they know?)
13	- Environment (macOS, Linux, Windows, cloud)
14	- Why they're learning (job, side project, curiosity)
15
16	If the context file doesn't exist, run the `developer-audience-context` skill first.
17
18	---
19
20	## Tutorial Types
21
22	\| Type \| Length \| Purpose \| Example \|
23	\|------\|--------\|---------\|---------\|
24	\| Quickstart \| 5-10 min \| First success ASAP \| "Make your first API call" \|
25	\| Tutorial \| 20-45 min \| Learn a concept deeply \| "Build a REST API with Node.js" \|
26	\| Workshop \| 1-3 hours \| Comprehensive project \| "Build a full-stack app" \|
27	\| Code walkthrough \| Varies \| Explain existing code \| "Understanding our SDK architecture" \|
28
29	---
30
31	## The Tutorial Structure
32
33	### Anatomy of a Great Tutorial
34
35	```
36	1. Title & Meta
37	- What you'll build
38	- Time estimate
39	- Prerequisites
40
41	2. Overview
42	- What you'll learn
43	- Final result preview
44
45	3. Prerequisites Check
46	- Environment setup
47	- Verification commands
48
49	4. The Build (Progressive Steps)
50	- Step 1: Simplest foundation
51	- Step 2: Add one concept
52	- Step 3: Add complexity
53	- [Checkpoint: "It works!" moment]
54	- Step 4: Continue building
55	- ...
56	- [Final checkpoint]
57
58	5. What You Built
59	- Recap
60	- Complete code
61
62	6. Troubleshooting
63	- Common errors
64	- Debugging tips
65
66	7. Next Steps
67	- Where to go from here
68	- Related tutorials
69	```
70
71	---
72
73	## Prerequisites Handling
74
75	### The Prerequisites Section
76
77	Be explicit. Don't make developers guess what they need.
78
79	```markdown
80	## Prerequisites
81
82	Before starting, make sure you have:
83
84	\| Requirement \| Version \| Check Command \|
85	\|-------------\|---------\|---------------\|
86	\| Node.js \| 18+ \| `node --version` \|
87	\| npm \| 9+ \| `npm --version` \|
88	\| Git \| Any \| `git --version` \|
89
90	You should also be comfortable with:
91	- Basic JavaScript (variables, functions, async/await)
92	- Command line basics (cd, mkdir, running commands)
93	- REST API concepts (HTTP methods, JSON)
94
95	New to any of these? Check out [link to prerequisite tutorial].
96	```
97
98	### Environment Setup Section
99
100	Make setup foolproof:
101
102	```markdown
103	## Setting Up Your Environment
104
105	### 1. Create Project Directory
106
107	\`\`\`bash
108	mkdir my-awesome-project
109	cd my-awesome-project
110	\`\`\`
111
112	### 2. Initialize the Project
113
114	\`\`\`bash
115	npm init -y
116	\`\`\`
117
118	You should see output like:
119	\`\`\`json
120	{
121	"name": "my-awesome-project",
122	"version": "1.0.0",
123	...
124	}
125	\`\`\`
126
127	### 3. Install Dependencies
128
129	\`\`\`bash
130	npm install express dotenv
131	\`\`\`
132
133	### 4. Verify Installation
134
135	\`\`\`bash
136	node -e "require('express'); console.log('Express installed!')"
137	\`\`\`
138
139	Expected output: `Express installed!`
140	```
141
142	---
143
144	## Progressive Complexity
145
146	### The Layer Cake Approach
147
148	Build up in understandable layers:
149
150	\| Layer \| What It Does \| Example \|
151	\|-------\|--------------\|---------\|
152	\| 1. Skeleton \| Minimum viable code that runs \| "Hello World" server \|
153	\| 2. Core feature \| Primary functionality \| Add one API endpoint \|
154	\| 3. Real data \| Replace hardcoded values \| Connect to database \|
155	\| 4. Error handling \| Production-ready patterns \| Add try/catch, validation \|
156	\| 5. Polish \| Nice-to-haves \| Logging, config, tests \|
157
158	### Show Progress, Not Perfection
159
160	Wrong approach (overwhelming):
161	```javascript
162	// Here's the complete file with everything
163	const express = require('express');
164	const { Pool } = require('pg');
165	const helmet = require('helmet');
166	const rateLimit = require('express-rate-limit');
167	const winston = require('winston');
168	// ... 200 more lines
169	```
170
171	Right approach (progressive):
172
173	Step 1: Basic server
174	```javascript
175	const express = require('express');
176	const app = express();
177
178	app.get('/', (req, res) => {
179	res.send('Hello World!');
180	});
181
182	app.listen(3000, () => {
183	console.log('Server running on http://localhost:3000');
184	});
185	```
186
187	Step 2: Add your first route
188	```javascript
189	// Add this below your existing route
190	app.get('/api/users', (req, res) => {
191	res.json([{ id: 1, name: 'Jane' }]);
192	});
193	```
194
195	---
196
197	## Copy-Paste Friendly Code
198
199	### The Copy-Paste Checklist
200
201	Every code block must pass these tests:
202
203	\| Test \| How to Verify \|
204	\|------\|---------------\|
205	\| Runs standalone \| Copy into new file, execute, it works \|
206	\| Imports included \| All `require`/`import` statements present \|
207	\| No undefined variables \| No re

People who liked this also viewed

6 picks

Type

technical-tutorials

88installs6forks

View on GitHub

How to install technical-tutorials?

jonathimer/devmarketing-skills/technical-tutorials

$npx -y skills add jonathimer/devmarketing-skills --skill technical-tutorials

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Technical Tutorials
2
3	This skill helps you create step-by-step tutorials that actually work. Covers prerequisite handling, progressive complexity, troubleshooting sections, and creating those satisfying "it works!" moments.
4
5	---
6
7	## Before You Start
8
9	Load your audience context first. Read `.agents/developer-audience-context.md` to understand:
10
11	- Developer skill level (beginner, intermediate, senior)
12	- Tech stack familiarity (what can you assume they know?)
13	- Environment (macOS, Linux, Windows, cloud)
14	- Why they're learning (job, side project, curiosity)
15
16	If the context file doesn't exist, run the `developer-audience-context` skill first.
17
18	---
19
20	## Tutorial Types
21
22	\| Type \| Length \| Purpose \| Example \|
23	\|------\|--------\|---------\|---------\|
24	\| Quickstart \| 5-10 min \| First success ASAP \| "Make your first API call" \|
25	\| Tutorial \| 20-45 min \| Learn a concept deeply \| "Build a REST API with Node.js" \|
26	\| Workshop \| 1-3 hours \| Comprehensive project \| "Build a full-stack app" \|
27	\| Code walkthrough \| Varies \| Explain existing code \| "Understanding our SDK architecture" \|
28
29	---
30
31	## The Tutorial Structure
32
33	### Anatomy of a Great Tutorial
34
35	```
36	1. Title & Meta
37	- What you'll build
38	- Time estimate
39	- Prerequisites
40
41	2. Overview
42	- What you'll learn
43	- Final result preview
44
45	3. Prerequisites Check
46	- Environment setup
47	- Verification commands
48
49	4. The Build (Progressive Steps)
50	- Step 1: Simplest foundation
51	- Step 2: Add one concept
52	- Step 3: Add complexity
53	- [Checkpoint: "It works!" moment]
54	- Step 4: Continue building
55	- ...
56	- [Final checkpoint]
57
58	5. What You Built
59	- Recap
60	- Complete code
61
62	6. Troubleshooting
63	- Common errors
64	- Debugging tips
65
66	7. Next Steps
67	- Where to go from here
68	- Related tutorials
69	```
70
71	---
72
73	## Prerequisites Handling
74
75	### The Prerequisites Section
76
77	Be explicit. Don't make developers guess what they need.
78
79	```markdown
80	## Prerequisites
81
82	Before starting, make sure you have:
83
84	\| Requirement \| Version \| Check Command \|
85	\|-------------\|---------\|---------------\|
86	\| Node.js \| 18+ \| `node --version` \|
87	\| npm \| 9+ \| `npm --version` \|
88	\| Git \| Any \| `git --version` \|
89
90	You should also be comfortable with:
91	- Basic JavaScript (variables, functions, async/await)
92	- Command line basics (cd, mkdir, running commands)
93	- REST API concepts (HTTP methods, JSON)
94
95	New to any of these? Check out [link to prerequisite tutorial].
96	```
97
98	### Environment Setup Section
99
100	Make setup foolproof:
101
102	```markdown
103	## Setting Up Your Environment
104
105	### 1. Create Project Directory
106
107	\`\`\`bash
108	mkdir my-awesome-project
109	cd my-awesome-project
110	\`\`\`
111
112	### 2. Initialize the Project
113
114	\`\`\`bash
115	npm init -y
116	\`\`\`
117
118	You should see output like:
119	\`\`\`json
120	{
121	"name": "my-awesome-project",
122	"version": "1.0.0",
123	...
124	}
125	\`\`\`
126
127	### 3. Install Dependencies
128
129	\`\`\`bash
130	npm install express dotenv
131	\`\`\`
132
133	### 4. Verify Installation
134
135	\`\`\`bash
136	node -e "require('express'); console.log('Express installed!')"
137	\`\`\`
138
139	Expected output: `Express installed!`
140	```
141
142	---
143
144	## Progressive Complexity
145
146	### The Layer Cake Approach
147
148	Build up in understandable layers:
149
150	\| Layer \| What It Does \| Example \|
151	\|-------\|--------------\|---------\|
152	\| 1. Skeleton \| Minimum viable code that runs \| "Hello World" server \|
153	\| 2. Core feature \| Primary functionality \| Add one API endpoint \|
154	\| 3. Real data \| Replace hardcoded values \| Connect to database \|
155	\| 4. Error handling \| Production-ready patterns \| Add try/catch, validation \|
156	\| 5. Polish \| Nice-to-haves \| Logging, config, tests \|
157
158	### Show Progress, Not Perfection
159
160	Wrong approach (overwhelming):
161	```javascript
162	// Here's the complete file with everything
163	const express = require('express');
164	const { Pool } = require('pg');
165	const helmet = require('helmet');
166	const rateLimit = require('express-rate-limit');
167	const winston = require('winston');
168	// ... 200 more lines
169	```
170
171	Right approach (progressive):
172
173	Step 1: Basic server
174	```javascript
175	const express = require('express');
176	const app = express();
177
178	app.get('/', (req, res) => {
179	res.send('Hello World!');
180	});
181
182	app.listen(3000, () => {
183	console.log('Server running on http://localhost:3000');
184	});
185	```
186
187	Step 2: Add your first route
188	```javascript
189	// Add this below your existing route
190	app.get('/api/users', (req, res) => {
191	res.json([{ id: 1, name: 'Jane' }]);
192	});
193	```
194
195	---
196
197	## Copy-Paste Friendly Code
198
199	### The Copy-Paste Checklist
200
201	Every code block must pass these tests:
202
203	\| Test \| How to Verify \|
204	\|------\|---------------\|
205	\| Runs standalone \| Copy into new file, execute, it works \|
206	\| Imports included \| All `require`/`import` statements present \|
207	\| No undefined variables \| No re

People who liked this also viewed

6 picks

Type