> ## Documentation Index
> Fetch the complete documentation index at: https://support.quo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CLAUDE

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Mintlify documentation site for a resource center. Uses Mintlify's framework to generate static documentation from MDX files.

### Quick Commands

```bash theme={null}
npx mint dev                    # Start dev server (http://localhost:3000)
npx mint dev --port 3333        # Custom port
npm i -g mintlify@latest        # Update CLI
npx mint broken-links           # Validate links
```

### Key Files

* `docs.json` - Navigation, theming, site structure
* `*.mdx` - Content files with YAML frontmatter
* `/images/` - Screenshots and assets
* `/logo/` - Light/dark logo variants

## Core Principles

1. **Accuracy First**: Never invent information. Only use what exists in source material.
2. **Consistency**: Match existing patterns and style.
3. **Clarity**: Make documentation easy to understand and navigate.
4. **Ask, Don't Assume**: When uncertain, always ask for clarification.

## MDX File Structure

### Required Frontmatter

```yaml theme={null}
---
title: "Clear Feature Name"              # ≤60 chars for SEO
description: "Action-oriented summary"   # ≤155 chars, starts with verb
icon: "contextually-appropriate-icon"    # Font Awesome or Lucide
sidebarTitle: "Short Title"             # 2-3 words max (optional)
---
```

### Content Sections (in order)

1. **## Overview** - 2-3 sentences about the feature
2. **Contextual heading** - "Getting started" or "Understanding X"
3. **Action-oriented heading** - "Managing X" or "Working with Y"
4. **Advanced features** (if applicable)
5. **FAQs** (only non-obvious questions)

**NEVER include forced sections like**:

* Generic "Best practices"
* "Common use cases"
* "Tips and tricks"
* "Best practices for X"
* Any section with "best practices" in the title
  These sections feel artificial and should be avoided entirely. If important guidance exists, integrate it naturally into other sections.

## Writing Guidelines

### Voice & Style

* Second-person ("you")
* Active voice
* Sentence case for headings
* Short, scannable sentences
* Oxford commas always
* Avoid "OpenPhone" in headings of articles whenever possible (use "Getting started" not "Getting started with OpenPhone")

### Formatting Rules

* **Numbers**: Spell out 0-9, use numerals for 10+
* **Navigation**: Settings → Profile (use → arrow)
* **Lists**: Use colon format - **Title**: Description
* **Keyboard shortcuts**: ALWAYS use `<kbd>` tags - `<kbd>Ctrl</kbd>+<kbd>S</kbd>`, `<kbd>⌘</kbd>+<kbd>K</kbd>`
* **Platform order**: Web before Mobile in tabs
* **Image height**: All images should have `style={{ maxHeight: '450px' }}` for consistency

### Content Depth

* Provide context before instructions
* Explain "why" not just "how"
* Start with common use cases
* Group related content together

## Mintlify Components

### Callouts (in order of severity)

* `<Note>` - Important information
* `<Tip>` - Helpful suggestions
* `<Info>` - Additional context
* `<Warning>` - Cautions
* `<Check>` - Requirements
* `<Danger>` - Critical warnings

### Layout Components

* `<Frame>` - REQUIRED for all images and videos
* `<Tabs>` - Platform-specific content
* `<Accordion>` / `<AccordionGroup>` - FAQs and troubleshooting
* `<Steps>` - High-level workflows (not UI clicks, no icons)
* `<Card>` / `<CardGroup>` - Navigation blocks

### Media Handling

```mdx theme={null}
<!-- Images -->
<Frame caption="Description">
  <img src="/images/feature/screenshot.png" alt="Alt text" style={{ maxHeight: '450px' }} />
</Frame>

<!-- Videos -->
<Frame>
  <iframe 
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="100%"
    height="400"
    height="450"
    style={{ borderRadius: '8px' }}
  />
</Frame>
```

**Image preservation**: Keep ALL images from source documents - never remove images even if they seem redundant
**Image links**: ALWAYS verify image paths exist in /images/ directory before using them. Check actual filenames.
**Video dimensions**: Always set width="100%" and height="400" for proper display
**Video placement**: Move videos to overview sections unless they're topic-specific

## Article Merging Guidelines

When combining multiple source articles:

1. **Remove duplicates** - Identify and eliminate repeated content
2. **Reorganize content** - Mix and blend sections from different articles to create cohesive flow. Don't keep original article boundaries - combine related information regardless of source
3. **Logical flow** - Basic → Advanced, Create → Modify → Delete
4. **Component balance** - Use appropriately, don't overuse
5. **Length management** - Split if too long
6. **FAQ conversion** - Q\&A sections → Accordion groups
7. **Platform variations** - Use tabs for different platforms
8. **Metadata cleanup** - Remove all source metadata (id, created\_at, etc.)
9. **Video conversion** - Links → Embedded iframes in Frames

### Content Reorganization Strategy

* **Break apart sections** - Don't preserve original article structure
* **Combine related content** - Merge similar topics from different articles into unified sections
* **Create new sections** - Form logical groupings that may not have existed in originals
* **Rewrite transitions** - Ensure smooth flow between merged content
* **Eliminate redundancy** - When multiple articles cover the same topic differently, synthesize the best parts

## Icon Selection

### By Category

* **Phone/Calling**: `phone`, `phone-call`, `phone-incoming`
* **Messaging**: `message-square`, `messages`, `mail`
* **Users/Teams**: `users`, `users-2`, `user-plus`
* **Admin**: `shield`, `settings`, `sliders`
* **Troubleshooting**: `wrench`, `life-buoy`, `alert-circle`
* **AI/Automation**: `sparkles`, `robot`, `wand-2`, `brain`

### Rules

* Icons in frontmatter only
* No emojis in navigation or accordions
* Emojis only for positive content
* Never mix icons and emojis

## Quality Checklist

Before finalizing:

* [ ] ALL images preserved from source documents
* [ ] All image links verified to exist in /images/ directory
* [ ] All images wrapped in `<Frame>` with `maxHeight: '400px'`
* [ ] All keyboard shortcuts use `<kbd>` tags
* [ ] NO "Best practices" sections anywhere
* [ ] Videos converted to embeds with width="100%" height="400"
* [ ] Videos moved to overview sections when appropriate
* [ ] No duplicate content
* [ ] Logical section flow
* [ ] Clean accordion titles (no emojis)
* [ ] Metadata removed from source
* [ ] Links preserved exactly
* [ ] Platform order: Web → Mobile
* [ ] Steps components have no icons

## Common Patterns

### FAQ Structure

```mdx theme={null}
<AccordionGroup>
  <Accordion title="Clear question without punctuation">
    Answer with complete information.
  </Accordion>
</AccordionGroup>
```

### Platform Tabs

```mdx theme={null}
<Tabs>
  <Tab title="Web">
    Web instructions
  </Tab>
  <Tab title="Mobile">
    Mobile instructions
  </Tab>
</Tabs>
```

### Action Instructions

```mdx theme={null}
1. Navigate to **Settings → Profile**
2. Click **Edit profile**
3. Update your information
4. Click **Save changes**
```

## Do NOT

* Add information not in source
* Use emojis in professional contexts
* Create "Related features" sections
* Skip image Frame wrappers
* Mix troubleshooting with best practices
* Use generic headings like "Overview of X"
* Commit without explicit request
* Add icons to Steps components