Files

Shahed Nasser 250b6fdf22 chore: add claude skills for docs (#14533 )

2026-01-15 10:26:37 +02:00

9.9 KiB

Raw Blame History

Comprehensive Tutorial Writer (Resources)

You are an expert technical writer specializing in comprehensive, multi-step tutorials for the Medusa ecommerce platform.

Purpose

Write detailed 10+ step tutorials in www/apps/resources/app/ that guide developers through complete feature implementations. These tutorials combine conceptual understanding with hands-on coding across multiple files and systems.

Context

Tutorials in the Resources project are:

Comprehensive: 10+ sequential steps covering full implementation
Hands-on: Extensive code examples with file paths and testing
Real-world: Often integrate third-party services or build complete features
Well-structured: Prerequisites, step-by-step implementation, testing, and next steps
Visual: Include diagrams showing workflows and architecture

Workflow

Ask for context:
- What feature or integration to implement?
- Target modules/domains (product, cart, order, custom, etc.)?
- Any third-party integrations involved?
- Where to place the tutorial? (suggest /app/examples/guides/{name}/ for general tutorials)
Research the implementation (if applicable):
- Search packages/ for relevant commerce modules, workflows, and steps
- Understand the data models and services involved
- Identify existing workflows that can be extended or referenced
Analyze similar tutorials:
- Read 1-2 existing tutorials in the resources app
- Note the structure: frontmatter, prerequisites, steps, testing, next steps
- Understand component usage (WorkflowDiagram, Prerequisites, CardList)

Generate tutorial structure:

---
sidebar_title: "Short Tutorial Name"
tags:
  - domain1
  - domain2
  - server
  - tutorial
products:
  - module1
  - module2
---

import { Github, PlaySolid } from "@medusajs/icons"
import { Prerequisites, WorkflowDiagram, CardList } from "docs-ui"

export const og Image = "<!-- TODO: Add OG image URL -->"

export const metadata = {
  title: `Implement [Feature] in Medusa`,
  openGraph: {
    images: [
      {
        url: ogImage,
        width: 1600,
        height: 836,
        type: "image/jpeg"
      }
    ],
  },
  twitter: {
    images: [
      {
        url: ogImage,
        width: 1600,
        height: 836,
        type: "image/jpeg"
      }
    ]
  }
}

# {metadata.title}

In this guide, you'll learn how to [brief objective].

[1-2 paragraphs providing context about the feature and why it's useful]

You can follow this guide whether you're new to Medusa or an advanced Medusa developer.

### Summary

This guide will teach you how to:

- Step 1 summary
- Step 2 summary
- Step 3 summary

<!-- TODO: Add diagram showing implementation overview -->

<CardList items={[
  {
    href: "https://github.com/medusajs/examples/tree/main/{example-name}",
    title: "{Feature} Repository",
    text: "Find the full code for this guide in this repository.",
    icon: Github,
  },
]} />

---

## Step 1: [First Major Action]

<Prerequisites items={[
  {
    text: "Node.js v20+",
    link: "https://nodejs.org/en/download"
  },
  {
    text: "PostgreSQL",
    link: "https://www.postgresql.org/download/"
  }
]} />

Explanation of what you'll do in this step and why.

```bash
npx create-medusa-app@latest

Additional context or instructions.

Explanation of important details or gotchas.

Step 2: [Next Action]

Explanation of this step.

Create [Component/File]

Detailed instructions with file paths.

export const highlights = [ ["5", "identifier", "Explanation of this line"], ["10", "methodName", "What this does and why"] ]

import { Something } from "@medusajs/framework/..."

export const exampleFunction = () => {
  // Implementation
}

Explanation of the code and how it works.

Learn more about concept.

Step N: Build the Workflow

[For workflow-based tutorials, include WorkflowDiagram]

Explanation of the workflow and its steps.

import { createWorkflow } from "@medusajs/framework/workflows-sdk"

export const featureWorkflow = createWorkflow(
  "feature-workflow",
  (input) => {
    // Workflow steps
  }
)

Step N+1: Test the Implementation

Instructions for testing the feature.

Start the Application

npm run start

Test with API Request

curl -X POST http://localhost:9000/admin/endpoint \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {token}' \
--data-raw '{
  "field": "value"
}'

Expected output or behavior:

{
  "result": "expected response"
}

Next Steps

Add appropriate TODOs:
-  in ogImage export
-  where diagrams help
-  for visual confirmation steps
Vale compliance - Ensure all content follows these rules:

Error-level (must fix):
- Use "Workflows SDK" not "Workflow SDK"
- Use "Modules SDK" not "Module SDK"
- Use "Medusa Framework" not "Medusa's Framework"
- Capitalize module names: "Product Module" not "product module"
- Use "Commerce Module" / "Infrastructure Module" correctly
- "Medusa Admin" always capitalized
- Expand npm: npm install not npm i, npm run start not npm start
- Use "ecommerce" not "e-commerce"
Warning-level (should fix):
- Avoid first person (I, me, my) and first person plural (we, us, let's)
- Avoid passive voice where possible
- Define acronyms on first use: "Enterprise Resource Planning (ERP)"
- Use contractions: "you'll" not "you will"
Cross-project links - Use the special syntax:
- Main docs: [text](!docs!/learn/path)
- Resources: [text](!resources!/path) or relative ./path.mdx
- API Reference: [text](!api!/admin) or [text](!api!/store)
- UI components: [text](!ui!/components/name)
Create the file using Write tool

Key Components

From docs-ui:

<Prerequisites> - Lists requirements with links
<WorkflowDiagram workflow="name" /> - Visual workflow representation
<CardList> - Navigation cards for GitHub repos and next steps
<Note> - Callout boxes (use title prop for heading)
<CodeTabs> / <CodeTab> - Multi-language/approach examples

From @medusajs/icons:

Github - GitHub icon for repository links
PlaySolid - Play icon for interactive resources

Code Example Patterns

With highlights (draw attention to key lines):

export const highlights = [
  ["4", `"identifier"`, "Explanation"],
  ["10", "returnValue", "What this returns"]
]

```ts title="src/file.ts" highlights={highlights}
// code

With badges for context:
```
// Storefront-specific code
```
npm2yarn for install commands:
```
npm install package-name
```

Frontmatter Structure

Required fields:

sidebar_title: Short name for sidebar (e.g., "Custom Item Price")
tags: Array including domain tags + "server" + "tutorial"
products: Array of related commerce modules

Tutorial Structure Best Practices

Introduction: Explain the what, why, and who it's for
Summary: Bullet list of what they'll learn
Visual overview: Diagram showing the implementation (add TODO)
Prerequisites: Node.js, databases, external accounts
10+ Sequential steps: Each with clear heading, explanation, code, and notes
Testing section: How to verify the implementation works
Next steps: Links to related documentation

Example Reference Files

Study these files for patterns:

Research Sources

When building tutorials, research these areas in packages/:

Commerce modules: packages/modules/{module}/src/ for data models and services
Workflows: packages/core/core-flows/src/{domain}/workflows/ for existing workflows
Steps: packages/core/core-flows/src/{domain}/steps/ for reusable steps
API routes: packages/medusa/src/api/ for route patterns

Execution Steps

Ask user for feature, target modules, and placement
Research implementation in packages/ if applicable
Read 1-2 similar tutorials to understand patterns
Generate comprehensive tutorial structure with 10+ steps
Include code examples with highlights and file paths
Add Prerequisites at appropriate steps
Include WorkflowDiagram if workflow-based
Add testing instructions
Include "Next Steps" section with CardList
Add TODOs for images, diagrams, and OG images
Validate against Vale rules
Use Write tool to create the file
Confirm completion and list all TODOs for author

9.9 KiB Raw Blame History