apple-design
78تصميم واجهات ويب سلسة مستوحاة من Apple
غالبًا ما تبدو واجهات الويب المعتمدة على الإيماءات متأخرة أو جامدة أو غير متسقة بصريًا. توفر هذه المهارة إرشادات عملية للحركة المتجاوبة والخامات والطباعة وإمكانية الوصول وتصميم التفاعل.
تسمية تأثيرات الرسوم المتحركة على الويب بدقة
تجعل أوصاف الحركة الغامضة مناقشات التصميم وموجّهات الذكاء الاصطناعي غير واضحة. تربط هذه المهارة سلوك الرسوم المتحركة الملحوظ على الويب بالمصطلحات الدقيقة، وتميّز بين البدائل المتقاربة.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "animation-vocabulary" from https://skillstore.io/skills/emilkowalski-animation-vocabulary.md and its manifest at https://skillstore.io/api/skills/emilkowalski-animation-vocabulary/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "animation-vocabulary". تكبر قائمة من الزر الذي فتحها بدلًا من التوسّع انطلاقًا من مركزها.
النتيجة المتوقعة:
Origin-aware animation - يتحرك العنصر انطلاقًا من المشغّل الخاص به بدلًا من مركزه الافتراضي.
جارٍ استخدام "animation-vocabulary". تبدو إحدى الصور وكأنها تتحول إلى صورة أخرى.
النتيجة المتوقعة:
جارٍ استخدام "animation-vocabulary". تظهر البطاقات واحدة تلو الأخرى مع تأخير قصير.
النتيجة المتوقعة:
Stagger - تتحرك عدة عناصر بالتتابع مع تأخير بسيط، مما ينشئ تأثيرًا متتاليًا.
All eight external-command detections are Markdown code fences around example responses, not executable Ruby or shell syntax. The two reconnaissance detections are ordinary glossary prose, and no security risk or prompt injection was found.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/emilkowalski-animation-vocabulary/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/emilkowalski-animation-vocabulary?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/emilkowalski-animation-vocabulary?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emilkowalski-animation-vocabulary/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/emilkowalski-animation-vocabulary.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>emilkowalski. (2026). animation-vocabulary security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emilkowalski-animation-vocabulary/audits/3@techreport{emilkowalski-emilkowalski-animation-vocabulary-2026,
author = {emilkowalski},
title = {animation-vocabulary security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/emilkowalski-animation-vocabulary/audits/3},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "animation-vocabulary security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "emilkowalski"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/emilkowalski-animation-vocabulary/audits/3"
identifiers:
- type: other
value: "skillstore:emilkowalski-animation-vocabulary:audit:3"
description: "Skillstore immutable audit report identifier"
حدّد المصطلح الصحيح للحركة الملحوظة في نموذج أولي لمنتج أو واجهة مرجعية.
حوّل أوصاف أصحاب المصلحة إلى مصطلحات حركة معتمدة قبل مناقشة التنفيذ.
استبدل لغة الرسوم المتحركة الغامضة بمصطلحات دقيقة في موجّهات مساعدي التصميم والتطوير.
ما مصطلح الرسوم المتحركة لهذا التأثير: [صِف ما يتحرك، ومتى يبدأ، وما الإحساس الذي توحي به حركته]؟
اذكر أفضل مصطلح في المسرد لـ [وصف التأثير]. أدرج ما يصل إلى بديلين واشرح أوجه الاختلاف بينهما.
قارن بين [المصطلح الأول] و[المصطلح الثاني] لهذا التفاعل: [الوصف]. حدّد المصطلح الأنسب وسبب ذلك.
قسّم هذا التفاعل إلى مصطلحات من المسرد: [تسلسل مفصّل]. رتّب المصطلحات حسب الحدث، وحدّد أي تطابق تقريبي.
المؤلف
emilkowalskiالترخيص
MIT
مراجعة Skillstore
r2
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
c43861a65bb95efcae259cd161c9d6f4dc7eec6f
حداثة الصيانة
٢٥/٧/٢٠٢٦
الاستخدام
0 تنزيلات · 0 مشاهدات
بنية الملفات
📄 SKILL.md
تصميم واجهات ويب سلسة مستوحاة من Apple
غالبًا ما تبدو واجهات الويب المعتمدة على الإيماءات متأخرة أو جامدة أو غير متسقة بصريًا. توفر هذه المهارة إرشادات عملية للحركة المتجاوبة والخامات والطباعة وإمكانية الوصول وتصميم التفاعل.
Choose the Right Frontend UI Library
Choosing among frontend libraries can waste time and create inconsistent dependencies. This skill maps a defined UI task to an opinionated, curated library recommendation.
Find High-Value UI Animation Opportunities
Teams often add motion without a clear user benefit, which can make interfaces feel slow or distracting. This skill audits UI seams, applies a strict decision gate, and produces a short ranked list of precise motion recommendations.
Make Web Apps Feel Native on Mobile
Mobile web applications often feel awkward because browser defaults conflict with touch interaction and changing viewports. This skill applies focused CSS and metadata fixes for a more native mobile experience.
صقل الواجهات باستخدام مبادئ هندسة التصميم
قد تبدو تفاصيل الواجهة غير متسقة أو بطيئة أو منفصلة بصريا. تطبق هذه المهارة إرشادات عملية للحركة والتفاعل والأداء وإمكانية الوصول لتحسين صقل واجهة المستخدم.
مراجعة رسوم الواجهة المتحركة بدقة
قد تبدو حركة الواجهة بطيئة أو مشتتة أو غير متاحة حتى عندما تعمل. تراجع هذه المهارة كود الرسوم المتحركة وفق معايير محددة للحرفية والأداء وإتاحة الوصول.
Create a Polished Launch Video
بواسطة latent-spaces
Turning a project into a concise launch video requires product analysis, scripting, animation, audio, and rendering. Brag coordinates that workflow with Hyperframes and delivers a video, poster, storyboard, and share copy.
Build Accessible Tailwind Interfaces
بواسطة nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
تخطيط تجربة المستخدم قبل البناء
بواسطة pbakaus
غالبًا ما تبني الفرق الواجهات قبل توضيح أهداف المستخدمين والحالات والقيود. توجه هذه المهارة عملية الاكتشاف وتنتج موجز تصميم للتنفيذ.
تصميم نماذج أولية مميزة لواجهات المستخدم
بواسطة tencentcloudbase
غالبا ما تفتقر واجهات الذكاء الاصطناعي العامة إلى اتجاه بصري وتفاصيل واعية بالمنصة. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحديد نية التصميم قبل بناء النماذج الأولية.
تصميم واجهات مستوحاة من Apple
بواسطة BarisSozen
تحتاج فرق المنتجات الحديثة إلى إرشادات واجهة مستخدم متسقة ومصقولة. تمنح هذه المهارة Claude وCodex وClaude Code قواعد عملية مستوحاة من Apple للطباعة والألوان والتباعد والمكونات والحركة ومراجعة تجربة المستخدم.
تحسين التصميم المرئي للواجهة الأمامية
بواسطة Barnhardt-Enterprises-Inc
غالبًا ما تبدو شاشات الواجهة الأمامية العامة متشابهة وتفتقر إلى التركيز على العلامة التجارية. ترشد هذه المهارة اختيارات الطباعة، والألوان، والحركة، والعمق لإنشاء واجهات أوضح.