by 安全扫描
OpenClaw
安全
high confidenceThis is an instruction-only WeChat Mini Program UI/UX design/review skill whose requirements and runtime instructions are consistent with its stated purpose and do not request credentials, installs, or external network behavior.
评估建议
This skill appears coherent and low-risk: it only provides design and implementation guidance for WeChat Mini Programs and includes local reference files. Before installing or using it, consider: (1) the source/homepage is unknown—confirm you trust the owner if provenance matters; (2) when the agent emits WXML/WXSS/JS code, review generated code for correctness, security, and any accidental inclusion of external endpoints or credentials; (3) test generated code in a non-production environment; a...详细分析 ▾
✓ 用途与能力
The name/description (WeChat Mini Program UI/UX) matches the contents: guidance for WXML/WXSS/JS, design patterns, anti-patterns, and a delivery checklist. No unrelated credentials, binaries, or permissions are requested.
✓ 指令范围
SKILL.md instructs the agent to follow a design workflow and to read local reference files included in the skill. It does not direct the agent to read unrelated system files, environment variables, or send data to external endpoints.
✓ 安装机制
No install spec and no code files—this is instruction-only, so nothing is downloaded or written to disk during installation.
✓ 凭证需求
The skill declares no required environment variables, credentials, or config paths; that aligns with the purely advisory/design nature of the skill.
✓ 持久化与权限
always is false and the skill has no install actions or requests for persistent privileges. Autonomous invocation is allowed by default but is not combined here with elevated access.
安全有层次，运行前请审查代码。
运行时依赖
无特殊依赖
版本
latestv0.1.02026/3/25
Initial release of WeChat Mini Program UI/UX skill. - Provides structured guidance for designing, implementing, and reviewing WeChat Mini Program interfaces. - Emphasizes mobile-first, WeChat-native patterns and strict avoidance of common UI anti-patterns. - Includes a detailed workflow for page design, from goal identification to state handling and delivery checklist. - Outlines platform-specific rules, visual direction, and implementation notes tailored for mini programs. - Reference links to WeChat principles and design-system workflow are included for deeper guidance.
● 无害
安装命令
点击复制官方npx clawhub@latest install wechat-miniprogram-ui-ux
镜像加速npx clawhub@latest install wechat-miniprogram-ui-ux --registry https://cn.longxiaskill.com
技能文档
Use this skill for WeChat Mini Program UI work. It is specific to mini program constraints, not generic web UI.
Goals
- Keep the interface native to WeChat usage habits.
- Preserve a clear page focus and one dominant action.
- Optimize for mobile reading, tap comfort, and short task completion.
- Always handle loading, empty, error, and permission-denied states.
- Produce intentional visuals, but never fight the platform chrome or interaction model.
Workflow
- Identify the target:
- Read the relevant references:
references/wechat-design-principles.md
- Design-system workflow and anti-pattern framing: references/design-system-pattern.md
- Generate a compact page design system before editing code:
- Implement in mini program primitives first:
rpx for layout sizing
- Respect safe areas and fixed bottom actions
- Keep JS logic state-driven and explicit
- Run a pre-delivery review against the checklist in
references/wechat-design-principles.md.
Output Shape
When designing or implementing, structure thinking in this order:
- Page intent
- Primary action
- Content hierarchy
- State coverage
- Visual system
- Interaction details
Keep this short unless the user asks for a full spec.
Platform Rules
- Design for narrow mobile viewports first.
- Avoid desktop-like dense tables, tiny controls, and hover-dependent interactions.
- Do not place critical actions where the WeChat top-right capsule area creates conflict.
- Keep navigation obvious. Users should know where they are, what they can do next, and how to go back.
- Prefer one primary CTA per screen section; secondary actions should be visually quieter.
- If a page can fail to load, never leave a blank screen. Show a visible recovery path.
- If data may be absent, design an intentional empty state with next action.
- If permissions or login are required, explain the reason before prompting.
Visual Direction
- Favor clean, high-contrast, mobile-readable layouts over decorative complexity.
- Use bold visual direction only when it still supports fast comprehension.
- Build around 1 strong accent color plus stable neutrals.
- Use cards, spacing, and typography to create hierarchy before adding extra decoration.
- Keep imagery purposeful. Hero images must not bury the core action.
- Motion should explain state changes, not decorate idle elements.
Common Mini Program Patterns
- Lists: sticky filters only if they materially help scanning; preserve scroll performance.
- Detail pages: title, summary, trust/context, primary CTA, then secondary content.
- Forms: short sections, explicit labels, inline validation, submit-state feedback.
- Bottom bars: reserve for the most important action only; support safe-area padding.
- Management screens: show role, status, and allowed actions clearly to reduce permission confusion.
Anti-Patterns
- Web landing-page aesthetics copied directly into mini program task pages.
- Multiple competing CTAs in the first viewport.
- Light text on busy image backgrounds without a reliable contrast layer.
- Long ungrouped forms with placeholder-only labels.
- Blank screens on request failure.
- Destructive actions styled too similarly to primary confirm actions.
- Overuse of gradients, glass effects, or shadow stacks that hurt readability on small screens.
- Dense information blocks without section headers or spacing rhythm.
Implementation Notes
- Prefer page-level tokens or CSS variables when establishing a new visual direction.
- Reuse existing project patterns if the codebase already has a design language.
- If the existing screen is inconsistent, align it to WeChat principles first, then improve aesthetics.
- When reviewing code, prioritize usability regressions over purely visual opinions.
References
references/wechat-design-principles.mdreferences/design-system-pattern.md