AnnAI-chan
Guide
MCP
Prompts
Guide
MCP
Prompts

Creating New Pages

This guide will walk you through creating new prompt pages for the AnnAI-chan documentation system.

Quick Start

  1. Create a new .mdx file in the appropriate directory
  2. Add the required frontmatter
  3. Write your content
  4. Run the build pipeline to process your page

File Structure

docs/ ├── prompts/ # Main prompts directory │ ├── index.mdx # Prompts homepage │ ├── [prompt].mdx # Individual prompt files │ └── [category]/ # Category subdirectories ├── guide/ # Guide documentation └── mcp/ # MCP documentation

Required Frontmatter

Every MDX file must include frontmatter with these required fields:

1---
2title: "Your Prompt Title"
3description: "Brief description of what this prompt does"
4tags: ["tag1", "tag2", "tag3"]
5category: "content-creation"
6---

Optional Frontmatter Fields

1---
2# Required fields above...
3
4# Optional fields:
5rating: 4.8                    # User rating (1-5)
6featured: true                 # Show in featured section
7author: "Your Name"            # Prompt author
8version: "1.0.0"              # Version number
9lastUpdated: "2025-01-22"     # Last update date
10difficulty: "beginner"         # beginner, intermediate, advanced
11estimatedTime: "5 minutes"     # Time to use prompt

Valid Categories

Use one of these predefined categories:

  • general - General purpose prompts
  • content-creation - Writing, blogging, content
  • programming - Code, development, technical
  • analysis - Data analysis, research
  • creative - Art, design, creative writing
  • productivity - Planning, organization
  • education - Teaching, learning
  • documentation - Docs, guides, tutorials

Content Structure

Basic Template

1---
2title: "Prompt Name"
3description: "What this prompt does"
4tags: ["relevant", "tags", "here"]
5category: "content-creation"
6---
7
8# Prompt Name
9
10Brief introduction explaining what this prompt is for and when to use it.
11
12## The Prompt
13
14```text
15Your main prompt template goes here.
16Include [VARIABLES] that users can customize.

Variables to Customize

  • [VARIABLE1]: Description of what this variable is for
  • [VARIABLE2]: Another variable explanation

Example Usage

1A complete example with variables filled in

Tips for Best Results

  1. Tip One: Explanation
  2. Tip Two: Explanation

Common Variations

Variation Name

Description and modified prompt

Tags

#tag1 #tag2 #tag3

### Advanced Template (Like Lyrics Editor) ```mdx --- title: "Advanced Prompt Collection" description: "Multiple related prompts for a specific use case" tags: ["writing", "creative", "specialized"] category: "creative" rating: 4.9 featured: true --- # Advanced Prompt Collection ## Overview Explain the collection and its purpose ## Quick Reference Table | Prompt | Purpose | Best For | |--------|---------|----------| | Prompt 1 | What it does | When to use | | Prompt 2 | What it does | When to use | ## Detailed Prompts ### 1. First Prompt Name **Purpose**: What this specific prompt does **When to use**: Specific use cases ```text The actual prompt template

Example Input: Show example Example Output: Show result

2. Second Prompt Name

[Continue pattern...]

Pro Tips

  • Advanced usage tips
  • Common pitfalls to avoid

Related Resources

  • Link to related prompts
  • External resources
## Best Practices ### 1. Clear Titles - Use descriptive, searchable titles - Include the main function in the title - Avoid generic names ### 2. Comprehensive Descriptions - Explain what the prompt does - Include use cases - Mention target audience ### 3. Effective Tags - Use 3-7 relevant tags - Include both broad and specific tags - Use existing tags when possible ### 4. Structured Content - Use clear headings - Include examples - Provide variations - Add tips for best results ### 5. Code Blocks - Use ` ```text ` for prompts - Use appropriate language identifiers - Keep formatting consistent ## Processing Your Page After creating your MDX file: 1. **Run the build pipeline**: ```bash bun run scripts/mdx-build-pipeline.ts

  1. Check for errors:

    1bun run scripts/validate-frontmatter.ts

  2. Start the dev server:

    1bun dev

Automated Features

The build pipeline automatically:

  • Extracts and indexes tags
  • Generates category pages
  • Calculates reading time
  • Analyzes complexity
  • Updates navigation

Common Issues

Missing Frontmatter

Error: Missing required frontmatter fields

Solution: Ensure all required fields are present

Invalid Category

Error: Invalid category "my-category"

Solution: Use one of the valid categories listed above

MDX Syntax Errors

Error: Could not parse expression with swc

Solution: Check for unclosed tags or invalid JSX syntax

Examples from Existing Pages

Simple Prompt (Blog Post Writer)

  • Single prompt with variations
  • Clear structure
  • Good use of examples

Complex Collection (Lyrics Editor)

  • Multiple related prompts
  • Organized with tables
  • Detailed examples for each

Technical Prompt (Code Reviewer)

  • Programming-focused
  • Includes code examples
  • Technical variations

Next Steps

  1. Create your MDX file
  2. Add frontmatter
  3. Write your content
  4. Run the build pipeline
  5. Preview your page
  6. Submit a pull request

Need Help?

  • Check existing prompts for examples
  • Run validation scripts
  • Review error messages
  • Ask in discussions

Happy prompt creating! 🚀

ON THIS PAGE