How do I install the Docs Creating By Example Tutorials skill?

Run npx skillmds add wahidyankf/docs-creating-by-example-tutorials in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Docs Creating By Example Tutorials safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Docs Creating By Example Tutorials?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Docs Creating By Example Tutorials free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Docs Creating By Example Tutorials?

wahidyankf (@wahidyankf) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Docs Creating By Example Tutorials by wahidyankf

Name: Docs Creating By Example Tutorials
Rating: 4.2 (5 reviews)
Author: wahidyankf

Docs Creating By Example Tutorials

Guide for creating by-example tutorials - code-first learning path with 75-85 heavily annotated examples achieving 95% language coverage. Covers five-part example structure, annotation density standards (1.0-2.25 comments per code line PER EXAMPLE), self-containment rules, and multiple code blocks for comparisons. Essential for creating by-example tutorials for programming languages on educational platforms

wahidyankf 6ba522a 11 files · 26.0 KB Updated Sep 10, 2026

File contents

By-Example Tutorial Creation Skill

Purpose

This Skill provides comprehensive guidance for creating by-example tutorials - a code-first learning path designed for experienced developers who want rapid language pickup through heavily annotated working code examples.

When to use this Skill: creating by-example tutorials for programming languages, writing heavily annotated code examples, designing code-first learning paths achieving 95% language coverage, or meeting annotation density standards (1.0-2.25 comments per code line).

Core Concepts

What is By-Example?

By-example tutorials are a code-first learning path that achieves 95% language coverage through 75-85 heavily annotated, self-contained code examples.

NOT a replacement for:

Beginner tutorials (which provide deep explanations for complete beginners)
Quick Start (which is 5-30% coverage touchpoints)
Cookbook (which is problem-solving oriented, not learning-oriented)

Target Audience: Experienced developers who already know at least one programming language well, want quick pickup through working code rather than extensive narrative, and need ~90% coverage efficiently.

Five-Part Example Structure

Each example follows a consistent five-part structure:

### Example N: Concept Name

**Brief explanation** (1-3 sentences describing what this example demonstrates)

**Optional diagram** (Mermaid diagram if concept relationships complex)

**Heavily commented code** (self-contained, runnable example with educational annotations)

**Key takeaway** (1-2 sentences summarizing the lesson)

Annotation Density Standards

See Annotation Density Standards for the 1.0-2.25 rule, the density calculation formula, the // => annotation pattern with worked Java/Python examples, and the quality-over-quantity guidance.

Self-Containment Rules and Comparisons

See Self-Containment Rules and Comparisons for what makes an example self-contained, how to achieve it, and the multiple-code-blocks pattern for comparison examples.

Coverage Progression and Diagram Usage

See Coverage Progression and Diagram Usage for the three tutorial difficulty levels (beginner/intermediate/advanced), the 75-85 example / 95% coverage target, and when to use Mermaid diagrams with the accessible color palette.

Common Patterns

See Common Patterns for three worked patterns — basic syntax, complex operation with diagram, and multi-block comparison — each showing the exact markdown source an example entry should follow.

Best Practices and Common Mistakes

See Best Practices and Common Mistakes for the example creation workflow, annotation guidelines, the pre-publish quality checklist, and the five most common by-example mistakes with corrections.

Checker Validation Checklist

See Checking By-Example Format — Count, Density, Structure, Self-Containment and Checking By-Example Format — Grouping, Compliance, Diagrams, Examples-by-Level for the full apps-ayokoding-www-by-example-checker validation checklist and step-by-step validation order.

References

Primary Convention: By Example Tutorial Convention

Related Skills: apps-ayokoding-www-developing-content, docs-creating-accessible-diagrams

This Skill packages critical by-example tutorial creation knowledge for rapid language pickup. For comprehensive details, consult the primary convention document.

---name: docs-creating-by-example-tutorialsdescription: Guide for creating by-example tutorials - code-first learning path with 75-85 heavily annotated examples achieving 95% language coverage. Covers five-part example structure, annotation density standards (1.0-2.25 comments per code line PER EXAMPLE), self-containment rules, and multiple code blocks for comparisons. Essential for creating by-example tutorials for programming languages on educational platforms---# By-Example Tutorial Creation Skill## PurposeThis Skill provides comprehensive guidance for creating **by-example tutorials** - a code-first learning path designed for experienced developers who want rapid language pickup through heavily annotated working code examples.**When to use this Skill:** creating by-example tutorials for programming languages, writingheavily annotated code examples, designing code-first learning paths achieving 95% languagecoverage, or meeting annotation density standards (1.0-2.25 comments per code line).## Core Concepts### What is By-Example?**By-example tutorials** are a code-first learning path that achieves 95% language coverage through 75-85 heavily annotated, self-contained code examples.**NOT a replacement for**:- Beginner tutorials (which provide deep explanations for complete beginners)- Quick Start (which is 5-30% coverage touchpoints)- Cookbook (which is problem-solving oriented, not learning-oriented)**Target Audience**: Experienced developers who already know at least one programming languagewell, want quick pickup through working code rather than extensive narrative, and need ~90%coverage efficiently.### Five-Part Example StructureEach example follows a consistent five-part structure:```markdown### Example N: Concept Name**Brief explanation** (1-3 sentences describing what this example demonstrates)**Optional diagram** (Mermaid diagram if concept relationships complex)**Heavily commented code** (self-contained, runnable example with educational annotations)**Key takeaway** (1-2 sentences summarizing the lesson)```## Annotation Density StandardsSee [Annotation Density Standards](./reference/annotation-density.md) for the 1.0-2.25 rule, thedensity calculation formula, the `// =>` annotation pattern with worked Java/Python examples, andthe quality-over-quantity guidance.## Self-Containment Rules and ComparisonsSee [Self-Containment Rules and Comparisons](./reference/self-containment-and-comparisons.md) forwhat makes an example self-contained, how to achieve it, and the multiple-code-blocks pattern forcomparison examples.## Coverage Progression and Diagram UsageSee [Coverage Progression and Diagram Usage](./reference/coverage-and-diagrams.md) for the threetutorial difficulty levels (beginner/intermediate/advanced), the 75-85 example / 95% coveragetarget, and when to use Mermaid diagrams with the accessible color palette.## Common PatternsSee [Common Patterns](./reference/common-patterns.md) for three worked patterns — basic syntax,complex operation with diagram, and multi-block comparison — each showing the exact markdownsource an example entry should follow.## Best Practices and Common MistakesSee [Best Practices and Common Mistakes](./reference/best-practices-and-mistakes.md) for theexample creation workflow, annotation guidelines, the pre-publish quality checklist, and the fivemost common by-example mistakes with corrections.## Checker Validation ChecklistSee [Checking By-Example Format — Count, Density, Structure, Self-Containment](./reference/checking-density-structure-containment.md)and [Checking By-Example Format — Grouping, Compliance, Diagrams, Examples-by-Level](./reference/checking-grouping-compliance-and-diagrams.md)for the full `apps-ayokoding-www-by-example-checker` validation checklist and step-by-stepvalidation order.## References**Primary Convention**: [By Example Tutorial Convention](../../../repo-governance/conventions/tutorials/swe-by-example.md)**Related Skills**: `apps-ayokoding-www-developing-content`, `docs-creating-accessible-diagrams`---This Skill packages critical by-example tutorial creation knowledge for rapid language pickup. For comprehensive details, consult the primary convention document.

Frequently asked questions