Docs Workflows

Docs Workflows (docs / explanation / issue / prototype / extension)

This skill groups the repo's documentation-oriented slash commands into reusable workflows.

When to use this skill

Use this skill when the user asks to:

• create or standardize documentation
• produce a structured explanation of changes
• draft an issue
• create a quick prototype plan or outline
• add an article/video tutorial entry
• add AI IDE / skill / command templates
• run MCP design quality review

Source of truth

• references/add_article_tutorial.md
• references/create_doc.md
• references/doc_type.md
• references/explanation.md
• references/issue.md
• references/prototype.md
• references/add_video_tutorial.md
• references/add_aiide.md
• references/add_skill.md
• references/add_command.md
• references/mcp_design_review.mdc

Execution rules

1. Read the relevant command template from this skill's references/. 2. Apply the template structure and required fields as the output contract. 3. Keep edits minimal and consistent with repo doc locations (e.g. doc/, specs/). 4. Prefer clarity and auditability over verbosity.

Command mapping

See references/command-catalog.md.

Add AI IDE Support

Function

Add support for a new AI IDE to the CloudBase AI Toolkit project.

Trigger Condition

When user inputs /add-aiide or needs to add support for a new AI IDE

Workflow

Step 1: Create IDE-specific Configuration Files

Create the necessary configuration files for the new IDE:

• Create IDE-specific configuration files (e.g., .mcp.json, CLAUDE.md, or IDE-specific rules files)
• Place them in the appropriate directory structure under config/ directory
• Ensure file naming follows the existing conventions

Step 2: Fetch and Upload IDE Icon

Get the IDE icon from the official website and upload it to cloud storage:

2.1 Use Browser Tools to Find Icon

1. Navigate to IDE official website using browser_navigate:

• Open the IDE's official website (e.g., https://ide-name.com)

2. Find favicon or logo:

• Use browser_snapshot to capture the page accessibility snapshot
• Look for favicon links in the HTML (typically in <link rel="icon"> or <link rel="apple-touch-icon">)
• Check common favicon locations:
• /favicon.ico
• /favicon.png
• /apple-touch-icon.png
• /logo.png or /logo.svg

3. Download the icon:

• Use downloadRemoteFile tool to download the icon to a temporary local path
• Example: Download to /tmp/ide-icon.png
• Preferred formats: PNG (for raster) or SVG (for vector)
• Recommended size: 128x128px or larger for PNG, or SVG for scalability

2.2 Upload Icon to Cloud Storage

1. Upload to cloud storage using manageStorage tool:

   // Upload icon to cloud storage
   manageStorage({
     action: "upload",
     localPath: "/tmp/ide-icon.png", // Absolute path to downloaded icon
     cloudPath: "assets/ide-icons/new-ide.png", // Cloud storage path
     isDirectory: false
   })

2. Get temporary URL (optional, if needed immediately):

• The upload response will include a temporary URL
• Or use queryStorage with action: "url" to get a permanent download URL

3. Use the cloud storage URL:

• Use the cloud storage URL in component configurations
• Format: https://your-env-id.tcb.qcloud.la/assets/ide-icons/new-ide.png
• Or use the temporary URL if it's a long-term asset

Icon Format Guidelines:

• PNG: Preferred for raster icons, minimum 128x128px, transparent background if possible
• SVG: Preferred for vector icons (scalable, smaller file size)
• ICO: Can be converted to PNG if needed
• Apple Touch Icon: Usually high quality, good choice if available

Icon Source Priority: 1. lobe-icons repository: Check first - if available, use iconSlug (no upload needed) 2. Official website favicon/apple-touch-icon: High quality, official branding 3. GitHub repository: Check if IDE has a GitHub repo with logo assets 4. Documentation site: Check IDE's documentation site for logo assets

Alternative: If the IDE has an icon in lobe-icons, you can use iconSlug instead:

• Check if the icon exists in lobe-icons repository
• If available, use iconSlug: "ide-name" in component configuration
• This avoids the need to upload custom icons
• Common icon slugs: cursor, claude, gemini, windsurf, cline, qwen, etc.

Step 3: Update Hardlink Script

Update scripts/fix-config-hardlinks.mjs to add new target files to the hardlink list:

• Add new rule file paths to RULES_TARGETS array (if applicable)
• Add new MCP config paths to MCP_TARGETS array (if applicable)
• Ensure the source files are correctly referenced

Step 4: Execute Hardlink Script

Run the hardlink script to ensure rule files are synchronized:

node scripts/fix-config-hardlinks.mjs

Step 5: Create IDE Setup Documentation

Create doc/ide-setup/{ide-name}.md configuration documentation:

• Follow the existing IDE setup documentation format
• Include installation instructions
• Include configuration steps
• Include usage examples

Step 6: Update Documentation Lists and UI Components

Update AI IDE support lists in:

• README.md - Add to IDE support list, pay attention to detail section content
• doc/index.mdx - Add to IDE listing
• doc/faq.md - Add relevant FAQ entries if needed

6.1 Update IDESelector Component

Add the new IDE to doc/components/IDESelector.tsx in the IDES array:

const IDES: IDE[] = [
  // ... existing IDEs
  {
    id: 'new-ide',
    name: 'New IDE',
    platform: 'Platform Type',
    configPath: '.new-ide/mcp.json',
    iconSlug: 'new-ide', // or iconUrl: 'https://...'
    docUrl: '/ai/cloudbase-ai-toolkit/ide-setup/new-ide',
    supportsProjectMCP: true, // or false
    verificationPrompt: '调用 MCP 工具下载 CloudBase AI 开发规则到当前项目，然后介绍CloudBase MCP 的所有功能',
    configExample: `{
  "mcpServers": {
    "cloudbase": {
      "command": "npx",
      "args": ["@cloudbase/cloudbase-mcp@latest"],
      "env": {
        "INTEGRATION_IDE": "New IDE"
      }
    }
  }
}`,
    // Add other optional fields as needed:
    // cliCommand, alternativeConfig, installCommand, etc.
  },
];

Required fields:

• id: IDE identifier (lowercase, hyphen-separated)
• name: Display name
• platform: Platform description
• configPath: Configuration file path
• configExample: JSON configuration example with correct INTEGRATION_IDE value
• docUrl: Link to setup documentation

Optional fields:

• iconSlug: Icon slug for lobe-icons (if available)
• iconUrl: Direct icon URL (if iconSlug not available)
• supportsProjectMCP: Whether IDE supports project-level MCP
• verificationPrompt: Custom verification prompt
• cliCommand: CLI command for installation
• alternativeConfig: Alternative configuration description
• installCommand: Installation command
• installCommandDocs: Installation documentation
• useCommandInsteadOfConfig: Use command instead of config file
• oneClickInstallUrl: One-click install URL
• oneClickInstallImage: One-click install image URL

6.2 Update IDEIconGrid Component

Add the new IDE to doc/components/IDEIconGrid.tsx in the IDES array:

const IDES: IDE[] = [
  // ... existing IDEs
  {
    id: 'new-ide',
    name: 'New IDE',
    platform: 'Platform Type',
    iconSlug: 'new-ide', // or iconUrl: 'https://...'
    docUrl: '/ai/cloudbase-ai-toolkit/ide-setup/new-ide',
  },
];

Note: The IDEIconGrid component uses a simplified structure, only requiring:

• id: IDE identifier
• name: Display name
• platform: Platform description (for reference)
• iconSlug or iconUrl: Icon source
• docUrl: Link to setup documentation

Step 7: Update IDE File Mappings in Code

Update IDE mappings in mcp/src/tools/setup.ts:

7.1 Add to IDE_TYPES Array

Add the new IDE type to the IDE_TYPES constant array:

const IDE_TYPES = [
  // ... existing types
  "new-ide", // New IDE type
] as const;

7.2 Add to RAW_IDE_FILE_MAPPINGS

Add file mapping in RAW_IDE_FILE_MAPPINGS object:

export const RAW_IDE_FILE_MAPPINGS: Record<string, IdeFileDescriptor[]> = {
  // ... existing mappings
  "new-ide": [
    { path: ".new-ide/rules/" },
    { path: ".new-ide/mcp.json", isMcpConfig: true },
  ],
};

7.3 Add to IDE_DESCRIPTIONS

Add description in IDE_DESCRIPTIONS object:

const IDE_DESCRIPTIONS: Record<string, string> = {
  // ... existing descriptions
  "new-ide": "New IDE AI Editor",
};

7.4 Add to INTEGRATION_IDE_MAPPING

Add environment variable mapping in INTEGRATION_IDE_MAPPING object:

const INTEGRATION_IDE_MAPPING: Record<string, string> = {
  // ... existing mappings
  "New IDE": "new-ide", // Map environment variable value to IDE type
};

Note: ALL_IDE_FILES is automatically calculated from IDE_FILE_MAPPINGS, so no manual update needed.

Step 7: Update Documentation Components

Update React components that display IDE lists:

• IDESelector.tsx: Add full IDE configuration with all required and optional fields
• IDEIconGrid.tsx: Add simplified IDE entry for icon grid display

Important: Ensure the INTEGRATION_IDE value in configExample matches the value in INTEGRATION_IDE_MAPPING from Step 7.4.

Step 9: Verify Hardlink Status and Documentation

• Verify that hardlinks are correctly created
• Check that all configuration files are properly linked
• Ensure documentation is complete and accurate
• Verify that IDE appears correctly in UI components

Step 10: Test IDE-specific Download Functionality

Test the IDE-specific download feature:

• Test downloading templates with the new IDE type
• Verify that only relevant files are included
• Ensure the filtering logic works correctly
• Test that IDE selector and icon grid display the new IDE correctly

Important Notes

1. File Naming Conventions: Follow existing naming patterns for consistency 2. Directory Structure: Maintain the same directory structure as other IDE configurations 3. MCP Configuration: If the IDE supports MCP, ensure .mcp.json is properly configured 4. Documentation: Always update all relevant documentation files 5. Testing: Thoroughly test the new IDE support before marking as complete

Example

/add-aiide I need to add support for "NewIDE" AI editor
→ Guide through all 10 steps to add complete IDE support

Success Criteria

• [ ] IDE-specific configuration files created
• [ ] IDE icon fetched from official website and uploaded to cloud storage
• [ ] Hardlink script updated and executed
• [ ] IDE setup documentation created
• [ ] All documentation files updated (README.md, doc/index.mdx, doc/faq.md)
• [ ] UI components updated with correct icon URLs (IDESelector.tsx, IDEIconGrid.tsx)
• [ ] Code mappings updated (IDE_TYPES, RAW_IDE_FILE_MAPPINGS, IDE_DESCRIPTIONS, INTEGRATION_IDE_MAPPING)
• [ ] Hardlinks verified
• [ ] IDE-specific download functionality tested and working
• [ ] IDE appears correctly in documentation UI with proper icon display

Add Article Tutorial

Function

Add a new article tutorial (from Juejin or other platforms) to the TutorialsGrid component, including metadata extraction from article pages.

Trigger Condition

When user inputs /add_article_tutorial or provides an article URL with request to add it as a tutorial

Default Behavior: If no article URL is provided, automatically open Juejin search page to browse for new CloudBase articles

Workflow

0. Check for New Articles (Default Action)

• Default Behavior: When command is triggered without a specific article URL, automatically open Juejin search page to check for new CloudBase-related articles
• Search URL: https://juejin.cn/search?query=cloudbase&fromSeo=0&fromHistory=0&fromSuggest=0&enterFrom=home_page&sort=1
• Purpose: Browse CloudBase articles from Juejin (掘金)
• Tool: Use mcp_cursor-ide-browser_browser_navigate to open the search page
• Content Filtering Requirements:
• MUST be related to: CloudBase MCP, AI Coding, AI 编程, CloudBase AI Toolkit, MCP 工具, AI 开发工具等
• MUST NOT include:
• 低代码 (low-code), 无代码 (no-code), 微搭, 可视化搭建等低代码平台相关内容
• 活动、福利、奖品、周边、抽奖、参与有礼、晒出、领取等营销活动相关内容
• Preferred topics:
• CloudBase MCP 使用案例
• AI Coding 开发实践
• Cursor/CodeBuddy/WindSurf 等 AI IDE 与 CloudBase 集成
• CloudBase AI Toolkit 使用教程
• MCP 工具开发和应用
• AI 原生开发实践
• Filtering method:
• Check article title and description for relevance
• Skip articles that mention "低代码", "无代码", "微搭", "可视化" prominently
• Skip articles that mention "福利", "活动", "奖品", "周边", "抽奖", "参与有礼", "晒出", "领取" in title (these are marketing/promotional activities)
• Focus on articles that mention "AI", "MCP", "CloudBase MCP", "AI Coding", "AI 编程" in title or description
• Note:
• Search results support sorting by time (sort=1 means sorted by time, newest first)
• Calculate cutoff date: one month ago from current date (e.g., if today is 2025-12-29, look for articles after 2025-11-29)
• Search results show dates in various formats: "3小时前" (3 hours ago), "2025-12-22", etc.
• Juejin article URLs format: https://juejin.cn/post/{article-id}
• Article links in search results should be extractable from the page
• After browsing:
• Identify articles published within the last month
• Filter out low-code related articles (低代码, 无代码, 微搭, 可视化搭建等)
• Filter out activity/promotional articles (福利, 活动, 奖品, 周边, 抽奖, 参与有礼, 晒出, 领取等)
• Prioritize articles related to CloudBase MCP and AI Coding
• Extract article links from filtered results
• If links can be extracted, proceed to extract article information
• If links cannot be extracted, list identified articles and ask user to provide URLs
• User can provide specific article URLs to add, or command can proceed to extract information if URL is already provided

1. Extract Article Information

• Parse article URL (Juejin: juejin.cn/post/..., WeChat: mp.weixin.qq.com/s/..., or other platforms)
• Navigate to article page using browser
• Extract article metadata from page:
• Article title
• Author name (作者名称)
• Publication date (for sorting)
• Article URL
• Article description/summary (optional, can use first paragraph or title)

Key Information to Extract (Juejin):

• Title: Usually in <h1> tag with class containing "title" or in article header
• Author: Usually in author info section, look for author name link or profile
• Date: Usually in time element, format: YYYY-MM-DD or relative time like "3小时前"
• URL: Use the canonical URL from the article page (format: https://juejin.cn/post/{id})

Key Information to Extract (WeChat - for existing articles):

• Title: Usually in <h1> or <h2> tag with id="activity-name" or similar
• Author: Usually in <a> tag with class containing "profile" or "account", or in meta tags
• Date: Usually in <em> tag with id="publish_time" or similar, format: YYYY-MM-DD or YYYY年MM月DD日
• URL: Use the canonical URL from the article page

Note: Article pages may require JavaScript to fully load. Use browser tools to wait for page load and extract information.

2. Determine Tags

• Terminal Tags (终端/平台):
• Common values: ['小程序'], ['Web'], ['小游戏'], ['原生应用']
• Order: ['小程序', 'Web', '小游戏', '原生应用'] (TERMINAL_ORDER constant)
• Determine from article title/content or ask user

• App Type Tags (应用类型):
• Common values: ['游戏'], ['工具/效率'], ['教育/学习'], ['社交/社区'], ['电商/业务系统'], ['多媒体/音视频']
• Determine from article title/content or ask user

• Dev Tool Tags (开发工具):
• Common values: ['CodeBuddy'], ['Cursor'], ['Claude Code'], ['Figma']
• Important: Do NOT include "CloudBase AI Toolkit" or "MCP" - CloudBase MCP is the default backend service for all tutorials and doesn't need to be explicitly tagged
• Determine from article title/content or ask user

• Tech Stack Tags (技术栈) - Optional:
• Common values: ['Vue'], ['React'], ['小程序原生'], ['云函数'], ['云托管']
• Important: Do NOT include "CloudBase AI Toolkit" or "MCP" in techStackTags - CloudBase MCP is the default backend service for all tutorials and doesn't need to be explicitly tagged
• Determine from article title/content or ask user

3. Add to TutorialsGrid.tsx

• Location: doc/components/TutorialsGrid.tsx
• Insert Position: At the beginning of article tutorials array (after line ~26, before existing articles)
• Format:

  {
    id: 'article-{kebab-case-title}',
    title: '{Article Title}',
    description: '{Article Description or Author Name}',
    category: '文章',
    url: '{Article URL}',
    type: 'article',
    terminalTags: ['{tag1}', '{tag2}'],
    appTypeTags: ['{tag1}'],
    devToolTags: ['{tag1}', '{tag2}'],
    techStackTags: ['{tag1}'], // Optional - Do NOT include "CloudBase AI Toolkit" or "MCP"
  },

Note: Articles do NOT have thumbnail field (unlike videos)

4. Sorting

• Requirement: Articles should be sorted in descending order by publication date (newest first)
• New articles should be inserted at the beginning of the article tutorials section
• Important: Juejin search results support sorting by time (sort=1), but still verify publication date from article page
• After adding, verify the chronological order

5. Quality Checklist

• [ ] Article URL is valid and accessible (Juejin, WeChat, or other platforms)
• [ ] Article content is relevant to CloudBase MCP and AI Coding (NOT low-code related)
• [ ] Article does NOT focus on low-code platforms (低代码, 无代码, 微搭, 可视化搭建)
• [ ] Article is NOT a marketing/promotional activity (福利, 活动, 奖品, 周边, 抽奖, 参与有礼, 晒出, 领取等)
• [ ] Article metadata (title, author, date) successfully extracted
• [ ] Publication date is verified (click into article if needed)
• [ ] Article entry added to TutorialsGrid.tsx with correct format
• [ ] All required tags are filled (terminalTags, appTypeTags, devToolTags)
• [ ] Article is placed at correct position (newest first)
• [ ] ID is unique and follows kebab-case format
• [ ] No duplicate entries exist
• [ ] No thumbnail field (articles don't have thumbnails)

Example Usage

Input:

/add_article_tutorial
https://juejin.cn/post/xxxxx

Process: 1. (If no URL provided) Open Juejin search page for CloudBase articles 2. Navigate to article page 3. Extract metadata: Title, Author, Publication Date, URL 4. Determine tags from title: terminalTags: ['小程序'], appTypeTags: ['工具/效率'], devToolTags: ['CodeBuddy'] (Note: CloudBase MCP is default, don't include it) 5. Add entry at beginning of article tutorials array 6. Verify sorting (newest first)

Important Notes

1. Default Search Page: When command is triggered without a specific URL, automatically open the Juejin search page for CloudBase articles to help discover new content.

2. Content Filtering:

• MUST filter out low-code related articles: Skip articles that focus on "低代码", "无代码", "微搭", "可视化搭建" platforms
• MUST filter out activity/promotional articles: Skip articles that are marketing activities, such as "福利", "活动", "奖品", "周边", "抽奖", "参与有礼", "晒出", "领取" in title
• MUST prioritize AI Coding and MCP content: Focus on articles about CloudBase MCP, AI Coding, AI 编程, AI IDE integration
• Relevance check: Before adding an article, verify it's about AI Coding with CloudBase MCP, not low-code platform usage or promotional activities
• If article is primarily about low-code platforms or is a marketing activity, skip it even if it mentions CloudBase

3. Search Results Sorting: Juejin search supports sorting by time (sort=1 means newest first). However, you should still:

• Verify publication date by clicking into articles
• Ensure articles are added in correct chronological order (newest first)
• Filter articles by relevance to CloudBase MCP and AI Coding

3. Tag Determination:

• Try to infer tags from article title and content
• If uncertain, ask user for confirmation
• Ensure all three required tag types are filled
• Never include "CloudBase AI Toolkit" or "MCP" in devToolTags - CloudBase MCP is the default backend service used by all tutorials
• Never include "CloudBase AI Toolkit" or "MCP" in techStackTags - CloudBase MCP is the default backend service and doesn't need to be explicitly tagged

4. ID Generation:

• Use kebab-case format
• Prefix with article-
• Based on article title (simplified, no special characters)

5. Description Field:

• Can use article description/summary, author name, or a brief description
• This appears as gray text below article title in the UI

6. No Thumbnail:

• Articles do NOT have thumbnail images
• Do NOT add thumbnail field to article entries

7. Date Verification:

• Always verify publication date by clicking into the article
• Use the date to determine insertion position (newest first)

8. Multiple Articles:

• If user provides multiple URLs, process them one by one
• Ensure each is added in correct chronological order
• Check dates carefully since search doesn't sort

Error Handling

• Invalid Article URL: Prompt user to provide valid article URL (Juejin: juejin.cn/post/..., WeChat: mp.weixin.qq.com/s/..., or other platforms)
• Page Load Failure: Wait for page to fully load, retry navigation if needed
• Metadata Extraction Failure: Use browser tools to inspect page structure, try alternative selectors
• Date Not Found: Ask user for publication date or skip date-based sorting
• Duplicate Entry: Check existing entries by URL or title, skip if already exists
• Link Extraction Failure from Search Results:
• If unable to extract links directly from search results, identify articles by title, author, and publication date
• Ask user to provide article URLs, or note that links need to be added manually
• When user confirms articles are valid, proceed with adding them once URLs are provided

Differences from Video Tutorial Command

1. No Thumbnail: Articles don't have cover images, so no download/upload step needed 2. No API: Articles don't have a public API, need to scrape from page 3. Browser Required: Must use browser tools to extract information (no API alternative) 4. Platform Support: Supports Juejin (primary), WeChat Official Accounts, and other article platforms

Add Command

Function

Add a new custom command to the workspace for future reuse.

Trigger Condition

When user inputs /add-command

Behavior

Guide the user through defining and registering a new command, prompting for:

• Command name and trigger
• Function description and expected behavior
• Example usage or template (if applicable)
• Placement in the .cursor/commands/ directory using a meaningful filename

Ensure the new command is documented following the standard command file format for easy discovery and consistent usage.

Add Skill

Function

Add a new skill (prompt rule) to the CloudBase AI Toolkit project.

Trigger Condition

When user inputs /add-skill or needs to add a new skill/prompt rule

Workflow

Step 1: Understand Skill Structure

A skill consists of:

• Configuration entry in doc/prompts/config.yaml
• Rule file(s) in config/rules/{skill-id}/ directory
• Generated documentation in doc/prompts/{skill-id}.mdx (auto-generated)
• Generated prompts data in doc/components/prompts.json (auto-generated from config.yaml)
• UI component entry in doc/components/PromptScenarios.tsx (manual update)

Step 2: Create Rule File(s)

Create the rule file(s) in config/rules/{skill-id}/ directory:

1. Main rule file: config/rules/{skill-id}/rule.md

• Must include frontmatter with name and description
• Should follow the standard structure:

     ---
     name: skill-id
     description: Brief description of the skill
     alwaysApply: false
     ---
     
     # Skill Title
     
     Brief description of when to use this skill.
     
     ## When to use this skill
     
     Use this skill when...
     
     ## How to use this skill (for a coding agent)
     
     1. First step
     2. Second step
     ...
     
     ## Core Knowledge
     
     Detailed knowledge and guidelines...

2. Optional sub-files: If the skill is complex, you can split it into multiple files:

• rule.md - Main rule file
• {topic}.md - Sub-topics (e.g., crud-operations.md, pagination.md)
• All files in the directory will be included in the generated documentation

Step 3: Add Configuration to config.yaml

Add a new entry to doc/prompts/config.yaml:

  - id: skill-id
    title: Skill Title (Chinese)
    description: Skill description (Chinese)
    category: category-id  # auth, database, backend, frontend, or tools
    order: number  # Order within the category
    prompts:
      - "Example prompt 1"
      - "Example prompt 2"
    # Optional: if rule files are in a different directory
    # ruleDir: different-directory-name

Important Notes:

• id must match the directory name in config/rules/
• category must be one of: auth, database, backend, frontend, tools
• order determines the display order within the category
• prompts are example prompts users can try

Step 4: Generate Documentation and Prompts Data

Run the generation scripts to create the MDX documentation and prompts JSON:

# Generate MDX documentation from rule files
node scripts/generate-prompts.mjs

# Generate prompts.json from config.yaml (for AIDevelopmentPrompt component)
npm run build:prompts-data

This will:

• Generate doc/prompts/{skill-id}.mdx from the rule files
• Update doc/sidebar.json automatically
• Generate doc/components/prompts.json from config.yaml (used by AIDevelopmentPrompt component)

Step 5: Update PromptScenarios Component

Manually add the new skill to doc/components/PromptScenarios.tsx:

1. Find the appropriate category section 2. Add a new entry following the existing format:

{
  id: 'skill-id',
  title: 'Skill Title',
  description: 'Skill description',
  category: 'Category Name (Chinese)',
  docUrl: '/ai/cloudbase-ai-toolkit/prompts/skill-id',
},

Category Mapping:

• auth → '身份认证'
• database → '数据库'
• backend → '后端开发'
• frontend → '应用集成'
• tools → '开发工具'

Step 6: Verify Generated Files

Check that:

• ✅ doc/prompts/{skill-id}.mdx exists and has correct content
• ✅ doc/sidebar.json includes the new skill in the correct category
• ✅ doc/components/prompts.json includes the new skill with all prompts
• ✅ doc/components/PromptScenarios.tsx includes the new skill
• ✅ Rule files are properly formatted with frontmatter

Step 7: Test the Skill

1. Verify the generated MDX file renders correctly 2. Check that the skill appears in the UI components 3. Test that example prompts work as expected

Important Notes

Rule File Best Practices

1. Frontmatter is required: Every rule file must have YAML frontmatter 2. Clear structure: Follow the standard structure (When to use, How to use, Core Knowledge) 3. English content: Rule files should be in English (documentation is auto-generated in Chinese) 4. Code examples: Include practical code examples when relevant 5. Tool references: Reference specific MCP tools when applicable

Category Guidelines

• auth: Authentication-related skills (login, signup, user management)
• database: Database operations (NoSQL, MySQL, data modeling)
• backend: Backend services (cloud functions, cloudrun)
• frontend: Frontend integration (Web, mini program, UI design)
• tools: Development tools and workflows (spec workflow, platform knowledge)

File Naming Conventions

• Skill ID: lowercase, hyphen-separated (e.g., cloud-functions, auth-web)
• Rule file: Always rule.md for the main file
• Sub-files: Descriptive names (e.g., crud-operations.md, pagination.md)

Example

/add-skill I need to add a new skill for "Cloud Storage Web SDK"

→ Guide through all 7 steps to add complete skill support

Success Criteria

• [ ] Rule file(s) created in config/rules/{skill-id}/
• [ ] Configuration added to doc/prompts/config.yaml
• [ ] Documentation generated via node scripts/generate-prompts.mjs
• [ ] Prompts data generated via npm run build:prompts-data
• [ ] Entry added to doc/components/PromptScenarios.tsx
• [ ] Generated MDX file exists and is correct
• [ ] Generated prompts.json includes the new skill
• [ ] Sidebar updated automatically
• [ ] All files verified and tested

Add Video Tutorial

Function

Add a new Bilibili video tutorial to the TutorialsGrid component, including automatic thumbnail download, cloud storage upload, and metadata extraction.

Trigger Condition

When user inputs /add_video_tutorial or provides a Bilibili video URL with request to add it as a tutorial

Default Behavior: If no video URL is provided, automatically open Bilibili search page to browse for new CloudBase videos

Workflow

0. Check for New Videos (Default Action)

• Default Behavior: When command is triggered without a specific video URL, automatically open Bilibili search page to check for new CloudBase-related videos
• Search URL: https://search.bilibili.com/all?keyword=cloudbase&from_source=webtop_search&spm_id_from=333.1007&search_source=5&order=pubdate
• Purpose: Browse latest CloudBase videos sorted by publication date (newest first)
• Tool: Use mcp_cursor-ide-browser_browser_navigate to open the search page
• Note: This helps discover new videos that haven't been added to the tutorial list yet
• After browsing: User can provide specific video URLs to add, or command can proceed to extract information if URL is already provided

1. Extract Video Information

• Parse Bilibili video URL to extract BV number (e.g., BV1bRBkBFE7x from URL)
• Use Bilibili API to fetch video metadata:
• Video title
• Author name (UP主昵称)
• Thumbnail image URL
• Publication date (for sorting)

API Endpoint: https://api.bilibili.com/x/web-interface/view?bvid={BV号}

Key Fields:

• data.title - Video title
• data.owner.name - Author name (used as description)
• data.pic - Thumbnail image URL

2. Download Thumbnail

• Create temporary directory: /tmp/bilibili-thumbnails/
• Download thumbnail image using curl:

  curl -L "{thumbnail_url}" -o "/tmp/bilibili-thumbnails/{BV号}.jpg"

3. Upload to Cloud Storage

• Prerequisite: Ensure logged into correct CloudBase environment
• Check current environment using envQuery tool
• If wrong environment, user should logout and login again
• Upload thumbnail to cloud storage:
• Cloud Path: video-thumbnails/{BV号}.jpg
• Tool: mcp_cloudbase_manageStorage with action=upload
• Local Path: /tmp/bilibili-thumbnails/{BV号}.jpg
• Get permanent access URL from upload response
• Format: https://{env-id}-{app-id}.tcb.qcloud.la/video-thumbnails/{BV号}.jpg

4. Determine Tags

• Terminal Tags (终端/平台):
• Common values: ['小程序'], ['Web'], ['小游戏'], ['原生应用']
• Order: ['小程序', 'Web', '小游戏', '原生应用'] (TERMINAL_ORDER constant)
• Determine from video title/content or ask user

• App Type Tags (应用类型):
• Common values: ['游戏'], ['工具/效率'], ['教育/学习'], ['社交/社区'], ['电商/业务系统'], ['多媒体/音视频']
• Determine from video title/content or ask user

• Dev Tool Tags (开发工具):
• Common values: ['CodeBuddy'], ['Cursor'], ['Claude Code'], ['Figma']
• Important: Do NOT include "CloudBase AI Toolkit" or "MCP" - CloudBase MCP is the default backend service for all tutorials and doesn't need to be explicitly tagged
• Determine from video title/content or ask user

• Tech Stack Tags (技术栈) - Optional:
• Common values: ['Vue'], ['React'], ['小程序原生'], ['云函数'], ['云托管']
• Important: Do NOT include "CloudBase AI Toolkit" or "MCP" in techStackTags - CloudBase MCP is the default backend service for all tutorials and doesn't need to be explicitly tagged
• Determine from video title/content or ask user

5. Add to TutorialsGrid.tsx

• Location: doc/components/TutorialsGrid.tsx
• Insert Position: At the beginning of video tutorials array (after line ~300, before existing videos)
• Format:

  {
    id: 'video-{kebab-case-title}',
    title: '{Video Title from Bilibili}',
    description: '{Author Name from Bilibili API}',
    category: '视频教程',
    url: '{Bilibili Video URL}',
    type: 'video',
    thumbnail: '{Cloud Storage URL}',
    terminalTags: ['{tag1}', '{tag2}'],
    appTypeTags: ['{tag1}'],
    devToolTags: ['{tag1}', '{tag2}'],
    techStackTags: ['{tag1}'], // Optional - Do NOT include "CloudBase AI Toolkit" or "MCP"
  },

6. Sorting

• Requirement: Videos must be sorted in descending order by publication date (newest first)
• New videos should be inserted at the beginning of the video tutorials section
• After adding, verify the chronological order

7. Quality Checklist

• [ ] Bilibili video URL is valid and accessible
• [ ] Video metadata (title, author) successfully extracted
• [ ] Thumbnail image downloaded successfully
• [ ] CloudBase environment is correct (check envQuery before upload)
• [ ] Thumbnail uploaded to cloud storage successfully
• [ ] Cloud storage URL is permanent (not temporary)
• [ ] Video entry added to TutorialsGrid.tsx with correct format
• [ ] All required tags are filled (terminalTags, appTypeTags, devToolTags)
• [ ] Video is placed at correct position (newest first)
• [ ] ID is unique and follows kebab-case format
• [ ] No duplicate entries exist

Example Usage

Input:

/add_video_tutorial
https://www.bilibili.com/video/BV1bRBkBFE7x/?share_source=copy_web&vd_source=068decbd00a3d00ff8662b6a358e5e1e

Process: 1. (If no URL provided) Open Bilibili search page: https://search.bilibili.com/all?keyword=cloudbase&from_source=webtop_search&spm_id_from=333.1007&search_source=5&order=pubdate 2. Extract BV: BV1bRBkBFE7x 3. Fetch metadata: Title, Author (JavaPub), Thumbnail URL 4. Download thumbnail to /tmp/bilibili-thumbnails/BV1bRBkBFE7x.jpg 5. Upload to video-thumbnails/BV1bRBkBFE7x.jpg 6. Determine tags from title: terminalTags: ['小程序'], appTypeTags: ['工具/效率'], devToolTags: ['CodeBuddy', 'Figma'] (Note: CloudBase MCP is default, don't include it) 7. Add entry at beginning of video tutorials array 8. Verify sorting (newest first)

Important Notes

1. Default Search Page: When command is triggered without a specific URL, automatically open the Bilibili search page for CloudBase videos (sorted by publication date) to help discover new content.

2. Environment Check: Always verify CloudBase environment before uploading. Wrong environment will result in incorrect URLs.

2. Tag Determination:

• Try to infer tags from video title and description
• If uncertain, ask user for confirmation
• Ensure all three required tag types are filled
• Never include "CloudBase AI Toolkit" or "MCP" in devToolTags - CloudBase MCP is the default backend service used by all tutorials
• Never include "CloudBase AI Toolkit" or "MCP" in techStackTags - CloudBase MCP is the default backend service and doesn't need to be explicitly tagged

3. Thumbnail URL Format:

• Use permanent cloud storage URL, not temporary URL
• Format: https://{env-id}-{app-id}.tcb.qcloud.la/video-thumbnails/{BV号}.jpg

4. ID Generation:

• Use kebab-case format
• Prefix with video-
• Based on video title (simplified, no special characters)

5. Description Field:

• Always use author name (UP主昵称) from Bilibili API
• This appears as gray text below video title in the UI

6. Multiple Videos:

• If user provides multiple URLs, process them one by one
• Ensure each is added in correct chronological order

Error Handling

• Invalid Bilibili URL: Prompt user to provide valid Bilibili video URL
• API Failure: Retry API call or use browser to extract information
• Download Failure: Check network connection, retry download
• Upload Failure: Verify CloudBase login status, check environment ID
• Duplicate Entry: Check existing entries by BV number, skip if already exists

Command mapping (docs and knowledge)

Documentation creation

• Command: /create-doc
• Source: references/create_doc.md

Documentation type selection

• Command: /doc-type
• Source: references/doc_type.md

Structured explanation

• Command: /explanation
• Source: references/explanation.md

Issue workflow

• Command: /issue
• Source: references/issue.md

Prototype workflow

• Command: /prototype
• Source: references/prototype.md

Tutorials

• Command: /add_article_tutorial
• Source: references/add_article_tutorial.md

• Command: /add_video_tutorial
• Source: references/add_video_tutorial.md

Project extension workflows

• Command: /add-aiide
• Source: references/add_aiide.md

• Command: /add-skill
• Source: references/add_skill.md

• Command: /add-command
• Source: references/add_command.md

MCP design quality

• Command: /mcp_design_review
• Source: references/mcp_design_review.mdc

Create Documentation

Function

Create comprehensive documentation following Diátaxis framework and OpenAgentKit standards

Trigger Condition

When user inputs /create-doc

Behavior

Guide users through creating documentation that follows both Diátaxis framework principles and OpenAgentKit documentation standards

Process Flow

Step 1: Documentation Type Selection

Use /doc-type to determine the correct documentation type:

• Tutorial (Learning + Doing)
• How-to Guide (Working + Doing)
• Reference (Working + Understanding)
• Explanation (Learning + Understanding)

Step 2: Content Planning

• [ ] Create mind map of reader goals and use cases
• [ ] Define target audience and their knowledge level
• [ ] Plan information architecture and navigation
• [ ] Identify key concepts and examples needed

Step 3: Structure Creation

Based on documentation type, use appropriate template:

• /tutorial for learning-oriented content
• /howto for task-oriented content
• /reference for information-oriented content
• /explanation for understanding-oriented content

Step 4: Content Writing

Apply Diátaxis writing principles:

• [ ] "Face-to-face" principle - write conversationally
• [ ] Zero knowledge assumption - define all terms
• [ ] Pyramid principle - most important first
• [ ] Hemingway clarity - short, active sentences
• [ ] Include multimedia elements - diagrams, code examples

Step 5: Frontmatter Configuration

Ensure proper MDX frontmatter:

---
title: "[Page Title]"
description: "[Brief description for SEO]"
---

Step 6: Quality Review (MANDATORY)

• [ ] Existence Verification: Verify every function, package, and API endpoint exists in codebase
• [ ] No Fabricated Content: Ensure no fake CLI commands, non-existent configs, or made-up features
• [ ] Preview Marking: All incomplete features must be marked with "Coming soon" or "In development"
• [ ] Code Validation: Test all code examples are runnable and accurate
• [ ] Reality Check: Question if features seem too advanced for project maturity
• [ ] Diátaxis Compliance: Verify content type and structure appropriateness
• [ ] Cross-Reference Validation: Test all internal and external links

Integration with OpenAgentKit Standards

Required Elements

• Title: Clear, descriptive title in frontmatter
• Structure: Follow Diátaxis framework for content organization
• Language: English for all technical content
• Examples: Include practical, runnable code samples
• Accuracy: All code examples must be verified against actual codebase
• Honesty: No fabricated functionality - use "Coming soon" for incomplete features

Optional Enhancements

• Interactive elements: Use MDX components when appropriate
• Multiple language examples: JavaScript, TypeScript, Python
• Error handling: Include error handling in code examples
• Cross-references: Link to related documentation

Usage Examples

/create-doc I need to create documentation for our new API authentication system
→ Guide through type selection, structure, and content creation

/create-doc Help me document the agent configuration process
→ Determine if it's tutorial (learning) or how-to (working) based on user needs

Success Criteria (MANDATORY)

• [ ] Zero Fabricated Content: No fake CLI commands, non-existent packages, or made-up features
• [ ] All Code Verified: Every code example tested against actual codebase
• [ ] Preview Marking: All incomplete features clearly marked as "Coming soon"
• [ ] Diátaxis Compliance: Follows framework principles for content type
• [ ] OpenAgentKit Standards: Meets all documentation requirements
• [ ] User Needs Addressed: Content effectively serves target audience
• [ ] Consistent Quality: Maintains professional tone and structure

Documentation Type Selector

Function

Help users identify the correct Diátaxis documentation type for their content

Trigger Condition

When user inputs /doc-type

Behavior

Guide users through the Diátaxis framework to determine the most appropriate documentation type for their content

Diátaxis Framework Decision Tree

Step 1: Identify User State

Is the user in Learning mode or Working mode?

Learning Mode (Acquiring new skills/knowledge):

• User is new to the topic
• User wants to understand concepts
• User is building foundational knowledge
• User needs guided learning experience

Working Mode (Applying existing knowledge):

• User has basic knowledge of the topic
• User needs to complete specific tasks
• User needs to look up information
• User is solving problems

Step 2: Identify Knowledge Type

Is the content about Understanding or Doing?

Understanding (Theoretical knowledge):

• Explaining concepts and principles
• Providing context and background
• Describing how things work
• Information lookup and reference

Doing (Practical knowledge):

• Step-by-step instructions
• Hands-on learning
• Task completion
• Problem solving

Step 3: Determine Documentation Type

Learning Mode + Doing = TUTORIAL
Learning Mode + Understanding = EXPLANATION
Working Mode + Doing = HOW-TO GUIDE
Working Mode + Understanding = REFERENCE

Documentation Type Characteristics

Tutorial (Learning + Doing)

• Purpose: Skill acquisition through guided learning
• Tone: Instructional, supportive, encouraging
• Structure: Progressive learning with hands-on practice
• Use when: Teaching new skills, onboarding, educational content

How-to Guide (Working + Doing)

• Purpose: Task completion and problem solving
• Tone: Practical, direct, solution-focused
• Structure: Direct, actionable steps
• Use when: Specific tasks, troubleshooting, operational procedures

Reference (Working + Understanding)

• Purpose: Information lookup and verification
• Tone: Neutral, factual, authoritative
• Structure: Comprehensive, structured data
• Use when: API docs, command references, technical specifications

Explanation (Learning + Understanding)

• Purpose: Concept comprehension and context
• Tone: Educational, analytical, thought-provoking
• Structure: Conceptual explanation and analysis
• Use when: Architecture overviews, concept explanations, background context

Usage Examples

/doc-type I want to help users learn React Hooks from scratch
→ TUTORIAL (Learning + Doing)

/doc-type I need to document how to deploy an application
→ HOW-TO GUIDE (Working + Doing)

/doc-type I want to explain what microservices architecture is
→ EXPLANATION (Learning + Understanding)

/doc-type I need to document API endpoint parameters
→ REFERENCE (Working + Understanding)

Quality Checklist

• [ ] Identified correct user state (Learning vs. Working)
• [ ] Identified correct knowledge type (Understanding vs. Doing)
• [ ] Selected appropriate documentation type
• [ ] Applied correct tone and structure
• [ ] Followed Diátaxis framework principles

Create Explanation Documentation

Function

Create understanding-oriented explanation documentation following the Diátaxis framework

Trigger Condition

When user inputs /explanation

Behavior

Create a document that meets Diátaxis explanation standards, helping users understand concepts, principles, and context

Diátaxis Classification

• User State: Learning mode (seeking understanding)
• Knowledge Type: Understanding-oriented (concept comprehension)
• Purpose: Deep comprehension and insight

Explanation Characteristics

• User State: Learning mode, seeking understanding
• Goal: Deep comprehension and insight
• Approach: Conceptual explanation and analysis
• Focus: Understanding and context
• Tone: Educational, analytical, thought-provoking

Document Structure Template

# [Concept] Explanation

## What is [Concept]
Definition and basic meaning of [concept]

## Why [Concept] is Needed
- [Problem solved 1]
- [Value provided 1]
- [Application scenario 1]

## How [Concept] Works
[Detailed explanation of how the concept works]

### Core Mechanisms
1. [Mechanism 1]: [Detailed explanation]
2. [Mechanism 2]: [Detailed explanation]
3. [Mechanism 3]: [Detailed explanation]

### Workflow

graph TD A[Start] --> B[Step 1] B --> C[Step 2] C --> D[Step 3] D --> E[End]

## Related Concepts
- **[Related concept 1]**: [Relationship explanation]
- **[Related concept 2]**: [Relationship explanation]
- **[Related concept 3]**: [Relationship explanation]

## Practical Applications
### Application Scenario 1: [Scenario Name]
- **Background**: [Scenario background]
- **Application**: [How to apply]
- **Effect**: [Expected effect]

### Application Scenario 2: [Scenario Name]
[Repeat above structure]

## Best Practices
- [Practice recommendation 1]
- [Practice recommendation 2]
- [Practice recommendation 3]

## Common Misconceptions
**Misconception 1**: [Incorrect understanding]
**Correct Understanding**: [Correct explanation]

**Misconception 2**: [Incorrect understanding]
**Correct Understanding**: [Correct explanation]

## Further Learning
- [Advanced learning resource 1]
- [Related topic 1]
- [Practice project suggestions]

Writing Guidelines

1. Understanding-Oriented

• Focus on promoting understanding
• Provide in-depth analysis and explanation
• Help users build conceptual frameworks

2. Depth

• Provide in-depth analysis and explanation
• Explain principles and mechanisms
• Provide rich context

3. Contextual

• Provide necessary background knowledge
• Explain the history and development of concepts
• Describe application scenarios and value

4. Inspiring

• Inspire user thinking
• Provide different perspectives
• Encourage deep exploration

Quality Checklist

• [ ] Clear concept definition
• [ ] In-depth principle explanation
• [ ] Rich background information
• [ ] Practical application scenarios
• [ ] Related concept relationships
• [ ] Best practice recommendations
• [ ] Common misconception clarification
• [ ] Further learning resources

Usage Example

/explanation Create an explanation document about microservices architecture

This will generate a document to help users deeply understand microservices architecture, including concept definition, working principles, application scenarios, and best practices.

Issue Creation Command

Function

Create GitHub issues using GitHub CLI with standardized format and proper categorization

Trigger Condition

When user inputs /issue followed by issue description

Behavior

1. Parse user input to extract issue details 2. Generate standardized issue title and body 3. Use GitHub CLI to create issue with appropriate labels 4. Provide confirmation with issue URL

Issue Format Standards

Title Format

• Use clear, descriptive titles
• Start with action verb when applicable
• Keep under 100 characters
• Examples:
• "Add support for custom model providers"
• "Fix memory leak in conversation manager"
• "Improve error handling in tool execution"

Body Structure

## Description
Brief description of the issue or feature request

## Problem/Need
What problem does this solve or what need does it address?

## Proposed Solution
How should this be implemented or resolved?

## Acceptance Criteria
- [ ] Criterion 1
- [ ] Criterion 2
- [ ] Criterion 3

## Additional Context
Any additional information, screenshots, or references

Label Categories

• bug: Issues that cause unexpected behavior
• enhancement: New features or improvements
• documentation: Documentation updates needed
• performance: Performance-related issues
• security: Security vulnerabilities or concerns
• breaking-change: Changes that break existing functionality
• good-first-issue: Suitable for new contributors
• help-wanted: Community help needed
• priority-high: High priority issues
• priority-medium: Medium priority issues
• priority-low: Low priority issues

Implementation Steps

1. Parse Input: Extract issue type, description, and details from user input 2. Generate Title: Create standardized title based on issue type 3. Format Body: Structure issue body with required sections 4. Assign Labels: Automatically assign appropriate labels 5. Create Issue: Use gh issue create command 6. Confirm: Display created issue URL and details

GitHub CLI Commands

Basic Issue Creation

gh issue create --title "Issue Title" --body "Issue description" --label "bug,priority-medium"

With Assignee

gh issue create --title "Issue Title" --body "Issue description" --assignee @me --label "enhancement"

With Milestone

gh issue create --title "Issue Title" --body "Issue description" --milestone "v1.0.0" --label "feature"

Input Examples

Bug Report

/issue Fix memory leak in agent conversation manager causing performance degradation after long sessions

Feature Request

/issue Add support for custom model providers to allow integration with local LLM services

Documentation

/issue Update API documentation for new streaming response format

Performance Issue

/issue Optimize tool execution performance for large batch operations

Quality Checklist

• [ ] Issue title is clear and descriptive
• [ ] Issue body follows standard format
• [ ] Appropriate labels are assigned
• [ ] Acceptance criteria are defined
• [ ] Issue is properly categorized
• [ ] No sensitive information included
• [ ] GitHub CLI is authenticated and working

Error Handling

• Validate GitHub CLI authentication
• Check repository access permissions
• Handle network connectivity issues
• Provide clear error messages for common failures
• Suggest troubleshooting steps when needed

Prerequisites

• GitHub CLI installed and authenticated
• Repository access permissions
• Valid GitHub token with issue creation rights

/prototype - Rapid Prototype Development Mode

Command Description

Rapid prototype development mode, focusing on quickly validating ideas and concepts. Suitable for MVP development, proof of concept, technical exploration, and other scenarios.

Work Mode

When using the /prototype command, AI will: 1. Quickly understand core requirements 2. Adopt Minimum Viable Product (MVP) strategy 3. Prioritize core functionality implementation 4. Use rapid prototyping technology stack 5. Focus on functionality validation rather than perfect implementation

Development Principles

• Rapid Iteration: Prioritize core functionality implementation, quickly validate ideas
• Minimum Viable: Only implement necessary features, avoid over-engineering
• Technical Simplification: Use mature and stable technology stack, avoid complex configurations
• Rapid Deployment: Prioritize quick deployment and demonstration
• User Feedback: Design mechanisms for easy user feedback collection

Applicable Scenarios

• MVP (Minimum Viable Product) development
• Proof of Concept (PoC)
• Technical exploration and experimentation
• Rapid demonstration prototypes
• User requirement validation
• Technology selection validation
• Rapid functional prototypes

Development Process

You are a professional frontend development engineer, specializing in creating high-fidelity prototype designs. Your main job is to transform user requirements into interface prototypes that can be directly used for development. Please complete the prototype design of all interfaces through the following methods and ensure that these prototype interfaces can be directly used for development.

1. User Experience Analysis: First analyze the main functions and user needs of this App, determine the core interaction logic. 2. Product Interface Planning: As a product manager, define key interfaces and ensure reasonable information architecture. 3. High-fidelity UI Design: As a UI designer, design interfaces that closely follow real iOS/Android/Web App design standards, using modern UI elements to provide a good visual experience. 4. HTML Prototype Implementation: Use HTML + Tailwind CSS to generate all prototype interfaces, can use FontAwesome to make interfaces more beautiful and closer to real App design. Split code files to maintain clear structure. 5. Each interface should be stored as an independent HTML file, such as home.html, profile.html, settings.html, each interface needs to include its own style script, etc.

• Pages should include basic interactive actions & data logic, not just static content, can be used for actual development.
• Realism Enhancement: Interface dimensions should consider responsiveness, mobile end simulates iPhone 15 Pro, PC end adapts to 1440px width.
• Use real UI images, not placeholder images (can be selected from Unsplash, wikimedia [generally choose 500 size], Pexels, Apple official UI and other resources, choose the most suitable resources, ensure image content matching).

If there are no special requirements, provide at most 4 pages. No need to consider generation length and complexity, ensure the application is rich and practically usable. Please generate complete HTML code according to the above requirements and ensure it can be used for actual development.

IMPORTANT: Only generate HTML prototypes, other technology stacks will be implemented in subsequent development. Even if users request React/mini-program project code, treat it as generating an application, only use HTML implementation, not React/mini-program.

I will design a complete high-fidelity mobile application prototype for you, including user experience analysis, interface planning and HTML implementation. Please first tell me what type of App you want to develop or specific requirements, for example:

1. What type of App is this? (Social, e-commerce, tools, content, etc.) 2. What are the main functional requirements? 3. Are there any specific design style preferences? 4. What core business processes need to be supported?

With this information, I can provide you with:

• Complete user experience analysis report
• Detailed product interface planning
• High-fidelity UI design that conforms to iOS/Android design standards
• HTML+Tailwind CSS prototype code that can be directly used for development

Please provide more specific information about the App you want to develop, and I will generate a complete prototype design solution for you.

Source commands (migrated from .cursor/commands/)

create_doc.md

# Create Documentation

## Function
Create comprehensive documentation following Diátaxis framework and OpenAgentKit standards

## Trigger Condition
When user inputs `/create-doc`

## Behavior
Guide users through creating documentation that follows both Diátaxis framework principles and OpenAgentKit documentation standards

## Process Flow

### Step 1: Documentation Type Selection
Use `/doc-type` to determine the correct documentation type:
- Tutorial (Learning + Doing)
- How-to Guide (Working + Doing)  
- Reference (Working + Understanding)
- Explanation (Learning + Understanding)

### Step 2: Content Planning
- [ ] Create mind map of reader goals and use cases
- [ ] Define target audience and their knowledge level
- [ ] Plan information architecture and navigation
- [ ] Identify key concepts and examples needed

### Step 3: Structure Creation
Based on documentation type, use appropriate template:
- `/tutorial` for learning-oriented content
- `/howto` for task-oriented content
- `/reference` for information-oriented content
- `/explanation` for understanding-oriented content

### Step 4: Content Writing
Apply Diátaxis writing principles:
- [ ] "Face-to-face" principle - write conversationally
- [ ] Zero knowledge assumption - define all terms
- [ ] Pyramid principle - most important first
- [ ] Hemingway clarity - short, active sentences
- [ ] Include multimedia elements - diagrams, code examples

### Step 5: Frontmatter Configuration
Ensure proper MDX frontmatter:

--- title: "[Page Title]" description: "[Brief description for SEO]" ---

### Step 6: Quality Review (MANDATORY)
- [ ] **Existence Verification**: Verify every function, package, and API endpoint exists in codebase
- [ ] **No Fabricated Content**: Ensure no fake CLI commands, non-existent configs, or made-up features
- [ ] **Preview Marking**: All incomplete features must be marked with "*Coming soon*" or "*In development*"
- [ ] **Code Validation**: Test all code examples are runnable and accurate
- [ ] **Reality Check**: Question if features seem too advanced for project maturity
- [ ] **Diátaxis Compliance**: Verify content type and structure appropriateness
- [ ] **Cross-Reference Validation**: Test all internal and external links

## Integration with OpenAgentKit Standards

### Required Elements
- **Title**: Clear, descriptive title in frontmatter
- **Structure**: Follow Diátaxis framework for content organization
- **Language**: English for all technical content
- **Examples**: Include practical, runnable code samples
- **Accuracy**: All code examples must be verified against actual codebase
- **Honesty**: No fabricated functionality - use "*Coming soon*" for incomplete features

### Optional Enhancements
- **Interactive elements**: Use MDX components when appropriate
- **Multiple language examples**: JavaScript, TypeScript, Python
- **Error handling**: Include error handling in code examples
- **Cross-references**: Link to related documentation

## Usage Examples

/create-doc I need to create documentation for our new API authentication system → Guide through type selection, structure, and content creation

/create-doc Help me document the agent configuration process → Determine if it's tutorial (learning) or how-to (working) based on user needs

## Success Criteria (MANDATORY)
- [ ] **Zero Fabricated Content**: No fake CLI commands, non-existent packages, or made-up features
- [ ] **All Code Verified**: Every code example tested against actual codebase
- [ ] **Preview Marking**: All incomplete features clearly marked as "*Coming soon*"
- [ ] **Diátaxis Compliance**: Follows framework principles for content type
- [ ] **OpenAgentKit Standards**: Meets all documentation requirements
- [ ] **User Needs Addressed**: Content effectively serves target audience
- [ ] **Consistent Quality**: Maintains professional tone and structure

doc_type.md

# Documentation Type Selector

## Function
Help users identify the correct Diátaxis documentation type for their content

## Trigger Condition
When user inputs `/doc-type`

## Behavior
Guide users through the Diátaxis framework to determine the most appropriate documentation type for their content

## Diátaxis Framework Decision Tree

### Step 1: Identify User State
**Is the user in Learning mode or Working mode?**

**Learning Mode** (Acquiring new skills/knowledge):
- User is new to the topic
- User wants to understand concepts
- User is building foundational knowledge
- User needs guided learning experience

**Working Mode** (Applying existing knowledge):
- User has basic knowledge of the topic
- User needs to complete specific tasks
- User needs to look up information
- User is solving problems

### Step 2: Identify Knowledge Type
**Is the content about Understanding or Doing?**

**Understanding** (Theoretical knowledge):
- Explaining concepts and principles
- Providing context and background
- Describing how things work
- Information lookup and reference

**Doing** (Practical knowledge):
- Step-by-step instructions
- Hands-on learning
- Task completion
- Problem solving

### Step 3: Determine Documentation Type

Learning Mode + Doing = TUTORIAL Learning Mode + Understanding = EXPLANATION Working Mode + Doing = HOW-TO GUIDE Working Mode + Understanding = REFERENCE

## Documentation Type Characteristics

### Tutorial (Learning + Doing)
- **Purpose**: Skill acquisition through guided learning
- **Tone**: Instructional, supportive, encouraging
- **Structure**: Progressive learning with hands-on practice
- **Use when**: Teaching new skills, onboarding, educational content

### How-to Guide (Working + Doing)
- **Purpose**: Task completion and problem solving
- **Tone**: Practical, direct, solution-focused
- **Structure**: Direct, actionable steps
- **Use when**: Specific tasks, troubleshooting, operational procedures

### Reference (Working + Understanding)
- **Purpose**: Information lookup and verification
- **Tone**: Neutral, factual, authoritative
- **Structure**: Comprehensive, structured data
- **Use when**: API docs, command references, technical specifications

### Explanation (Learning + Understanding)
- **Purpose**: Concept comprehension and context
- **Tone**: Educational, analytical, thought-provoking
- **Structure**: Conceptual explanation and analysis
- **Use when**: Architecture overviews, concept explanations, background context

## Usage Examples

/doc-type I want to help users learn React Hooks from scratch → TUTORIAL (Learning + Doing)

/doc-type I need to document how to deploy an application → HOW-TO GUIDE (Working + Doing)

/doc-type I want to explain what microservices architecture is → EXPLANATION (Learning + Understanding)

/doc-type I need to document API endpoint parameters → REFERENCE (Working + Understanding)

## Quality Checklist
- [ ] Identified correct user state (Learning vs. Working)
- [ ] Identified correct knowledge type (Understanding vs. Doing)
- [ ] Selected appropriate documentation type
- [ ] Applied correct tone and structure
- [ ] Followed Diátaxis framework principles

explanation.md

# Create Explanation Documentation

## Function
Create understanding-oriented explanation documentation following the Diátaxis framework

## Trigger Condition
When user inputs `/explanation`

## Behavior
Create a document that meets Diátaxis explanation standards, helping users understand concepts, principles, and context

## Diátaxis Classification
- **User State**: Learning mode (seeking understanding)
- **Knowledge Type**: Understanding-oriented (concept comprehension)
- **Purpose**: Deep comprehension and insight

## Explanation Characteristics
- **User State**: Learning mode, seeking understanding
- **Goal**: Deep comprehension and insight
- **Approach**: Conceptual explanation and analysis
- **Focus**: Understanding and context
- **Tone**: Educational, analytical, thought-provoking

## Document Structure Template

[Concept] Explanation

What is [Concept]

Definition and basic meaning of [concept]

Why [Concept] is Needed

• [Problem solved 1]
• [Value provided 1]
• [Application scenario 1]

How [Concept] Works

[Detailed explanation of how the concept works]

Core Mechanisms

1. [Mechanism 1]: [Detailed explanation] 2. [Mechanism 2]: [Detailed explanation] 3. [Mechanism 3]: [Detailed explanation]

Workflow

graph TD
    A[Start] --> B[Step 1]
    B --> C[Step 2]
    C --> D[Step 3]
    D --> E[End]

Related Concepts

• [Related concept 1]: [Relationship explanation]
• [Related concept 2]: [Relationship explanation]
• [Related concept 3]: [Relationship explanation]

Practical Applications

Application Scenario 1: [Scenario Name]

• Background: [Scenario background]
• Application: [How to apply]
• Effect: [Expected effect]

Application Scenario 2: [Scenario Name]

[Repeat above structure]

Best Practices

• [Practice recommendation 1]
• [Practice recommendation 2]
• [Practice recommendation 3]

Common Misconceptions

Misconception 1: [Incorrect understanding] Correct Understanding: [Correct explanation]

Misconception 2: [Incorrect understanding] Correct Understanding: [Correct explanation]

Further Learning

• [Advanced learning resource 1]
• [Related topic 1]
• [Practice project suggestions]

## Writing Guidelines

### 1. Understanding-Oriented
- Focus on promoting understanding
- Provide in-depth analysis and explanation
- Help users build conceptual frameworks

### 2. Depth
- Provide in-depth analysis and explanation
- Explain principles and mechanisms
- Provide rich context

### 3. Contextual
- Provide necessary background knowledge
- Explain the history and development of concepts
- Describe application scenarios and value

### 4. Inspiring
- Inspire user thinking
- Provide different perspectives
- Encourage deep exploration

## Quality Checklist
- [ ] Clear concept definition
- [ ] In-depth principle explanation
- [ ] Rich background information
- [ ] Practical application scenarios
- [ ] Related concept relationships
- [ ] Best practice recommendations
- [ ] Common misconception clarification
- [ ] Further learning resources

## Usage Example

/explanation Create an explanation document about microservices architecture

This will generate a document to help users deeply understand microservices architecture, including concept definition, working principles, application scenarios, and best practices.

issue.md

# Issue Creation Command

## Function
Create GitHub issues using GitHub CLI with standardized format and proper categorization

## Trigger Condition
When user inputs `/issue` followed by issue description

## Behavior
1. Parse user input to extract issue details
2. Generate standardized issue title and body
3. Use GitHub CLI to create issue with appropriate labels
4. Provide confirmation with issue URL

## Issue Format Standards

### Title Format
- Use clear, descriptive titles
- Start with action verb when applicable
- Keep under 100 characters
- Examples:
  - "Add support for custom model providers"
  - "Fix memory leak in conversation manager"
  - "Improve error handling in tool execution"

### Body Structure

Description

Brief description of the issue or feature request

Problem/Need

What problem does this solve or what need does it address?

Proposed Solution

How should this be implemented or resolved?

Acceptance Criteria

• [ ] Criterion 1
• [ ] Criterion 2
• [ ] Criterion 3

Additional Context

Any additional information, screenshots, or references

### Label Categories
- **bug**: Issues that cause unexpected behavior
- **enhancement**: New features or improvements
- **documentation**: Documentation updates needed
- **performance**: Performance-related issues
- **security**: Security vulnerabilities or concerns
- **breaking-change**: Changes that break existing functionality
- **good-first-issue**: Suitable for new contributors
- **help-wanted**: Community help needed
- **priority-high**: High priority issues
- **priority-medium**: Medium priority issues
- **priority-low**: Low priority issues

## Implementation Steps

1. **Parse Input**: Extract issue type, description, and details from user input
2. **Generate Title**: Create standardized title based on issue type
3. **Format Body**: Structure issue body with required sections
4. **Assign Labels**: Automatically assign appropriate labels
5. **Create Issue**: Use `gh issue create` command
6. **Confirm**: Display created issue URL and details

## GitHub CLI Commands

### Basic Issue Creation

gh issue create --title "Issue Title" --body "Issue description" --label "bug,priority-medium"

### With Assignee

gh issue create --title "Issue Title" --body "Issue description" --assignee @me --label "enhancement"

### With Milestone

gh issue create --title "Issue Title" --body "Issue description" --milestone "v1.0.0" --label "feature"

## Input Examples

### Bug Report

/issue Fix memory leak in agent conversation manager causing performance degradation after long sessions

### Feature Request

/issue Add support for custom model providers to allow integration with local LLM services

### Documentation

/issue Update API documentation for new streaming response format

### Performance Issue

/issue Optimize tool execution performance for large batch operations

## Quality Checklist
- [ ] Issue title is clear and descriptive
- [ ] Issue body follows standard format
- [ ] Appropriate labels are assigned
- [ ] Acceptance criteria are defined
- [ ] Issue is properly categorized
- [ ] No sensitive information included
- [ ] GitHub CLI is authenticated and working

## Error Handling
- Validate GitHub CLI authentication
- Check repository access permissions
- Handle network connectivity issues
- Provide clear error messages for common failures
- Suggest troubleshooting steps when needed

## Prerequisites
- GitHub CLI installed and authenticated
- Repository access permissions
- Valid GitHub token with issue creation rights

prototype.md

# /prototype - Rapid Prototype Development Mode

## Command Description
Rapid prototype development mode, focusing on quickly validating ideas and concepts. Suitable for MVP development, proof of concept, technical exploration, and other scenarios.

## Work Mode
When using the `/prototype` command, AI will:
1. Quickly understand core requirements
2. Adopt Minimum Viable Product (MVP) strategy
3. Prioritize core functionality implementation
4. Use rapid prototyping technology stack
5. Focus on functionality validation rather than perfect implementation

## Development Principles
- **Rapid Iteration**: Prioritize core functionality implementation, quickly validate ideas
- **Minimum Viable**: Only implement necessary features, avoid over-engineering
- **Technical Simplification**: Use mature and stable technology stack, avoid complex configurations
- **Rapid Deployment**: Prioritize quick deployment and demonstration
- **User Feedback**: Design mechanisms for easy user feedback collection

## Applicable Scenarios
- MVP (Minimum Viable Product) development
- Proof of Concept (PoC)
- Technical exploration and experimentation
- Rapid demonstration prototypes
- User requirement validation
- Technology selection validation
- Rapid functional prototypes

## Development Process

You are a professional frontend development engineer, specializing in creating high-fidelity prototype designs. Your main job is to transform user requirements into interface prototypes that can be directly used for development. Please complete the prototype design of all interfaces through the following methods and ensure that these prototype interfaces can be directly used for development.

1. User Experience Analysis: First analyze the main functions and user needs of this App, determine the core interaction logic.
2. Product Interface Planning: As a product manager, define key interfaces and ensure reasonable information architecture.
3. High-fidelity UI Design: As a UI designer, design interfaces that closely follow real iOS/Android/Web App design standards, using modern UI elements to provide a good visual experience.
4. HTML Prototype Implementation: Use HTML + Tailwind CSS to generate all prototype interfaces, can use FontAwesome to make interfaces more beautiful and closer to real App design. Split code files to maintain clear structure.
5. Each interface should be stored as an independent HTML file, such as home.html, profile.html, settings.html, each interface needs to include its own style script, etc.
- Pages should include basic interactive actions & data logic, not just static content, can be used for actual development.
- Realism Enhancement: Interface dimensions should consider responsiveness, mobile end simulates iPhone 15 Pro, PC end adapts to 1440px width.
- Use real UI images, not placeholder images (can be selected from Unsplash, wikimedia [generally choose 500 size], Pexels, Apple official UI and other resources, choose the most suitable resources, ensure image content matching).

If there are no special requirements, provide at most 4 pages. No need to consider generation length and complexity, ensure the application is rich and practically usable. Please generate complete HTML code according to the above requirements and ensure it can be used for actual development.

IMPORTANT: **Only generate HTML prototypes**, other technology stacks will be implemented in subsequent development. Even if users request React/mini-program project code, treat it as generating an application, only use HTML implementation, not React/mini-program.

I will design a complete high-fidelity mobile application prototype for you, including user experience analysis, interface planning and HTML implementation. Please first tell me what type of App you want to develop or specific requirements, for example:

1. What type of App is this? (Social, e-commerce, tools, content, etc.)
2. What are the main functional requirements?
3. Are there any specific design style preferences?
4. What core business processes need to be supported?

With this information, I can provide you with:
- Complete user experience analysis report
- Detailed product interface planning
- High-fidelity UI design that conforms to iOS/Android design standards
- HTML+Tailwind CSS prototype code that can be directly used for development

Please provide more specific information about the App you want to develop, and I will generate a complete prototype design solution for you.

add_article_tutorial.md

# Add Article Tutorial

## Function
Add a new article tutorial (from Juejin or other platforms) to the TutorialsGrid component, including metadata extraction from article pages.

## Trigger Condition
When user inputs `/add_article_tutorial` or provides an article URL with request to add it as a tutorial

**Default Behavior**: If no article URL is provided, automatically open Juejin search page to browse for new CloudBase articles

add_video_tutorial.md

# Add Video Tutorial

## Function
Add a new Bilibili video tutorial to the TutorialsGrid component, including automatic thumbnail download, cloud storage upload, and metadata extraction.

## Trigger Condition
When user inputs `/add_video_tutorial` or provides a Bilibili video URL with request to add it as a tutorial

**Default Behavior**: If no video URL is provided, automatically open Bilibili search page to browse for new CloudBase videos

add_aiide.md

# Add AI IDE Support

## Function
Add support for a new AI IDE to the CloudBase AI Toolkit project.

## Trigger Condition
When user inputs `/add-aiide` or needs to add support for a new AI IDE

add_skill.md

# Add Skill

## Function
Add a new skill (prompt rule) to the CloudBase AI Toolkit project.

## Trigger Condition
When user inputs `/add-skill` or needs to add a new skill/prompt rule

add_command.md

# Add Command

## Function
Add a new custom command to the workspace for future reuse.

## Trigger Condition
When user inputs `/add-command`

mcp_design_review.mdc

### `/mcp_design_review`

**Function**  
Check whether all MCP tools and specs follow the unified MCP design guidelines.

**Trigger Condition**  
When the user types `/mcp_design_review`.

**Behavior**  

1. **Collect design sources**  
   - Read MCP-related specs (e.g. `specs/agent-functionality/`, `specs/interactive-tools/`, `specs/code-quality-analysis/REFACTORING_CHECKLIST.md`, `specs/function-tool-ai-ergonomics/` if present).  
   - Read MCP implementation files (primarily `mcp/src/tools/*.ts`, especially `functions.ts`, `env.ts`, `storage.ts`, etc).