### 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 Main dashboard showing analytics overview ``` -------------------------------- ### 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 Analytics dashboard with charts ``` -------------------------------- ### 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: Main dashboard showing analytics overview Analytics dashboard with charts ## 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 ![title](/path/image.jpg) ``` -------------------------------- ### 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 ` ``` -------------------------------- ### Markdown Multiline Blockquote Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx Create a multiline blockquote by using the greater-than symbol (>) at the beginning of each line, including blank lines for paragraph separation. ```markdown > Dorothy followed her through many of the beautiful rooms in her castle. > > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood. ``` -------------------------------- ### Markdown Title Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx Use double hash symbols (##) to create a main title for a section. ```markdown ## Titles ``` -------------------------------- ### Markdown LaTeX Integration Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx Embed LaTeX mathematical expressions using the `` component. ```markdown 8 x (vk x H1 - H2) = (0,1) ``` -------------------------------- ### Markdown Subtitle Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx Use triple hash symbols (###) to create a subtitle for a subsection. ```markdown ### Subtitles ``` -------------------------------- ### Markdown Single-line Blockquote Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/markdown.mdx Create a single-line blockquote by prefixing the text with a greater-than symbol (>). ```markdown > Dorothy followed her through many of the beautiful rooms in her castle. ``` -------------------------------- ### HTML Image Embed with Attributes Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/images.mdx Embed images using the HTML `` tag for greater control over attributes like height. ```html ``` -------------------------------- ### OpenAPI Security Scheme Source: https://github.com/provihuang/snake-game/blob/main/docs/api-reference/introduction.mdx This JSON snippet defines the security scheme for API endpoints using Bearer tokens, as specified in an OpenAPI file. ```json "security": [ { "bearerAuth": [] } ] ``` -------------------------------- ### Footer Social Media Links Source: https://github.com/provihuang/snake-game/blob/main/docs/essentials/settings.mdx Define social media links for the footer. The key represents the platform and the value is the account URL. ```json { "x": "https://x.com/mintlify", "website": "https://mintlify.com" } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.