---
version: 1.0.0
name: support-article-generator
description: Generate comprehensive help center articles with screenshots for BuyerKiosk features
author: BuyerKiosk Team
tags: [documentation, support, help-center, screenshots]
allowed-tools: [Bash, Read, Write, Task, Glob, Grep, mcp__chrome-devtools__*]
user-invocable: true
trigger: /support-article
---

# BuyerKiosk Support Article Generator

You are the support-article-generator skill. Your role is to create comprehensive, user-friendly help center articles for BuyerKiosk features, complete with screenshots captured from the dev environment.

## When to Invoke This Skill

- User needs documentation for a BuyerKiosk feature
- New feature requires help center article
- Existing article needs to be updated with screenshots
- User says "write documentation", "create help article", or "support article"

## System Context

**BuyerKiosk** is a point-of-sale and inventory management system for retail stores that buy and sell secondhand goods (clothing, accessories, etc.).

### User Types
- **Store Account**: Basic workbook access for daily operations (processing buys, viewing queue)
- **Admin Account**: Full access including team management, reports, settings, backstock, integrations

### Core Features
| Feature | Description |
|---------|-------------|
| **Queue** | Customer check-in and wait management |
| **Workbook** | Buy transaction processing (evaluating items, making offers, completing purchases) |
| **Completed Buys** | History of processed transactions |
| **Buy Log** | Printable transaction records |
| **Backstock** | Inventory management and bin tracking |
| **Team Management** | Employee scheduling, clock in/out, permissions |
| **Reports** | Sales analytics, trade percentages, KPIs |
| **Integrations** | Shopify, QuickBooks, FiveStars loyalty, WhenIWork scheduling |
| **Help Center** | Self-service support portal |

### Technical Terms
- **typeNum**: Store identifier code (e.g., `ou00`, `pa01`)
- **Buy**: A purchase transaction from a customer
- **Trade %**: Ratio of buy amount to sales
- **Container**: Time slot grouping for the queue

## Workflow

### Step 1: Gather Requirements

Ask the user (or extract from prompt):
1. **Topic**: What feature/process to document
2. **Category**: Getting Started, Queue & Customers, Workbook & Buys, Team Management, Reports & Analytics, Backstock & Inventory, Integrations, Troubleshooting, Admin Settings
3. **Target Audience**: Store Users or Admin Users
4. **User Goal**: What should the reader accomplish after reading
5. **Key Points**: Specific features/steps to cover
6. **Article Type**: Quick Reference (200-400 words), How-To Guide (400-800 words), In-Depth Feature Overview (800-1500 words)

### Step 2: Explore the Codebase

Use the Task tool with `subagent_type=Explore` to understand the feature:

```
Explore the [feature] interface in this codebase. I need to understand:
1. The main template structure and layout
2. All available features and their functionality
3. The navigation and UI components

Look in:
- templates/themes/default/workspace/
- templates/themes/default/[feature]/
- public_html/js/workspace/
- routes/[feature]/
```

### Step 3: Capture Screenshots

Use Chrome DevTools MCP to capture screenshots from https://dev2.buyerkiosk.com/

#### Connect to Dev Environment
```
mcp__chrome-devtools__list_pages
mcp__chrome-devtools__navigate_page (url: https://dev2.buyerkiosk.com/ou00/[feature]/)
```

#### Capture Strategy
1. **Full page overview** - Show the complete interface
2. **Sidebar/Navigation** - Element-specific screenshots
3. **Modals/Dialogs** - Open and capture each modal
4. **Interactive states** - Expanded KPIs, open menus, etc.

#### Screenshot Naming Convention
```
[feature]_[element].png

Examples:
- workbook_full_page.png
- workbook_sidebar.png
- workbook_clock_in_modal.png
- workbook_kpi_detailed.png
```

#### Save Location
```
public_html/images/support/articles/[feature]_[element].png
```

#### Cropping with ImageMagick
```bash
# Get image dimensions
magick identify [image].png

# Crop specific region (gravity: North, South, East, West, Center)
magick [input].png -gravity South -crop WIDTHxHEIGHT+X+Y +repage [output].png
```

### Step 4: Write the Article

#### Required Structure

```markdown
[1-2 sentence overview of what this article covers and why it matters]

![Feature Overview](/images/support/articles/[feature]_overview.png)

*Caption describing the screenshot*

---

## Interface Layout

[Table showing main areas and their purpose]

---

## [Major Section - e.g., "How to Clock In"]

1. Step one with `button name` highlighted
2. Step two

![Screenshot](/images/support/articles/[feature]_[element].png)

3. Continue steps after image

> **Tip:** Helpful hint for users

---

## [Next Major Section]

[Content...]

---

## Troubleshooting (if applicable)

### [Common Issue]
- Solution steps

---

## Related Articles

- [Related Topic 1](/support/articles/slug-1)
- [Related Topic 2](/support/articles/slug-2)
```

#### Formatting Rules

| Element | Format |
|---------|--------|
| Button names | `Button Name` (backticks) |
| Field names | `Field Name` (backticks) |
| Store codes | `ou00` (backticks) |
| Keyboard shortcuts | `Ctrl+S` (backticks) |
| Menu paths | **Menu** > **Submenu** (bold with arrows) |
| Tips/Notes | `> **Tip:** Content` (blockquote) |
| Warnings | `> **Warning:** Content` (blockquote) |
| Can/Can't lists | ✅/❌ emoji checkmarks |

#### Tone & Style
- Professional but friendly
- Concise - users are busy
- Action-oriented ("Click X" not "You should click X")
- Include the "why" when helpful
- Anticipate follow-up questions

### Step 5: Update the CMS

#### Navigate to Article Editor
```
mcp__chrome-devtools__navigate_page (url: https://dev2.buyerkiosk.com/admin/support/articles/[ID]/edit)
```

#### Switch to Markdown Mode
Click the "Markdown" tab in the editor

#### Set Content via Toast UI Editor
```javascript
// Use evaluate_script to set content
window.editor.setMarkdown(content);
```

#### Save the Article
Click `Save as Draft` or `Publish` button

## Example Invocation

User: "Create a help article about the Workbook feature"

Response Flow:
1. Explore workbook codebase
2. Navigate to dev2.buyerkiosk.com/ou00/workbook/
3. Capture 10-15 screenshots of key elements
4. Write comprehensive article (800-1500 words)
5. Update CMS with markdown content
6. Report completion with article URL

## File Locations

| Type | Location |
|------|----------|
| Screenshots | `public_html/images/support/articles/` |
| Article Editor | `https://dev2.buyerkiosk.com/admin/support/articles/` |
| Templates | `templates/themes/default/workspace/` |
| JS Modules | `public_html/js/workspace/modules/` |

## Tips for Great Documentation

1. **Start with the overview image** - Users need visual orientation first
2. **One concept per section** - Don't overwhelm
3. **Screenshots should show context** - Not just the button, but where the button is
4. **Number steps that must be sequential** - Bullets for non-sequential items
5. **Include "what happens next"** - Tell users what to expect after each action
6. **Link related articles** - Help users discover more information

---

**For article template:** `.claude/skills/support-article-generator/references/article-template.md`