medusa-store/.claude/skills/tutorial/SKILL.md

# 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

1. **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)

2. **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

3. **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)

4. **Generate tutorial structure**:
   ```mdx
   ---
   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.

   <Note title="Important Context">

   Explanation of important details or gotchas.

   </Note>

   ---

   ## Step 2: [Next Action]

   <Prerequisites
     items={[
       {
         text: "[Any specific requirement]",
         link: "https://..."
       }
     ]}
   />

   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"]
   ]

   ```ts title="src/path/to/file.ts" highlights={highlights}
   import { Something } from "@medusajs/framework/..."

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

   Explanation of the code and how it works.

   <Note>

   Learn more about [concept](!docs!/path/to/docs).

   </Note>

   ---

   ## Step N: Build the Workflow

   [For workflow-based tutorials, include WorkflowDiagram]

   <WorkflowDiagram workflow="workflowName" />

   Explanation of the workflow and its steps.

   ```ts title="src/workflows/feature-workflow.ts"
   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

   ```bash npm2yarn
   npm run start
   ```

   ### Test with API Request

   ```bash
   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:

   ```json
   {
     "result": "expected response"
   }
   ```

   ---

   ## Next Steps

   <CardList items={[
     {
       href: "!docs!/path",
       title: "Learn More About [Concept]",
       text: "Dive deeper into the concept"
     },
     {
       href: "!resources!/path",
       title: "Related Guide",
       text: "Another useful guide"
     }
   ]} />
   ```

5. **Add appropriate TODOs**:
   - `<!-- TODO: Add OG image for social sharing -->` in ogImage export
   - `<!-- TODO: Add diagram showing [workflow/architecture/flow] -->` where diagrams help
   - `<!-- TODO: Add screenshot of [UI state/result] -->` for visual confirmation steps

6. **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"

7. **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)`

8. **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

1. **With highlights** (draw attention to key lines):
   ```mdx
   export const highlights = [
     ["4", `"identifier"`, "Explanation"],
     ["10", "returnValue", "What this returns"]
   ]

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

2. **With badges** for context:
   ```ts title="src/api/store/custom/route.ts" badgeLabel="Storefront" badgeColor="blue"
   // Storefront-specific code
   ```

3. **npm2yarn for install commands**:
   ```bash npm2yarn
   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

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

## Example Reference Files

Study these files for patterns:
- [www/apps/resources/app/examples/guides/custom-item-price/page.mdx](www/apps/resources/app/examples/guides/custom-item-price/page.mdx)
- [www/apps/resources/app/examples/guides/quote-management/page.mdx](www/apps/resources/app/examples/guides/quote-management/page.mdx)

## 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

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