howto-section
starsforks
How to install howto-section?
kostja94/marketing-skills/howto-section
$npx -y skills add kostja94/marketing-skills --skill howto-sectionWhen the user wants to create, optimize, or audit a HowTo section block—an in-page block of ordered steps with optional Schema.org HowTo JSON-LD. Also use when the user mentions "HowTo section," "how-to section," "steps section," "quick start," "walkthrough," "tutorial block," "3
SKILL.md
| 1 | # Components: HowTo Section |
| 2 | |
| 3 | Guides **HowTo as an in-page section**: a block of **ordered steps** (and optional **HowTo** JSON-LD) embedded **inside** article, documentation, tool, or landing pages. **Not** a standalone page type—parent page structure and templates come from **article-page-generator**, **docs-page-generator**, **tools-page-generator**, **landing-page-generator**, etc. Distinct from **FAQ** (Q&A → FAQPage) and from **full article body** drafting alone (**article-content**). **schema-markup** remains the source for exhaustive Schema.org property rules and type-wide tables; this skill owns **section-level** placement, copy, HTML, and HowTo-vs-FAQ decisions. |
| 4 | |
| 5 | **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. |
| 6 | |
| 7 | ## HowTo Section vs FAQ Section |
| 8 | |
| 9 | | Dimension | HowTo section | FAQ section | |
| 10 | |-----------|---------------|-------------| |
| 11 | | **Intent** | User follows **ordered steps** to complete a task | User reads **Q&A pairs** for doubts | |
| 12 | | **Structure** | Steps (1→2→3), optional tools/time/supplies | Question → answer per item | |
| 13 | | **Schema** | **HowTo** (Schema.org) | **FAQPage** | |
| 14 | | **UI** | Often **horizontal tabs** for steps; or **numbered list** in flow | Often **vertical accordion** | |
| 15 | | **Skill** | **howto-section-generator** (this) | **faq-page-generator** | |
| 16 | |
| 17 | Do not mark FAQ content as HowTo or vice versa; schema must match visible content. |
| 18 | |
| 19 | ## Placement Within the Parent Page |
| 20 | |
| 21 | This section is always **part of** a larger page. Typical positions: |
| 22 | |
| 23 | | Location | When | |
| 24 | |----------|------| |
| 25 | | **After intro (and optional TL;DR / Key Takeaways)** | Article: context first, then **solution = steps** | |
| 26 | | **As the main middle of the page** | Tutorial-heavy article where the HowTo block carries most of the value | |
| 27 | | **After product/tool context** | Tool or LP: short context → **How to use** steps → FAQ/CTA | |
| 28 | |
| 29 | **Narrative**: Align with **PAS** for how-to articles—**Problem** in intro; **Agitation** in brief context; **Solution** = the HowTo section. **Answer-first** still applies **per step** (see below). |
| 30 | |
| 31 | **Parent page vs URL split**: Whether the **parent** is one article URL or a separate doc/tool URL is decided by **content-strategy**, **article-page-generator**, **docs-page-generator**, or **tools-page-generator**. This skill only defines the **HowTo block**; if each tab were a **different ranking topic**, use **separate URLs** (pillar/cluster). If all steps are **one task**, keep **one page** with one HowTo section (or multiple sections only if clearly separated). |
| 32 | |
| 33 | ## Content Structure |
| 34 | |
| 35 | ### Headings and lists |
| 36 | |
| 37 | #### Section title (H2) |
| 38 | |
| 39 | Headings should **describe the topic or purpose** (WCAG 2.4.6)—not just decorate. Prefer one primary H2 for the procedure; match **page type** and **search intent**. |
| 40 | |
| 41 | | Pattern | Best for | Examples | |
| 42 | |---------|----------|----------| |
| 43 | | **Outcome / task (default)** | Blog posts, guides, most informational “how to …” queries | “How to [verb] [outcome]”, “[Task] step by step” | |
| 44 | | **Product or tool** | Tool pages, LP blocks after hero | “How to use [Product]”, “Using [Tool]” | |
| 45 | | **Quick start / walkthrough** | Docs, onboarding | “Quick start”, “Walkthrough”, “Get started with [X]” | |
| 46 | | **Numbered hook** (“In 3 steps …”, “3 simple steps to …”) | Short LP/tool copy when **simplicity** is the message | Use **only** if the visible `<ol>` (and HowTo JSON-LD `step` list) has **exactly** that many steps | |
| 47 | |
| 48 | **Rules** |
| 49 | |
| 50 | - **Avoid** a bare **“Steps”** or **“Instructions”** as the only H2 text when you can name the outcome—screen reader and scan users lose context. |
| 51 | - **Count in the title**: If you use “3 steps” / “In 4 steps” in the H2, tabs, or subheads, the on-page list and **HowTo** schema must show the **same** number of steps (no extra steps only in JSON-LD). |
| 52 | - **Volatile UIs**: If step count may change with releases, prefer **non-count** titles (“How to …”) and put “three main steps” in body copy if needed. |
| 53 | - **Language**: Mirror the que |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
