القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/TXYzznc/GP --skill animateيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
| name | animate |
| description | 评审功能并通过有目的性的动画、微交互和动效来优化它，提升易用性并带来愉悦体验。 |
| args | [{"name":"target","description":"The feature or component to animate (optional)","required":false}] |
| user-invokable | true |
| tags | frontend-animation, micro-interactions, motion-design, accessibility, performance-optimization |
| tags_cn | 前端动画, 微交互实现, 动效设计, 无障碍访问, 性能优化 |
分析功能并战略性地添加动画和微交互，以增强用户理解、提供反馈并带来愉悦感。
如果没有必要的上下文信息，你无法出色完成工作，比如目标受众（关键信息）、预期使用场景（关键信息）、品牌个性/风格（活泼 vs 严肃，活力四射 vs 沉稳）以及性能限制。
尝试从当前对话线程或代码库中收集这些信息。
在得到答案之前不要继续推进。猜测会导致不合适或过度的动画效果。
分析哪些场景下添加动效可以提升体验：
识别静态区域：
理解上下文信息：
如果从代码库中无法明确以上任何一点，请{{ask_instruction}}
关键提示：请尊重prefers-reduced-motion设置。始终为有需求的用户提供无动画替代方案。
制定有目的性的动画方案：
重要提示：一个精心编排的体验胜过零散分布的多个动画。专注于高影响力的场景。
按以下类别系统性地添加动效：
为每个动画选择合适的技术：
按用途划分的时长：
缓动曲线（请使用这些，而非CSS默认值）：
/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
/* AVOID - feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
退场动画比入场动画更快，使用入场时长的约75%。
/* Prefer for simple, declarative animations */
- transitions for state changes
- @keyframes for complex sequences
- transform + opacity only (GPU-accelerated)
/* Use for complex, interactive animations */
- Web Animations API for programmatic control
- Framer Motion for React
- GSAP for complex sequences
transform和opacity，避免布局属性contain@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
绝对禁止：
prefers-reduced-motion——这违反无障碍访问规范全面测试动画效果：
记住：动效应增强理解并提供反馈，而不仅仅是装饰。要有目的地添加动画，尊重性能限制，并始终考虑无障碍访问。优秀的动画是无形的——它只是让一切感觉恰到好处。
创建具有高设计水准、独特且可用于生产环境的前端界面。当用户要求构建Web组件、页面、制品、海报或应用（例如网站、着陆页、仪表板、React组件、HTML/CSS布局，或对任何Web UI进行样式设计/美化）时，可使用此技能。生成富有创意、经过打磨的代码和UI设计，避免通用的AI美学风格。
具备世界级游戏UI设计专业能力，融合任天堂UI理念的清晰性、《死亡空间》与《银河战士Prime》的沉浸式叙事化界面，以及电竞游戏的竞技可读性原则。游戏UI是连接玩家意图与游戏响应的无形桥梁。优秀的游戏UI在不破坏沉浸感的前提下为玩家服务，能在激烈的游戏过程中瞬间传达关键信息，引导新玩家的同时又不会让老玩家感到被轻视，还能流畅适配从4K显示器到掌机屏幕、从键盘到触摸再到控制器的各类场景。顶尖的游戏UI设计师深知，屏幕上的每一个像素都弥足珍贵——它们是从游戏世界中“借”来的。当提及“game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game tooltip, game-ui, hud, game-interface, game-menu, controller-ui, diegetic, game-design, accessibility, console, mobile-games”这些关键词时适用。
Clash of Gods 项目角色美术资源 AI 绘图提示词生成器。 支持两种模式： - 影视级CG角色设定图（三视图+细节展示板，UE5/PBR质感，适合主要角色、Boss） - 游戏立绘/头像（游戏内使用的角色卡面、头像、立绘） 当用户提到"角色设定图"、"三视图"、"设定板"、"CG质感"、"影视级"、"角色海报"、 "立绘"、"头像"、"角色卡面"、"人物设计"时，立即使用此技能。 即使用户只给出角色名称和简单描述，也应主动使用此技能生成完整提示词。
استنادا إلى تصنيف SOC المهني