diff options
| author | Dax Raad <[email protected]> | 2025-12-05 16:41:35 -0500 |
|---|---|---|
| committer | Dax Raad <[email protected]> | 2025-12-05 16:41:35 -0500 |
| commit | 328188816008fde10165597f432dac4c5d1016cd (patch) | |
| tree | e3230708f379c7e3451efc46e5d1c1ab66a26e20 /packages/docs/ai-tools | |
| parent | c6d0ae892efcbd18652ff413ec3378099d31bc91 (diff) | |
| download | opencode-328188816008fde10165597f432dac4c5d1016cd.tar.gz opencode-328188816008fde10165597f432dac4c5d1016cd.zip | |
ignore: docs test
Diffstat (limited to 'packages/docs/ai-tools')
| -rw-r--r-- | packages/docs/ai-tools/claude-code.mdx | 76 | ||||
| -rw-r--r-- | packages/docs/ai-tools/cursor.mdx | 420 | ||||
| -rw-r--r-- | packages/docs/ai-tools/windsurf.mdx | 96 |
3 files changed, 592 insertions, 0 deletions
diff --git a/packages/docs/ai-tools/claude-code.mdx b/packages/docs/ai-tools/claude-code.mdx new file mode 100644 index 000000000..bdc4e04b5 --- /dev/null +++ b/packages/docs/ai-tools/claude-code.mdx @@ -0,0 +1,76 @@ +--- +title: "Claude Code setup" +description: "Configure Claude Code for your documentation workflow" +icon: "asterisk" +--- + +Claude Code is Anthropic's official CLI tool. This guide will help you set up Claude Code to help you write and maintain your documentation. + +## Prerequisites + +- Active Claude subscription (Pro, Max, or API access) + +## Setup + +1. Install Claude Code globally: + + ```bash + npm install -g @anthropic-ai/claude-code +``` + +2. Navigate to your docs directory. +3. (Optional) Add the `CLAUDE.md` file below to your project. +4. Run `claude` to start. + +## Create `CLAUDE.md` + +Create a `CLAUDE.md` file at the root of your documentation repository to train Claude Code on your specific documentation standards: + +````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 +```` diff --git a/packages/docs/ai-tools/cursor.mdx b/packages/docs/ai-tools/cursor.mdx new file mode 100644 index 000000000..fbb77616e --- /dev/null +++ b/packages/docs/ai-tools/cursor.mdx @@ -0,0 +1,420 @@ +--- +title: "Cursor setup" +description: "Configure Cursor for your documentation workflow" +icon: "arrow-pointer" +--- + +Use Cursor to help write and maintain your documentation. This guide shows how to configure Cursor for better results on technical writing tasks and using Mintlify components. + +## Prerequisites + +- Cursor editor installed +- Access to your documentation repository + +## Project rules + +Create project rules that all team members can use. In your documentation repository root: + +```bash +mkdir -p .cursor +``` + +Create `.cursor/rules.md`: + +````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 + +<Note> +Supplementary information that supports the main content without interrupting flow +</Note> + +#### Tip - Best practices and pro tips + +<Tip> +Expert advice, shortcuts, or best practices that enhance user success +</Tip> + +#### Warning - Important cautions + +<Warning> +Critical information about potential issues, breaking changes, or destructive actions +</Warning> + +#### Info - Neutral contextual information + +<Info> +Background information, context, or neutral announcements +</Info> + +#### Check - Success confirmations + +<Check> +Positive confirmations, successful completions, or achievement indicators +</Check> + +### 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: + +<CodeGroup> +```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' +``` +</CodeGroup> + +#### Request/response examples + +Example of request/response documentation: + +<RequestExample> +```bash cURL +curl -X POST 'https://api.example.com/users' \ + -H 'Content-Type: application/json' \ + -d '{"name": "John Doe", "email": "[email protected]"}' +``` +</RequestExample> + +<ResponseExample> +```json Success +{ + "id": "user_123", + "name": "John Doe", + "email": "[email protected]", + "created_at": "2024-01-15T10:30:00Z" +} +``` +</ResponseExample> + +### Structural components + +#### Steps for procedures + +Example of step-by-step instructions: + +<Steps> +<Step title="Install dependencies"> + Run `npm install` to install required packages. + + <Check> + Verify installation by running `npm list`. + </Check> +</Step> + +<Step title="Configure environment"> + Create a `.env` file with your API credentials. + + ```bash + API_KEY=your_api_key_here + ``` + + <Warning> + Never commit API keys to version control. + </Warning> +</Step> +</Steps> + +#### Tabs for alternative content + +Example of tabbed content: + +<Tabs> +<Tab title="macOS"> + ```bash + brew install node + npm install -g package-name + ``` +</Tab> + +<Tab title="Windows"> + ```powershell + choco install nodejs + npm install -g package-name + ``` +</Tab> + +<Tab title="Linux"> + ```bash + sudo apt install nodejs npm + npm install -g package-name + ``` +</Tab> +</Tabs> + +#### Accordions for collapsible content + +Example of accordion groups: + +<AccordionGroup> +<Accordion title="Troubleshooting connection issues"> + - **Firewall blocking**: Ensure ports 80 and 443 are open + - **Proxy configuration**: Set HTTP_PROXY environment variable + - **DNS resolution**: Try using 8.8.8.8 as DNS server +</Accordion> + +<Accordion title="Advanced configuration"> + ```javascript + const config = { + performance: { cache: true, timeout: 30000 }, + security: { encryption: 'AES-256' } + }; + ``` +</Accordion> +</AccordionGroup> + +### Cards and columns for emphasizing information + +Example of cards and card groups: + +<Card title="Getting started guide" icon="rocket" href="/quickstart"> +Complete walkthrough from installation to your first API call in under 10 minutes. +</Card> + +<CardGroup cols={2}> +<Card title="Authentication" icon="key" href="/auth"> + Learn how to authenticate requests using API keys or JWT tokens. +</Card> + +<Card title="Rate limiting" icon="clock" href="/rate-limits"> + Understand rate limits and best practices for high-volume usage. +</Card> +</CardGroup> + +### API documentation components + +#### Parameter fields + +Example of parameter documentation: + +<ParamField path="user_id" type="string" required> +Unique identifier for the user. Must be a valid UUID v4 format. +</ParamField> + +<ParamField body="email" type="string" required> +User's email address. Must be valid and unique within the system. +</ParamField> + +<ParamField query="limit" type="integer" default="10"> +Maximum number of results to return. Range: 1-100. +</ParamField> + +<ParamField header="Authorization" type="string" required> +Bearer token for API authentication. Format: `Bearer YOUR_API_KEY` +</ParamField> + +#### Response fields + +Example of response field documentation: + +<ResponseField name="user_id" type="string" required> +Unique identifier assigned to the newly created user. +</ResponseField> + +<ResponseField name="created_at" type="timestamp"> +ISO 8601 formatted timestamp of when the user was created. +</ResponseField> + +<ResponseField name="permissions" type="array"> +List of permission strings assigned to this user. +</ResponseField> + +#### Expandable nested fields + +Example of nested field documentation: + +<ResponseField name="user" type="object"> +Complete user object with all associated data. + +<Expandable title="User properties"> + <ResponseField name="profile" type="object"> + User profile information including personal details. + + <Expandable title="Profile details"> + <ResponseField name="first_name" type="string"> + User's first name as entered during registration. + </ResponseField> + + <ResponseField name="avatar_url" type="string | null"> + URL to user's profile picture. Returns null if no avatar is set. + </ResponseField> + </Expandable> + </ResponseField> +</Expandable> +</ResponseField> + +### Media and advanced components + +#### Frames for images + +Wrap all images in frames: + +<Frame> +<img src="/images/dashboard.png" alt="Main dashboard showing analytics overview" /> +</Frame> + +<Frame caption="The analytics dashboard provides real-time insights"> +<img src="/images/analytics.png" alt="Analytics dashboard with charts" /> +</Frame> + +#### Videos + +Use the HTML video element for self-hosted video content: + +<video + controls + className="w-full aspect-video rounded-xl" + src="link-to-your-video.com" +></video> + +Embed YouTube videos using iframe elements: + +<iframe + className="w-full aspect-video rounded-xl" + src="https://www.youtube.com/embed/4KzFe50RQkQ" + title="YouTube video player" + frameBorder="0" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowFullScreen +></iframe> + +#### Tooltips + +Example of tooltip usage: + +<Tooltip tip="Application Programming Interface - protocols for building software"> +API +</Tooltip> + +#### Updates + +Use updates for changelogs: + +<Update label="Version 2.1.0" description="Released March 15, 2024"> +## 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 +</Update> + +## Required page structure + +Every documentation page must begin with YAML frontmatter: + +```yaml +--- +title: "Clear, specific, keyword-rich title" +description: "Concise description explaining page purpose and value" +--- +``` + +## Content quality standards + +### Code examples requirements + +- Always include complete, runnable examples that users can copy and execute +- Show proper error handling and edge case management +- Use realistic data instead of placeholder values +- Include expected outputs and results for verification +- Test all code examples thoroughly before publishing +- Specify language and include filename when relevant +- Add explanatory comments for complex logic +- Never include real API keys or secrets in code examples + +### API documentation requirements + +- Document all parameters including optional ones with clear descriptions +- Show both success and error response examples with realistic data +- Include rate limiting information with specific limits +- Provide authentication examples showing proper format +- Explain all HTTP status codes and error handling +- Cover complete request/response cycles + +### Accessibility requirements + +- Include descriptive alt text for all images and diagrams +- Use specific, actionable link text instead of "click here" +- Ensure proper heading hierarchy starting with H2 +- Provide keyboard navigation considerations +- Use sufficient color contrast in examples and visuals +- Structure content for easy scanning with headers and lists + +## Component selection logic + +- Use **Steps** for procedures and sequential instructions +- Use **Tabs** for platform-specific content or alternative approaches +- Use **CodeGroup** when showing the same concept in multiple programming languages +- Use **Accordions** for progressive disclosure of information +- Use **RequestExample/ResponseExample** specifically for API endpoint documentation +- Use **ParamField** for API parameters, **ResponseField** for API responses +- Use **Expandable** for nested object properties or hierarchical information +```` diff --git a/packages/docs/ai-tools/windsurf.mdx b/packages/docs/ai-tools/windsurf.mdx new file mode 100644 index 000000000..fce12bfd1 --- /dev/null +++ b/packages/docs/ai-tools/windsurf.mdx @@ -0,0 +1,96 @@ +--- +title: "Windsurf setup" +description: "Configure Windsurf for your documentation workflow" +icon: "water" +--- + +Configure Windsurf's Cascade AI assistant to help you write and maintain documentation. This guide shows how to set up Windsurf specifically for your Mintlify documentation workflow. + +## Prerequisites + +- Windsurf editor installed +- Access to your documentation repository + +## Workspace rules + +Create workspace rules that provide Windsurf with context about your documentation project and standards. + +Create `.windsurf/rules.md` in your project root: + +````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 + +- `<Note>` for helpful supplementary information +- `<Warning>` for important cautions and breaking changes +- `<Tip>` for best practices and expert advice +- `<Info>` for neutral contextual information +- `<Check>` for success confirmations + +### Code examples + +- When appropriate, include complete, runnable examples +- Use `<CodeGroup>` for multiple language examples +- Specify language tags on all code blocks +- Include realistic data, not placeholders +- Use `<RequestExample>` and `<ResponseExample>` for API docs + +### Procedures + +- Use `<Steps>` component for sequential instructions +- Include verification steps with `<Check>` components when relevant +- Break complex procedures into smaller steps + +### Content organization + +- Use `<Tabs>` for platform-specific content +- Use `<Accordion>` for progressive disclosure +- Use `<Card>` and `<CardGroup>` for highlighting content +- Wrap images in `<Frame>` components with descriptive alt text + +## API documentation requirements + +- Document all parameters with `<ParamField>` +- Show response structure with `<ResponseField>` +- Include both success and error examples +- Use `<Expandable>` 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 +```` |
