skills.rest
gjwroot
gjwrootCOMMUNITY
Explore all skills by this author →
GitHub

wechat-miniprogram-image-icon-diagnosis

Diagnose image and icon issues in WeChat mini-programs by validating URLs, registrations, and mappings.

Updated Mar 24, 2026
Search Tags:#ui#debugging#image#diagnosis#icon#wechat#miniprogram
One-click install
npx skills add https://github.com/gjwroot/trae-skills-collection --skill wechat-miniprogram-image-icon-diagnosis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wechat-miniprogram-image-icon-diagnosis
Source: https://github.com/gjwroot/trae-skills-collection/tree/main/.trae/skills/wechat-miniprogram-image-icon-diagnosis
Command: npx skills add https://github.com/gjwroot/trae-skills-collection --skill wechat-miniprogram-image-icon-diagnosis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify and fix image loading and icon rendering issues in WeChat mini-programs, reducing user-visible errors and improving UI stability.

Core Features & Use Cases

  • Image diagnostics: verify image URLs, detect 404s, check image dimensions and formats, recommend reliable image services.
  • Icon diagnostics: verify component registrations, ensure icon names exist, align icon semantics with copy, fix rendering issues.
  • Best practices: provide practical guidance and concrete code examples to prevent regressions.

Quick Start

Diagnose the reported image or icon issue in the WeChat mini-program by validating URLs, registrations, and mappings, then apply the recommended fixes.

Frequently Asked Questions about wechat-miniprogram-image-icon-diagnosis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix image loading failures and 404 errors in WeChat mini-programs?▼

Fix image loading failures and 404 errors by validating image URL stability, checking image dimensions and formats, and applying deterministic checks in WXML, WXSS, and JS contexts.

Why do my WeChat mini-program icons render incorrectly or fail to show?▼

WeChat mini-program icons render incorrectly or fail to show when component registrations are missing, icon names do not exist, or icon semantics are misaligned with the copy. Verify registrations and mappings to fix rendering issues.

What is the best way to prevent image and icon rendering regressions in WeChat mini-programs?▼

The best way to prevent image and icon rendering regressions is to follow best practices for image URLs, sizes, formats, and icon mappings, using practical guidance and concrete code examples for deterministic checks.

Can I diagnose icon mapping and component registration issues across WeChat mini-program pages?▼

Yes, you can diagnose icon rendering problems across pages and components by verifying component registrations, ensuring icon names exist, and aligning icon semantics with copy in WXML, WXSS, and JS contexts.

Do I need specific dependencies or components to diagnose WeChat mini-program image issues?▼

No specific dependencies or components are required. The diagnosis focuses on analyzing URL stability, component registrations, and icon mappings within standard WXML, WXSS, and JS contexts to identify and fix issues.

Related Skills

Explore More Software Engineering Skills→
muzhicaomingwangmuzhicaomingwang
3

miniapp-design

Generate WXML/WXSS/JS mini-program page code from Obsidian design documents.

Community
Intermediate
wechat-miniprogramwechat-miniprogram
170

wxa-skills-generate

Transform WeChat Mini Program source code into AI-ready skill分包.

Official
Intermediate
AradotsoAradotso
11

wxmini-security-audit

Decompile wxapkg packages and analyze them for exposed secrets and vulnerabilities.

Official
Advanced
LazyIsEfficientLazyIsEfficient
15

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP.

Official
Intermediate