Skip to main content

Auto-Generate AI Skills from Existing Code

Scenario​

You have a mini program that's half-built or already in production, and you want to add AI capabilities. Use mp-skills create --mode agent to let AI scan your source code, analyze business logic, and generate a wx.modelContext-compliant SKILL subpackage — no manual coding required.

Compare with the manual approach:

AspectAuto-Generate (this guide)Manual (Recipe 2)
Use caseExisting project, fast integrationFrom scratch, full control
Time to resultFast — describe the scenarioSlow — learn the full spec
Code controlAI generates, requires reviewWrite every line yourself
Output qualityDepends on LLM + templatesDepends on developer experience

Golden rule: AI-generated doesn't mean review-free — always run validate and review generated code.

Prerequisites​

  • WeChat DevTools Nightly build installed
  • Mini program AppID obtained and AI Development Mode enabled
  • Node.js ≥ 18
  • A mini program source directory with real business code (pages/, api/ directories)
  • npx mp-skills --version outputs a version number
  • npx skills --version outputs a version number
  • LLM credentials configured (required by create --mode agent):
export WXA_SKILL_EVAL_LLM_BASE_URL=<your-endpoint>
export WXA_SKILL_EVAL_LLM_API_KEY=<your-key>
export WXA_SKILL_EVAL_LLM_MODEL=<model-name>

Credentials are written to .env in the project directory. See tools.md for supported providers.

Steps​

Step 1: Install the tool SKILL​

Tool SKILLs are instruction files for AI coding tools. They tell the AI how to analyze source code and generate SKILL subpackages.

# Run in your project root directory
npx skills add TencentCloudBase/mp-skills -s wxa-skills-generate

Expected output:

* 添加 Skill <wxa-skills-generate> ...
[OK] 安装完成

Verify installation:

npx skills list | grep wxa-skills-generate

Step 2: Describe the business scenario in your AI IDE​

Open your mini program project in an AI IDE (e.g., CodeBuddy, Cursor). Tell the AI what you want:

Example prompt:

Extract the "product search" feature from this mini program into an AI SKILL.

Business description: Users search products by keyword, filter by category, view product details and stock status.

Key pages: pages/search/, pages/product-detail/

Key APIs: /api/product/search, /api/product/detail

Once the AI reads the wxa-skills-generate SKILL.md, it follows a predefined workflow:

  1. Phase 1 — Project scan: Read app.json, project.config.json, verify AI dev mode is configured
  2. Phase 2 — Permission scan: Check against JSAPI whitelist
  3. Phase 3 — Source analysis: Scan pages/search/, pages/product-detail/ to extract network API calls (wx.request URLs, params, response structure) and wx API calls
  4. Phase 4 — Atomic API design: Decompose business logic into standalone atomic APIs (searchProducts, getProductDetail, getCategories)
  5. Phase 5 — Code generation: Generate the complete SKILL subpackage
  6. Phase 6 — Config integration: Update app.json, project.config.json

Step 3: Review the generated output​

Verify the generated file structure:

miniprogram/skills/search-skill/
├── SKILL.md          # Skill description — read by the AI engine
├── mcp.json          # Atomic API definitions
├── index.js          # Entry point — registers all atomic APIs
├── apis/
│   ├── searchProducts.js    # Product search
│   ├── getProductDetail.js  # Product detail
│   └── getCategories.js     # Category list
├── utils/
│   └── util.js       # Shared utilities (networking, auth, etc.)
└── components/
    ├── productList/  # List display component
    └── productCard/  # Product card component

Key review items:

  • Are all API definitions complete in mcp.json (parameters, return types)?
  • Does index.js register every API listed in mcp.json?
  • Are wx.request URLs correct in the API implementations?
  • Are configuration values (baseUrl, env) correctly hardcoded in utils/util.js?

Step 4: Run validate​

Run static checks on the generated code:

npx mp-skills validate

Expected output:

[OK] 项目配置检查通过
[OK] 接口定义与实现一致
[OK] 原子组件定义完整

If validation fails:

  • Fix errors and re-run validate
  • Or feed error messages back to the AI IDE for iterative fixes (use --query parameter or describe in conversation)

Step 5: Verify in DevTools​

# macOS
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project /your/project/path

# Windows
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "D:\...\project"

In DevTools:

  1. Set base library to ≥ 3.16.1
  2. Switch to "Mini Program AI Compile" mode
  3. Find your generated skill in the SKILL list and test each atomic API

Step 6 (optional): Run quality evaluation​

For production-grade skills, run end-to-end evaluation:

npx mp-skills eval -s search-skill -c 5

This generates 5 test cases, executes them automatically, and produces a quality report.

Verification Checklist​

  • miniprogram/skills/<name>/ directory structure is complete
  • npx mp-skills validate passes all checks
  • Atomic APIs can be called in DevTools
  • mcp.json API definitions match apis/ implementations one-to-one
  • Code reviewed and verified free of logic errors

Common Issues​

What LLM credentials does create --mode agent need?

Set WXA_SKILL_EVAL_LLM_BASE_URL, WXA_SKILL_EVAL_LLM_API_KEY, and WXA_SKILL_EVAL_LLM_MODEL. See the LLM credentials section in tools.md.

Is AI-generated code production-ready?

It depends on source code quality:

  • Well-structured, well-named source → high quality output
  • Compressed/obfuscated code → poor quality, deobfuscate first
  • Always run validate
  • Always review core files (mcp.json, index.js) manually

What if a required API is missing?

Two approaches:

  1. Describe what's missing in your AI IDE and let it iterate
  2. Add it manually — refer to the manual SKILL tutorial

Tool SKILL installation fails?

Ensure npx skills --version works. Tool SKILLs use the skills CLI, not mp-skills.

Reference​