### Tabbed Content Example for Different OS
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates using tabs to present alternative content, such as installation commands for macOS, Windows, and Linux.
```bash
brew install node
npm install -g package-name
```
```powershell
choco install nodejs
npm install -g package-name
```
```bash
sudo apt install nodejs npm
npm install -g package-name
```
--------------------------------
### YAML Frontmatter Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Example of required YAML frontmatter for documentation pages.
```yaml
---
title: "Clear, specific, keyword-rich title"
description: "Concise description explaining page purpose and value"
---
```
--------------------------------
### Video Player Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Provides an example of using the video element for self-hosted video content.
```html
```
--------------------------------
### Step-by-Step Procedure Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Illustrates how to structure multi-step instructions with embedded checks and warnings.
```markdown
Run `npm install` to install required packages.
Verify installation by running `npm list`.
Create a `.env` file with your API credentials.
```bash
API_KEY=your_api_key_here
```
Never commit API keys to version control.
```
--------------------------------
### Request Example using cURL
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
An example of a cURL command for making a POST request, typically used for API interactions.
```bash
curl -X POST 'https://api.example.com/users' \
-H 'Content-Type: application/json' \
-d '{"name": "John Doe", "email": "john@example.com"}'
```
--------------------------------
### Mintlify Technical Writing Rule Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
An example of a technical writing rule file for Cursor, emphasizing Mintlify components and best practices.
```markdown
# Mintlify technical writing rule
You are an AI writing assistant specialized in creating exceptional technical documentation using Mintlify components and following industry-leading technical writing practices.
## Core writing principles
### Language and style requirements
- Use clear, direct language appropriate for technical audiences
- Write in second person ("you") for instructions and procedures
- Use active voice over passive voice
- Employ present tense for current states, future tense for outcomes
- Avoid jargon unless necessary and define terms when first used
- Maintain consistent terminology throughout all documentation
- Keep sentences concise while providing necessary context
- Use parallel structure in lists, headings, and procedures
### Content organization standards
- Lead with the most important information (inverted pyramid structure)
- Use progressive disclosure: basic concepts before advanced ones
- Break complex procedures into numbered steps
- Include prerequisites and context before instructions
- Provide expected outcomes for each major step
- Use descriptive, keyword-rich headings for navigation and SEO
- Group related information logically with clear section breaks
### User-centered approach
- Focus on user goals and outcomes rather than system features
- Anticipate common questions and address them proactively
- Include troubleshooting for likely failure points
- Write for scannability with clear headings, lists, and white space
- Include verification steps to confirm success
## Mintlify component reference
### Callout components
#### Note - Additional helpful information
Supplementary information that supports the main content without interrupting flow
#### Tip - Best practices and pro tips
Expert advice, shortcuts, or best practices that enhance user success
#### Warning - Important cautions
Critical information about potential issues, breaking changes, or destructive actions
#### Info - Neutral contextual information
Background information, context, or neutral announcements
#### Check - Success confirmations
Positive confirmations, successful completions, or achievement indicators
### Code components
#### Single code block
Example of a single code block:
```javascript config.js
const apiConfig = {
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
};
```
#### Code group with multiple languages
Example of a code group:
```javascript Node.js
const response = await fetch('/api/endpoint', {
headers: { Authorization: `Bearer ${apiKey}` }
});
```
```python Python
import requests
response = requests.get('/api/endpoint',
headers={'Authorization': f'Bearer {api_key}'})
```
```curl cURL
curl -X GET '/api/endpoint' \
-H 'Authorization: Bearer YOUR_API_KEY'
```
#### Request/response examples
Example of request/response documentation:
```bash cURL
curl -X POST 'https://api.example.com/users' \
-H 'Content-Type: application/json' \
-d '{"name": "John Doe", "email": "john@example.com"}'
```
```json Success
{
"id": "user_123",
"name": "John Doe",
"email": "john@example.com",
"created_at": "2024-01-15T10:30:00Z"
}
```
### Structural components
#### Steps for procedures
Example of step-by-step instructions:
Run `npm install` to install required packages.
Verify installation by running `npm list`.
Create a `.env` file with your API credentials.
```bash
API_KEY=your_api_key_here
```
Never commit API keys to version control.
#### Tabs for alternative content
Example of tabbed content:
```bash
brew install node
npm install -g package-name
```
```powershell
choco install nodejs
npm install -g package-name
```
```bash
sudo apt install nodejs npm
npm install -g package-name
```
```
--------------------------------
### Card Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows how to use Card components for displaying information with icons and links.
```javascript
Complete walkthrough from installation to your first API call in under 10 minutes.
```
--------------------------------
### Tooltip Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates how to use the Tooltip component to provide additional information on hover.
```javascript
API
```
--------------------------------
### OpenAPI Configuration Examples
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/settings.mdx
Configure OpenAPI specifications using absolute, relative, or multiple URLs.
```json
"openapi": "https://example.com/openapi.json"
```
```json
"openapi": "/openapi.json"
```
```json
"openapi": ["https://example.com/openapi1.json", "/openapi2.json", "/openapi3.json"]
```
--------------------------------
### Response Example in JSON
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
A JSON formatted example of a successful API response, useful for illustrating expected data structures.
```json
{
"id": "user_123",
"name": "John Doe",
"email": "john@example.com",
"created_at": "2024-01-15T10:30:00Z"
}
```
--------------------------------
### Frame with Image Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates wrapping an image within a Frame component.
```html
```
--------------------------------
### Parameter Field Examples
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates various Parameter Field components for documenting API request parameters.
```javascript
Unique identifier for the user. Must be a valid UUID v4 format.
```
```javascript
User's email address. Must be valid and unique within the system.
```
```javascript
Maximum number of results to return. Range: 1-100.
```
```javascript
Bearer token for API authentication. Format: `Bearer YOUR_API_KEY`
```
--------------------------------
### Update Component Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows the usage of the Update component for displaying changelog information.
```html
## New features
- Added bulk user import functionality
- Improved error messages with actionable suggestions
## Bug fixes
- Fixed pagination issue with large datasets
- Resolved authentication timeout problems
```
--------------------------------
### Frame with Caption Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows how to use a Frame component with a caption for an image.
```html
```
--------------------------------
### Install Claude Code CLI
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/claude-code.mdx
Install the Claude Code CLI tool globally using npm. This command should be run before navigating to your documentation directory.
```bash
npm install -g @anthropic-ai/claude-code
```
--------------------------------
### YouTube Embed Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Illustrates embedding YouTube videos using an iframe element.
```html
```
--------------------------------
### Single Code Block Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates how to use a single JavaScript code block within documentation.
```javascript
const apiConfig = {
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {
'Authorization': `Bearer ${process.env.API_TOKEN}`
}
};
```
--------------------------------
### Accordion Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates how to use Accordion components for collapsible content with different titles.
```javascript
const config = {
performance: { cache: true, timeout: 30000 },
security: { encryption: 'AES-256' }
};
```
--------------------------------
### Response Field Examples
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows how to use ResponseField components for documenting API response fields.
```javascript
Unique identifier assigned to the newly created user.
```
```javascript
ISO 8601 formatted timestamp of when the user was created.
```
```javascript
List of permission strings assigned to this user.
```
--------------------------------
### Card Group Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Illustrates using CardGroup to arrange multiple cards in columns.
```javascript
Learn how to authenticate requests using API keys or JWT tokens.
Understand rate limits and best practices for high-volume usage.
```
--------------------------------
### YAML Frontmatter Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/windsurf.mdx
Every MDX page must begin with YAML frontmatter containing a title and description.
```yaml
---
title: "Clear, specific title"
description: "Concise description for SEO and navigation"
---
```
--------------------------------
### Expandable Nested Field Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Illustrates documenting expandable nested objects within API responses.
```javascript
Complete user object with all associated data.
User profile information including personal details.
User's first name as entered during registration.
URL to user's profile picture. Returns null if no avatar is set.
```
--------------------------------
### Code Group with Multiple Languages
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows how to present code examples in multiple languages (JavaScript, Python, cURL) within a single group.
```javascript
const response = await fetch('/api/endpoint', {
headers: { Authorization: `Bearer ${apiKey}` }
});
```
```python
import requests
response = requests.get('/api/endpoint',
headers={'Authorization': f'Bearer {api_key}'})
```
```curl
curl -X GET '/api/endpoint' \
-H 'Authorization: Bearer YOUR_API_KEY'
```
--------------------------------
### Response Fields
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Illustrates how to document response fields, including their name, type, and whether they are required, along with examples of simple and nested expandable fields.
```APIDOC
## Response Fields
Example of response field documentation:
Unique identifier assigned to the newly created user.
ISO 8601 formatted timestamp of when the user was created.
List of permission strings assigned to this user.
## Expandable nested fields
Example of nested field documentation:
Complete user object with all associated data.
User profile information including personal details.
User's first name as entered during registration.
URL to user's profile picture. Returns null if no avatar is set.
```
--------------------------------
### Markdown Link to Internal Page
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx
Link to internal pages using root-relative paths, starting with '/'. Relative links are not optimized.
```markdown
[link to text](/writing-content/text)
```
```markdown
[link to text](../text)
```
--------------------------------
### Inline Code Example
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/code.mdx
Use single backticks to denote inline code. This is useful for short code snippets or variable names within text.
```markdown
To denote a `word` or `phrase` as code, enclose it in backticks (`).
```
--------------------------------
### Create Project Rules Directory
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Create the necessary directory for Cursor project rules in your documentation repository root.
```bash
mkdir -p .cursor
```
--------------------------------
### Import and Use a Basic Snippet
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Import a snippet from the 'snippets' directory into your destination file and use it as a component, passing any required variables as props.
```mdx
---
title: My title
description: My Description
---
import MySnippet from '/snippets/path/to/my-snippet.mdx';
## Header
Lorem impsum dolor sit amet.
```
--------------------------------
### Navigation with Folder Structure
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/navigation.mdx
Shows how to reference pages located within folders in the navigation configuration. The path in `docs.json` should reflect the folder structure.
```json
"navigation": {
"tabs": [
{
"tab": "Docs",
"groups": [
{
"group": "Group Name",
"pages": ["your-folder/your-page"]
}
]
}
]
}
```
--------------------------------
### Import and Use a Reusable Component Snippet
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Import a custom component from a snippet file into your destination file and render it, passing any necessary props.
```mdx
---
title: My title
description: My Description
---
import { MyComponent } from '/snippets/custom-component.mdx';
Lorem ipsum dolor sit amet.
```
--------------------------------
### Force Light Mode
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/settings.mdx
Configure the mode toggle to force light mode for all new users and hide the toggle.
```json
{
"modeToggle": {
"default": "light",
"isHidden": true
}
}
```
--------------------------------
### Windsurf Workspace Rules for Mintlify
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/windsurf.mdx
Define project context, writing standards, component usage, API documentation requirements, and quality standards for your Mintlify documentation project using Windsurf rules.
```markdown
# Mintlify technical writing rule
## Project context
- This is a documentation project on the Mintlify platform
- We use MDX files with YAML frontmatter
- Navigation is configured in `docs.json`
- We follow technical writing best practices
## Writing standards
- Use second person ("you") for instructions
- Write in active voice and present tense
- Start procedures with prerequisites
- Include expected outcomes for major steps
- Use descriptive, keyword-rich headings
- Keep sentences concise but informative
## Required page structure
Every page must start with frontmatter:
```yaml
---
title: "Clear, specific title"
description: "Concise description for SEO and navigation"
---
```
## Mintlify components
### Callouts
- `` for helpful supplementary information
- `` for important cautions and breaking changes
- `` for best practices and expert advice
- `` for neutral contextual information
- `` for success confirmations
### Code examples
- When appropriate, include complete, runnable examples
- Use `` for multiple language examples
- Specify language tags on all code blocks
- Include realistic data, not placeholders
- Use `` and `` for API docs
### Procedures
- Use `` component for sequential instructions
- Include verification steps with `` components when relevant
- Break complex procedures into smaller steps
### Content organization
- Use `` for platform-specific content
- Use `` for progressive disclosure
- Use `` and `` for highlighting content
- Wrap images in `` components with descriptive alt text
## API documentation requirements
- Document all parameters with ``
- Show response structure with ``
- Include both success and error examples
- Use `` for nested object properties
- Always include authentication examples
## Quality standards
- Test all code examples before publishing
- Use relative paths for internal links
- Include alt text for all images
- Ensure proper heading hierarchy (start with h2)
- Check existing patterns for consistency
```
--------------------------------
### Media Components
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Shows how to embed images using frames with optional captions, and how to include self-hosted videos or YouTube embeds.
```APIDOC
## Frames for images
Wrap all images in frames:
## Videos
Use the HTML video element for self-hosted video content:
Embed YouTube videos using iframe elements:
```
--------------------------------
### Parameter Fields
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Demonstrates how to document different types of API parameters, including path, body, query, and header parameters, specifying their type, requirement, and default values.
```APIDOC
## Parameter Fields
Example of parameter documentation:
Unique identifier for the user. Must be a valid UUID v4 format.
User's email address. Must be valid and unique within the system.
Maximum number of results to return. Range: 1-100.
Bearer token for API authentication. Format: `Bearer YOUR_API_KEY`
```
--------------------------------
### Advanced Components
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/cursor.mdx
Details the usage of Tooltips for inline explanations and Updates for changelogs or version information.
```APIDOC
## Tooltips
Example of tooltip usage:
API
## Updates
Use updates for changelogs:
## New features
- Added bulk user import functionality
- Improved error messages with actionable suggestions
## Bug fixes
- Fixed pagination issue with large datasets
- Resolved authentication timeout problems
```
--------------------------------
### Markdown Image Syntax
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/images.mdx
Use standard Markdown syntax to include images. Ensure image file sizes are under 5MB or host them externally.
```markdown

```
--------------------------------
### Define a Basic Reusable Snippet
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Add content to a file in the 'snippets' directory. This content can include placeholders for variables that will be filled in when the snippet is imported.
```mdx
Hello world! This is my content I want to reuse across pages. My keyword of the day is {word}.
```
--------------------------------
### Nested Navigation Structure
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/navigation.mdx
Illustrates how to create nested navigation groups within the `docs.json` file for more complex site structures.
```json
"navigation": {
"tabs": [
{
"tab": "Docs",
"groups": [
{
"group": "Getting Started",
"pages": [
"quickstart",
{
"group": "Nested Reference Pages",
"pages": ["nested-reference-page"]
}
]
}
]
}
]
}
```
--------------------------------
### Force Dark Mode
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/settings.mdx
Configure the mode toggle to force dark mode for all new users and hide the toggle.
```json
{
"modeToggle": {
"default": "dark",
"isHidden": true
}
}
```
--------------------------------
### Java Code Block with Highlighting
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/code.mdx
Use fenced code blocks with the language specified for syntax highlighting. The optional filename can also be provided.
```java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
--------------------------------
### Markdown Link to External Page
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx
Create a link to an external URL by wrapping the link text in square brackets and the URL in parentheses.
```markdown
[link to google](https://google.com)
```
--------------------------------
### Import and Use Exported Variables
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Import variables exported from a snippet file into your destination file and use them within your content.
```mdx
---
title: My title
description: My Description
---
import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
Hello, my name is {myName} and I like {myObject.fruit}.
```
--------------------------------
### Regular Navigation Structure
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/navigation.mdx
Defines a simple navigation structure with one tab and one group containing a single page.
```json
"navigation": {
"tabs": [
{
"tab": "Docs",
"groups": [
{
"group": "Getting Started",
"pages": ["quickstart"]
}
]
}
]
}
```
--------------------------------
### Define a Reusable Component Snippet
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Create a reusable component within a snippet file by exporting an arrow function. This component can accept props, but MDX is not compiled within the arrow function body.
```mdx
export const MyComponent = ({ title }) => (
{title}
... snippet content ...
);
```
--------------------------------
### HTML for Superscript and Subscript Text
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx
Use HTML `` and `` tags for superscript and subscript text respectively.
```html
superscript
```
```html
subscript
```
--------------------------------
### Markdown Text Formatting
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx
Apply bold, italic, and strikethrough formatting using markdown syntax. Combine styles for more complex formatting.
```markdown
**bold**
```
```markdown
_italic_
```
```markdown
~strikethrough~
```
```markdown
**_bold and italic_**
```
--------------------------------
### Custom CLAUDE.md Configuration
Source: https://github.com/provihuang/snake-game/blob/main/docs/ai-tools/claude-code.mdx
This markdown file serves as a configuration to train Claude Code on your project's specific documentation standards, including working relationships, project context, content strategy, frontmatter requirements, writing standards, and Git workflow.
```markdown
# Mintlify documentation
## Working relationship
- You can push back on ideas-this can lead to better documentation. Cite sources and explain your reasoning when you do so
- ALWAYS ask for clarification rather than making assumptions
- NEVER lie, guess, or make up information
## Project context
- Format: MDX files with YAML frontmatter
- Config: docs.json for navigation, theme, settings
- Components: Mintlify components
## Content strategy
- Document just enough for user success - not too much, not too little
- Prioritize accuracy and usability of information
- Make content evergreen when possible
- Search for existing information before adding new content. Avoid duplication unless it is done for a strategic reason
- Check existing patterns for consistency
- Start by making the smallest reasonable changes
## Frontmatter requirements for pages
- title: Clear, descriptive page title
- description: Concise summary for SEO/navigation
## Writing standards
- Second-person voice ("you")
- Prerequisites at start of procedural content
- Test all code examples before publishing
- Match style and formatting of existing pages
- Include both basic and advanced use cases
- Language tags on all code blocks
- Alt text on all images
- Relative paths for internal links
## Git workflow
- NEVER use --no-verify when committing
- Ask how to handle uncommitted changes before starting
- Create a new branch when no clear branch exists for changes
- Commit frequently throughout development
- NEVER skip or disable pre-commit hooks
## Do not
- Skip frontmatter on any MDX file
- Use absolute URLs for internal links
- Include untested code examples
- Make assumptions - always ask for clarification
```
--------------------------------
### Export Variables from a Snippet
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/reusable-snippets.mdx
Export variables from your snippet file using 'export const'. These variables can then be imported and used in your destination files.
```mdx
export const myName = 'my name';
export const myObject = { fruit: 'strawberries' };
```
--------------------------------
### HTML iFrame for Video Embedding
Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/images.mdx
Embed external content, such as YouTube videos, using the HTML `