| name | code-walkthrough-authoring |
| description | Write code examples and walkthroughs that teach one technical idea at a time and explain why each step matters. Use when authoring or revising code-heavy posts in src/content/posts/**. |
| license | Forward Proprietary |
| compatibility | Markdown post authoring in src/content/posts/** |
Code Walkthrough Authoring
Use this skill when a post needs runnable examples, code snippets, request-flow explanations, or guided walkthroughs.
Goal
Turn code into a teaching tool rather than dumping implementation details on the page.
Research Base
This skill is grounded in code-sample and procedure-writing guidance. See the local reference guide for the repository-local walkthrough patterns and examples.
Default Walkthrough Shape
Use this order unless the example has a strong reason to differ.
- State what the example demonstrates.
- Give the runtime or file context.
- Show the smallest useful code sample.
- Explain the blocks or lines that carry the teaching point.
- State the expected result or visible behavior.
- Call out the most likely beginner mistake.
- Add the design implication only when it helps architects evaluate the pattern.
Example Authoring Rules
- Start with one sentence that says why the snippet exists.
- Prefer one recommended path over multiple alternatives.
- Keep the sample small enough that the reader can hold it in working memory.
- Explain placeholders, outputs, and side effects near the code.
- If the code is partial, say what has been omitted and why.
- Walk through the code in the order the reader experiences it.
- If the walkthrough quotes documentation or leans on external platform behavior, verify the claim against the primary docs and cite the source in the draft or supporting notes.
SFCC-Specific Guidance
- Name the file, controller, hook, ISML template, script, or Business Manager context before the code block.
- Clarify whether the reader is seeing storefront logic, Business Manager configuration, or supporting infrastructure.
- Distinguish between what the platform invokes automatically and what the developer calls directly.
- For request-flow examples, state where the request starts and where control moves next.
- When the example has architectural consequences, name the tradeoff in one or two sentences rather than drifting into a second tutorial.
Example Patterns
Pattern: Explain a Hook
- Name when the hook runs.
- Show the hook registration or implementation.
- Explain the input and output that matter.
- Describe the storefront or basket behavior the reader will notice.
Pattern: Explain a Controller or Route
- State what request reaches the route.
- Show the important handler code.
- Explain the key decision points.
- State what template, JSON payload, or redirect comes out.
Example
Weak setup:
"The following code shows how SFCC can powerfully handle basket validation."
Stronger setup:
"This hook validates the basket before checkout continues. The example shows where the validation runs and how it can stop the shopper before an invalid order is placed."
Weak explanation:
"This part processes the data and then returns the result."
Stronger explanation:
"This line reads the current basket and checks whether the shipment still has a valid shipping method. If the check fails, the hook returns an error object and checkout does not advance."
Audit Checklist
- Does the reader know why the snippet exists before seeing it?
- Is the example the shortest version that still teaches the point?
- Are the lines explained in execution order?
- Did I explain the visible result, not just the internal mechanics?
- Did I avoid presenting several equivalent patterns without a reason?
Best Practice References
Local Examples
When Not To Use
- Pure conceptual posts with no code or process demonstration.
- Source verification or quote handling before the underlying claim has been checked against primary docs.
- Large post-outline restructuring before the teaching sequence is settled.