技能 emil-design-eng

📦

emil-design-eng

Name: emil-design-eng
Author: emilkowalski

内容修订 r2 安全 ⚙️ 外部命令🌐 网络访问

运用设计工程原则打磨界面

界面细节可能显得不一致、迟缓或在视觉上脱节。此技能运用实用的动效、交互、性能和无障碍指导来提升 UI 的精致度。

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "emil-design-eng" from https://skillstore.io/skills/emilkowalski-emil-design-eng.md and its manifest at https://skillstore.io/api/skills/emilkowalski-emil-design-eng/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/emilkowalski-emil-design-eng.md 已签名 manifest GET /api/skills/emilkowalski-emil-design-eng/manifest 已签名 lockfile GET /api/skills/emilkowalski-emil-design-eng/lockfile

测试它

正在使用“emil-design-eng”。审查一个使用 ease-in 在 400ms 内打开、并从零开始缩放的下拉菜单。

预期结果:

用更短的 ease-out 过渡替换缓慢的进入动画，以提供即时反馈。
以接近完整尺寸和较低不透明度开始，使下拉菜单保持视觉连续性。
将触发器位置用作变换原点。

正在使用“emil-design-eng”。为每天多次打开的命令面板推荐动画行为。

预期结果:

打开和关闭面板时不使用动画。高频键盘操作应立即响应，避免反复造成视觉延迟。

正在使用“emil-design-eng”。审计一个突然停止且忽略减少动态效果设置的可拖拽抽屉。

预期结果:

在抽屉边界之外添加渐进式阻尼，避免硬性停止。
捕获活动指针，并在拖拽期间忽略额外触摸。
启用减少动态效果时移除位置动画，同时保留有用的不透明度反馈。

安全审计

安全

v5 • 2026/7/23 打开版本化报告

All 97 static findings are false positives after contextual review of SKILL.md. The 90 command findings are Markdown delimiters or browser UI examples, not shell execution. The remaining findings are ordinary hyperlinks and design prose; no malicious intent or prompt injection was found.

已扫描文件

680

分析行数

复核项

已忽略误报

风险因素

⚙️ 外部命令 (50)

SKILL.md:44 SKILL.md:45 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:52-58 SKILL.md:58-110 SKILL.md:110-119 SKILL.md:119-121 SKILL.md:121 SKILL.md:145 SKILL.md:160-162 SKILL.md:162-173 SKILL.md:173-181 SKILL.md:181-183 SKILL.md:183-187 SKILL.md:187-189 SKILL.md:189-201 SKILL.md:201 SKILL.md:203-211 SKILL.md:211-217 SKILL.md:217-219 SKILL.md:219-221 SKILL.md:221-232 SKILL.md:232-236 SKILL.md:236 SKILL.md:238-248 SKILL.md:248-256 SKILL.md:256-272 SKILL.md:272-278 SKILL.md:278-293 SKILL.md:293-297 SKILL.md:297-301 SKILL.md:301-303 SKILL.md:303-320 SKILL.md:320-328 SKILL.md:328-339 SKILL.md:339-341 SKILL.md:341 SKILL.md:343-349 SKILL.md:349-355 SKILL.md:355 SKILL.md:357-367 SKILL.md:367-373 SKILL.md:373 SKILL.md:377 SKILL.md:379-392 SKILL.md:392-400 SKILL.md:400-404 SKILL.md:404-406

🌐 网络访问 (2)

SKILL.md:12 SKILL.md:123

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/emilkowalski-emil-design-eng/security.svg)](https://skillstore.io/skills/emilkowalski-emil-design-eng?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/emilkowalski-emil-design-eng?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-emil-design-eng/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/emilkowalski-emil-design-eng.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

emilkowalski. (2026). emil-design-eng security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5

BibTeX 引用

@techreport{emilkowalski-emilkowalski-emil-design-eng-2026,
  author = {emilkowalski},
  title = {emil-design-eng security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "emil-design-eng security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "emilkowalski"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/emilkowalski-emil-design-eng/audits/5"
identifiers:
  - type: other
    value: "skillstore:emilkowalski-emil-design-eng:audit:5"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

可维护性

内容

社区

规范符合性

你能构建什么

审查前端组件

在发布前发现组件中的动效、反馈、无障碍和性能问题。

定义产品动效

为产品界面中的常见交互创建一致的动画规则。

优化组件库

改进按钮、工具提示、弹出框、抽屉、提示消息和手势的默认行为。

试试这些提示

审查单个交互

审查此按钮交互。它在按下时缩放，并使用 300ms 动画。请识别影响最大的改进项。

审计组件代码

使用包含 Before、After 和 Why 的 markdown 表格审查以下组件代码。重点关注缓动、时长、变换原点、悬停行为和减少动态效果：[paste code]

设计动效行为

为 [component or workflow] 设计动效行为，其使用频率为 [frequency]。请建议应动画化的内容、时长、缓动、可中断性、无障碍和性能方案。

审计交互系统

审计按钮、工具提示、弹出框、抽屉、提示消息和拖拽手势。按对用户的影响排列问题优先级。说明权衡，并提出一份统一的动效规范：[paste requirements]

最佳实践

提供组件代码、交互频率、目标设备和产品上下文。
使用真实内容、减少动态效果设置、触摸输入和性能较低的硬件测试建议的动效。
将建议视为可衡量的假设，然后比较感知速度和任务完成情况。

避免

不要仅为装饰而为高频重复操作添加动画。
不要在未确认产品个性和交互目的的情况下套用时长值。
不要将动画指导视为浏览器兼容性和无障碍测试的替代品。

常见问题

此技能审查哪些内容？

它审查动效、交互反馈、组件行为、感知性能、手势细节和动画无障碍性。

它会生成完整组件吗？

它可以推荐实现模式和修改方案，但完整输出取决于所提供的代码和框架上下文。

它涵盖哪些动画技术？

它涵盖 CSS transitions、CSS keyframes、Motion 弹簧、Web Animations API、变换、裁剪路径和手势逻辑。

它可以审查现有设计系统吗？

可以。请为每个交互提供具有代表性的组件、动效令牌、无障碍要求和使用频率。

它如何处理减少动态效果？

它建议移除可能引起不适的运动，同时保留有用的不透明度和颜色过渡。

其时长建议具有普适性吗？

不是。它们是实用的起点，应根据产品上下文、设备性能和用户期望进行测试。

开发者详情

作者

emilkowalski

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/emilkowalski/skill/tree/main/skills/emil-design-eng/

引用

c43861a65bb95efcae259cd161c9d6f4dc7eec6f

维护新鲜度

2026/7/25

使用量

12 次下载 · 100 次浏览

文件结构

📄 SKILL.md