الواجهات والتصميم

Matter.js

بواسطة Julien Thibeaut (ui-skills.com) 3.7k نجوم GitHub

تنفيذ تفاعلات فيزياء 2D بالـ Matter.js — إعداد الـ engine/world والـ bodies والـ constraints ومشاهد canvas مريحة مع الـ scroll.

#matterjs#physics#canvas#2d

Claude Code Codex

نظرة عامة

Matter.js بيوجّهك في بناء تفاعلات فيزياء 2D: إعداد الـ Engine والـ World، وضبط الـ Render/Runner، وإضافة الـ bodies والـ constraints، وعمل مشاهد canvas ودودة للتفاعل. رائع للتجارب المرحة والفيزيائية زي العناصر القابلة للسحب والحاجات اللي بتقع.

بتنفع في إيه

عناصر قابلة للسحب مبنية على الفيزياء
إفكتات عناصر بتقع وتتصادم
ملاعب canvas تفاعلية
ألعاب UI مبنية على الـ constraints

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install matterjs

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/matterjs ~/.claude/skills/matterjs

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/matterjs ~/.codex/skills/matterjs

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex