重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
professionalism-credibility by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill professionalism-credibility创建传达能力、严肃性和符合商业标准的精致动画。
专业性意味着尊重用户时间和上下文的运动。可信度来自于展示技术能力而非炫耀的动画。
无到最小(0-5%)。专业界面使用刚硬、精确的运动。物体保持精确的比例。
简短且功能性强(50-100毫秒)。仅足以防止意外。无戏剧性的准备动作——直奔主题。
清晰的层次结构和目的。符合商业标准的布局。每个元素都位于其适当位置,功能明确。
完全避免。专业运动是受控且可预测的。无自发性或变化。
最小化、受控的稳定过程。快速稳定。无弹跳或趣味性——立即完成。
平滑、专业的曲线。标准缓动,感觉精致但不装饰性。使用 ease-out 以提高效率。
最小化曲线,首选直接路径。专业运动是高效的。直线传达直接性。
仅限功能性。加载状态、进度指示器。无装饰性动画——一切都服务于一个目的。
高效且一致(150-250毫秒)。足够快以感觉响应迅速,足够慢以跟踪。无浪费时间。
无。逼真、成比例的运动。专业意味着脚踏实地且可信。
精确、一致的几何形状。完美对齐。每个细节都体现技术准确性。
干净、系统化的设计。基于网格的布局。中性色彩。功能优先的美学。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 元素 | 持续时间 | 缓动 |
|---|
| 过渡 | 150-250毫秒 | ease-out |
| 反馈 | 100-150毫秒 | ease-out |
| 模态框 | 200-250毫秒 | ease-out |
| 数据更新 | 150-200毫秒 | ease-in-out |
--pro-standard: cubic-bezier(0.4, 0, 0.2, 1);
--pro-enter: cubic-bezier(0.0, 0, 0.2, 1);
--pro-exit: cubic-bezier(0.4, 0, 1, 1);
@keyframes pro-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pro-slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.professional-element {
animation: pro-slide-up 200ms ease-out forwards;
}
每周安装量
45
代码仓库
GitHub 星标数
20
首次出现
2026年1月24日
安全审计
安装于
codex39
gemini-cli36
opencode36
cursor35
github-copilot33
claude-code31
Create animations that convey competence, seriousness, and business-appropriate polish.
Professionalism means motion that respects users' time and context. Credibility comes from animations that demonstrate technical competence without showing off.
None to minimal (0-5%). Professional interfaces use rigid, precise motion. Objects maintain exact proportions.
Brief and functional (50-100ms). Just enough to prevent surprise. No theatrical preparation—get to the point.
Clear hierarchy and purpose. Business-appropriate layouts. Every element in its proper place with clear function.
Avoid entirely. Professional motion is controlled and predictable. No spontaneity or variation.
Minimal, controlled settling. Quick stabilization. No bouncing or playfulness—immediate completion.
Smooth, professional curves. Standard easing that feels polished but not decorative. ease-out for efficiency.
Minimal curves, direct paths preferred. Professional motion is efficient. Straight lines communicate directness.
Functional only. Loading states, progress indicators. No decorative animation—everything serves a purpose.
Efficient and consistent (150-250ms). Quick enough to feel responsive, slow enough to track. No wasted time.
None. Realistic, proportional movements. Professional means grounded and believable.
Precise, consistent geometry. Perfect alignment. Technical accuracy in every detail.
Clean, systematic design. Grid-based layouts. Neutral colors. Function-first aesthetics.
| Element | Duration | Easing |
|---|---|---|
| Transitions | 150-250ms | ease-out |
| Feedback | 100-150ms | ease-out |
| Modals | 200-250ms | ease-out |
| Data updates | 150-200ms | ease-in-out |
--pro-standard: cubic-bezier(0.4, 0, 0.2, 1);
--pro-enter: cubic-bezier(0.0, 0, 0.2, 1);
--pro-exit: cubic-bezier(0.4, 0, 1, 1);
@keyframes pro-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pro-slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.professional-element {
animation: pro-slide-up 200ms ease-out forwards;
}
Weekly Installs
45
Repository
GitHub Stars
20
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex39
gemini-cli36
opencode36
cursor35
github-copilot33
claude-code31
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装