技能 interaction-design

✨

interaction-design

Name: interaction-design
Author: wshobson

安全 ⚙️ 外部命令🌐 網路存取

تصميم واجهات المستخدم الدقيقة والتفاعلية والمحسنة

أنشئ تجارب مستخدم مُبهرة باستخدام تفاعلات دقيقة ومحسنة وأنماط حركة مصممة بدقة. توفر هذه المهارة إرشادات شاملة حول تنفيذ انتقالات سلسة، وحالات التحميل، ومؤشرات ردود الفعل للمستخدم.

支援: Claude Codex Code(CC)

⚠️ 67 差

下載技能 ZIP

在 Claude 中上傳

前往設定 → 功能 → 技能 → 上傳技能

開啟並開始使用

測試它

正在使用「interaction-design」。 إنشاء زر بتأثير تكبير سلس عند التمرير

預期結果:

Button:hover {
transform: scale(1.05);
}
Button:active {
transform: scale(0.95);
}

正在使用「interaction-design」。 تصميم شاشة تحميل هيكل عظمي

預期結果:

.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}

安全審計

安全

v1 • 2/6/2026

Static analysis flagged patterns in markdown documentation files. Evaluation confirms all findings are FALSE POSITIVES caused by the analyzer mistaking markdown syntax (backticks for code formatting) and technical terminology for security-sensitive code patterns. This is a pure documentation/reference skill containing markdown files about interaction design patterns with no executable code.

已掃描檔案

1,781

分析行數

發現項

審計總數

高風險問題 (3)

references/animation-libraries.md:9-498 references/microinteraction-patterns.md:7-536 references/scroll-animations.md:5-416 SKILL.md:43-320

False Positive: Markdown Code Formatting Misidentified as Shell Commands

Static analyzer flagged 'Ruby/shell backtick execution' in markdown files. These detections are FALSE POSITIVES caused by markdown syntax using backticks (`) for inline code formatting. This is a documentation skill containing only reference materials about animation libraries and interaction patterns.

SKILL.md:2-6 SKILL.md:14-19 references/scroll-animations.md:127-338

False Positive: Cryptographic Terminology in Documentation

Static analyzer flagged 'weak cryptographic algorithm' patterns. These detections are FALSE POSITIVES triggered by documentation mentioning algorithm names like SHA, MD5 in the context of animation libraries or data processing discussions.

references/animation-libraries.md:409 SKILL.md:324-327

False Positive: Network URLs in Documentation

Static analyzer flagged 'Fetch API call' and 'Hardcoded URL' patterns. These detections are FALSE POSITIVES triggered by reference links to animation libraries and documentation resources in the markdown files.

風險因素

⚙️ 外部命令 (120)

🌐 網路存取 (5)

references/animation-libraries.md:409 SKILL.md:324 SKILL.md:325 SKILL.md:326 SKILL.md:327

審計者: claude

品質評分

架構

100

可維護性

內容

社群

安全

規範符合性

你能建構什麼

إضافة لمسات نهائية لتفاعلات الأزرار

تصميم تأثيرات تمرير ناعمة، وتغذية راجعة عند النقر، والانتقالات بين حالات للأزرار ومراقبات النماذج التي تجعل واجهتك تبدو تفاعلية ومحسنة.

إنشاء تجارب تحميل مُبهرة

استبدل دوائر التحميل العامة بتحريكات تحميل ممتعة وواجهات الهيكل العظمي ومؤشرات التقدم التي تبقي المستخدمين على اطلاع ومشاركين.

تنفيذ سرد المحتوى المستند إلى التمرير

إنشاء تحريكات مستجيبة للتمرير تكشف المحتوى، وتوجه المستخدمين عبر الصفحات، وتضيف حركة سردية للمحتوى الطويل.

試試這些提示

تنفيذ الحركة الأساسي

أحتاج لإضافة حركة تمرير سلسة إلى زر. يجب أن يكون الزر له تأثير تكبير طفيف عند التمرير وعودة للوضع الطبيعي عند الإصدار. يرجى توفير CSS وأي JavaScript مطلوب.

تصميم حالة التحميل

تعرض تطبيقي مجزئ تحميل (spinner) أثناء جلب البيانات. المجزئ يشعر بأنه عام ومرهق. ساعدني في تصميم تجربة تحميل أكثر إلهاماً باستخدام واجهات الهيكل العظمي أو النوافذ المقصودة المتحركة.

إعداد التحريك المستند إلى التمرير

أريد أن تظهر عناصر في صفحة هبوطي وتتلاشى وتتحرك للأعلى مع التمرير للأسفل. يرجى إظهار كيفية تنفيذ تحريكات مستجيبة للتمرير باستخدام ملاحظات التقاطع.

نظام التفاعلات الدقيقة

أبني نظام تصميم وأحتاج إلى أنماط تفاعلات دقيقة متسقة. ساعدني في إنشاء مجموعة متكاملة من التفاعلات لأزرار والمدخلات والبطاقات والنوافذ المنبثقة التي تتبع نفس مبادئ الحركة.

最佳實務

أبقِ الحركات قصيرة (100-300ms) لتحسين الاستجابة المرئية
استخدم منحنيات التباطؤ (ease-out، cubic-bezier) للحصول على حركة تشعر بالطبيعة
قلل أو عطّل الحركات للمستخدمين الذين يفضلون تقليل الحركة

避免

استخدام حركات أطول من 500ms لتغييرات الحالة البسيطة
تحريك جميع الخصائص (ركّز على opacity و transform للأداء)
تجاهل تفضيلات سهولة الوصول لتقليل الحركة

常見問題

ما هي أطول فترات الحركة المثالية للتفاعلات الدقيقة؟

يجب أن تشعر التفاعلات الدقيقة بأنها فورية. استخدم 100-200ms لتغييرات الحالة البسيطة مثل تمرير الأزرار، و200-400ms للانتقالات الأكثر تعقيداً مثل ظهور النوافذ المنبثقة.

كيف أضمن أن تكون الحركات سهلة الوصول؟

استخدم استعلام الوسائط prefers-reduced-motion للكشف عن تفضيلات المستخدم. احوصل على بدائل أو عطّل الحركات للمستخدمين الذين يطلبون تقليل الحركة.

هل يجب أن أستخدم CSS أو JavaScript للتحريكات؟

استخدم CSS للانتقالات السهلة وأساطير الحركة الرئيسية. استخدم JavaScript (requestAnimationFrame، Intersection Observer) للتحريكات المعقدة والتفاعلية أو المستجيبة للتمرير.

كيف أنشئ حركات سلسة بنسبة 60 إطاراً في الثانية؟

حرك فقط خصائص transform و opacity. تجنب تحريك خصائص التخطيط مثل width و height أو margin التي تحفز إعادة التنسيق. استخدم will-change باعتدال.

ما هي دوال التباطؤ التي تشعر بالطبيعة أكثر؟

استخدم ease-out للعناصر التي تدخل منطقة الرؤية و ease-in-out للعناصر التي تتحرك داخل منطقة الرؤية. منحنيات cubic-bezier المخصصة تقدم شعوراً طبيعياً أكثر من الكلمات المفتاحية القياسية.

كيف أختار بين تحريكات CSS ومكتبات الحركة؟

استخدم CSS الأصلي للتحريكات السهلة والسريعة. فكر في مكتبات مثل Framer Motion و GSAP أو anime.js عندما تحتاج إلى خطوط زمنية معقدة، وحركات قائمة على الفيزياء، أو تسلسل متقدم.

開發者詳情

作者

wshobson

授權

MIT

儲存庫

https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/interaction-design/

引用

main

檔案結構

📁 references/

📄 animation-libraries.md

📄 microinteraction-patterns.md

📄 scroll-animations.md

📄 SKILL.md