Co-Pilot / 辅助式

更新于 a month ago

design-engineer-auditor-package

Name: design-engineer-auditor-package
Rating: 4.1 (89 reviews)
Author: kylezantos

Kkylezantos

0.1k

kylezantos/design-engineer-auditor-package

Agent 评分

💡 摘要

该技能审计代码库中的运动设计，提供基于既定设计理念的上下文感知反馈。

🎯 适合人群

UI/UX设计师前端开发人员产品经理动画专家质量保证测试人员

🤖 AI 吐槽: “看起来很能打，但别让配置把人劝退。”

安全分析中风险

风险：Medium。建议检查：是否执行 shell/命令行指令；是否发起外网请求（SSRF/数据外发）。以最小权限运行，并在生产环境启用前审计代码与依赖。

Design Motion Principles

Expert motion and interaction design auditor based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Get context-aware, per-designer feedback on your animations.

Installation

npx add-skill kylezantos/design-motion-principles

Works with Claude Code, Cursor, Windsurf, and other AI coding assistants.

What It Does

This skill audits your codebase's motion design through three distinct design philosophies:

| Designer | Philosophy | Best For | |----------|-----------|----------| | Emil Kowalski | Restraint & Speed | Productivity tools, high-frequency interactions | | Jakub Krehel | Production Polish | Shipped consumer apps, professional refinement | | Jhey Tompkins | Creative Experimentation | Kids apps, portfolios, playful contexts |

Key Features

Context Reconnaissance — Analyzes your project type to determine which designer's perspective to prioritize
Motion Gap Analysis — Searches for conditional UI that SHOULD be animated but isn't (conditional renders without AnimatePresence, dynamic styles without transitions)
Per-Designer Audit — Evaluates your code through three lenses with actionable recommendations categorized by severity

Usage

Once installed, just ask:

Audit the motion design in this codebase

The skill will:

Do reconnaissance on your project
Search for motion gaps (missing animations)
Propose a weighting based on context
Wait for your confirmation
Provide the full per-designer audit

Example Output

## Reconnaissance Complete

**Project type**: Kids educational app, mobile-first PWA
**Existing animation style**: Spring animations (500-600ms), framer-motion
**Motion gaps found**: 4 conditional renders without AnimatePresence

**Proposed perspective weighting**:
- **Primary**: Jakub Krehel — Production polish for a shipped consumer app
- **Secondary**: Jhey Tompkins — Playful experimentation for kids
- **Selective**: Emil Kowalski — Only for high-frequency game interactions

Does this approach sound right?

What's Included

skills/
  └── design-motion-principles/
      ├── SKILL.md                    # Main skill with workflow
      ├── audit-checklist.md          # Structured audit criteria
      └── references/
          ├── emil-kowalski.md        # Emil's philosophy & techniques
          ├── jakub-krehel.md         # Jakub's philosophy & techniques
          ├── jhey-tompkins.md        # Jhey's philosophy & techniques
          ├── philosophy.md           # Synthesized design philosophy
          ├── technical-principles.md # Implementation patterns
          ├── accessibility.md        # Motion accessibility guidelines
          ├── performance.md          # Performance best practices
          └── common-mistakes.md      # Anti-patterns to flag

Manual Installation

If you prefer not to use npx add-skill:

Global (all projects):

git clone https://github.com/kylezantos/design-motion-principles.git
cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/

For Cursor:

cp -r design-motion-principles/skills/design-motion-principles ~/.cursor/skills/

Credits

This skill synthesizes motion design principles from:

Emil Kowalski — emilkowal.ski, animations.dev, Sonner, Vaul
Jakub Krehel — krehel.com
Jhey Tompkins — jhey.dev, @jh3yy

License

MIT

五维分析

清晰度9/10

创新性7/10

实用性8/10

完整性9/10

可维护性8/10

优缺点分析

优点

提供关于运动设计的可操作反馈。
利用既定的设计理念。
基于上下文的分析提供量身定制的建议。

缺点

可能需要对特定设计理念的熟悉。
仅限于运动设计方面。
上下文识别可能无法涵盖所有场景。