mini-program-ui-device-skill

Solid

Design, preview, implement, and assess mini-program interfaces against an approved prototype, screenshot, visual reference, design system, or bounded UI request while preserving product semantics and existing accepted behavior. Use when users ask to reproduce a mini-program screen, refine visual hierarchy, adapt layouts across device sizes, handle safe areas or keyboards, inspect touch targets, scrolling, media, or gesture conflicts, compare an implementation with a reference, or prepare a device-verification matrix. Separates proposed visual previews, user approval, source integration, local checks, and real-device evidence; never invents product functionality for visual completeness or claims device validation without device-specific proof.

AI & Automation 59 stars 4 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
59
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
95
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# /mini-program-ui-device-skill — 小程序界面与真机适配 以已确认参考目标和产品语义为准完成界面工作,并严格区分视觉预览、用户确认、正式集成、本地检查与真机证据。参考存在时,忠实度是可验证目标,不用主观“更漂亮”替代。 ## 输入与阶段边界 - 接收已确认原型、截图、参考页面、设计系统、界面问题或设备反馈;先记录权威参考、允许变化、必须保护交互与未知项。 - 若请求涉及高影响视觉风格、角色形象、关键动画或大范围布局,先产出可独立查看的视觉预览,取得用户确认后才能正式集成。 - 缺少可渲染素材时,当场提供 2–3 个具名文字候选,分别说明视觉重点、变化范围与保持不变的产品语义,供用户先选方向;具名文字候选不等于已渲染预览,不能声称视觉效果、动效或设备表现已经得到验证。 - 用户明确要求立即查看效果且当前只读时,在回复中为每个候选附自包含 SVG 或 HTML 预览代码/可直接查看的数据内容,不写入项目;说明预览尺寸、状态和占位素材。它只证明候选画面可查看,不证明正式源码、动效、交互或真机表现。 - 不为了填满页面新增按钮、入口、奖励、状态或数据规则;产品语义冲突时退回产品决策。 - 模拟器或桌面预览不是真机;没有机型、操作步骤、截图/日志或设备结果时,不报告真机通过。 ## 界面与设备流程 1. 将参考目标拆为布局、层级、间距、尺寸、形态、色彩、字体、素材、交互和状态,并标记可精确比较项。 2. 建立 `proposed` → `proposal-approved` → `implemented` → `locally-verified` → `device-verified` 阶段记录;任何阶段不得自动升级。 3. 先制作视觉预览或最小差异方案;用户确认后,仅在授权范围内正式集成并保护已有资产与交互。 4. 检查最窄屏、最长文案、最大数字、空/加载/错误、动态字体(若支持)、安全区、键盘、横竖屏(若支持)和媒体容器。 5. 核对触控热区、滚动容器、固定层、弹层、返回/下拉/横滑等行为,建立手势冲突矩阵并给出优先级与失败路径。 6. 分别记录静态检查、桌面/模拟器预览和真实设备结果;视觉对比采用相同状态、尺寸与素材,不能拿不同条件作结论。 7. 图片、图标、动画、音频或字体发生新增、处理或替换时,按 [资产谱系记录模板](assets/asset-lineage-record.md) 记录原始/衍生关系、处理方式、槽位、尺寸、透明通道、哈希、批准范围和替换关系。 8. 批准只覆盖点名文件、变体和目标槽位。旧资产默认保留到新资产验证完成且回滚入口可查;没有明确删除授权时不得删除旧资产,替换关系本身也不授权删除。 9. 使用 [无障碍验证矩阵](assets/accessibility-matrix.md) 分开检查 ARIA/读屏语义、动态字体、对比度、触控热区和焦点顺序;静态结果不冒充真机证据。 10. 使用 [界面与设备工作流](references/ui-device-workflow.md) 自检,并按 [界面与设备证据模板](assets/ui-device-evidence-record.md) 交付。 ## 最低输出 - 权威参考目标、状态/尺寸、允许变化、必须保护项和未知项。 - 参考与实现的差异表,以及视觉预览或集成文件清单。 - 发生资产处理时提供资产谱系;预览批准只覆盖点名文件、变体和目标槽位。 - 批准或替换证据不完整时,明确输出“批准仅限已点名的文件、变体与槽位”和“当前必须保留...

Details

Author
NocodeMrLi
Repository
NocodeMrLi/mini-program-engineering-skill-suite
Created
4 weeks ago
Last Updated
3 days ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

mini-program-verification-skill

Verify mini-program implementations and fixes with risk-calibrated evidence across static checks, unit tests, integration tests, state matrices, simulators, real devices, cloud environments, and release artifacts. Use when users ask to test, validate, accept, regression-check, quality-check, confirm readiness, or determine whether a mini-program feature is actually complete. Binds results to a source and build fingerprint, records commands and observable evidence, separates passed, failed, blocked, and not-run layers, prioritizes the next highest-information check, and never converts local success into device, cloud, release, or formal acceptance claims.

59 Updated 3 days ago
NocodeMrLi
AI & Automation Listed

prop-asset

道具资产参考图生成预设。触发词:道具、物品、物件、道具设计、道具资产、prop、物品图。输出静态参考图任务说明与资产合同, 供 02-art-director、03-storyboard-director、04-prompt-engineer 及图生视频使用。

0 Updated today
Jv1337x
AI & Automation Solid

mini-program-implementation-skill

Implement bounded features and fixes in existing or new mini-program codebases while preserving repository rules, user-owned changes, approved behavior, assets, framework conventions, and evidence boundaries. Use when users ask to write or modify mini-program code, implement a confirmed specification or architecture, add a scoped feature, remove behavior semantically, update internal documentation required by a change, or carry out a well-defined small fix that does not require root-cause investigation. Establishes a baseline and change boundary, applies test-driven small steps, distinguishes source from generators and build artifacts, verifies the affected contract, and never reports source completion as device validation, formal acceptance, upload, or release.

59 Updated 3 days ago
NocodeMrLi