إرشادات تطوير الواجهة الأمامية لتطبيقات React/TypeScript. الأنماط الحديثة بما في ذلك Suspense، والتحميل البطيء، وuseSuspenseQuery، وتنظيم الملفات مع دليل الميزات، وتصميم MUI v7، وTanStack Router، وتحسين الأداء، وأفضل ممارسات TypeScript. يُستخدم عند إنشاء المكونات أو الصفحات أو الميزات أو جلب البيانات أو التصميم أو التوجيه أو العمل باستخدام كود الواجهة الأمامية.
ثبّت مهارة الذكاء الاصطناعي frontend-dev-guidelines بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: mrgoonie/claudekit-skills.
Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.
| @/ | src/ | import { apiClient } from '@/lib/apiClient' | | types | src/types | import type { User } from 'types/user' | | components | src/components | import { SuspenseLoader } from 'components/SuspenseLoader' | | features | src/features | import { authApi } from 'features/auth' |
| Create a component | component-patterns.md | | Fetch data | data-fetching.md | | Organize files/folders | file-organization.md | | Style components | styling-guide.md | | Set up routing | routing-guide.md | | Handle loading/errors | loading-and-error-states.md | | Optimize performance | performance.md | | TypeScript types | typescript-standards.md |
إرشادات تطوير الواجهة الأمامية لتطبيقات React/TypeScript. الأنماط الحديثة بما في ذلك Suspense، والتحميل البطيء، وuseSuspenseQuery، وتنظيم الملفات مع دليل الميزات، وتصميم MUI v7، وTanStack Router، وتحسين الأداء، وأفضل ممارسات TypeScript. يُستخدم عند إنشاء المكونات أو الصفحات أو الميزات أو جلب البيانات أو التصميم أو التوجيه أو العمل باستخدام كود الواجهة الأمامية. المصدر: mrgoonie/claudekit-skills.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/mrgoonie/claudekit-skills --skill frontend-dev-guidelinesإرشادات تطوير الواجهة الأمامية لتطبيقات React/TypeScript. الأنماط الحديثة بما في ذلك Suspense، والتحميل البطيء، وuseSuspenseQuery، وتنظيم الملفات مع دليل الميزات، وتصميم MUI v7، وTanStack Router، وتحسين الأداء، وأفضل ممارسات TypeScript. يُستخدم عند إنشاء المكونات أو الصفحات أو الميزات أو جلب البيانات أو التصميم أو التوجيه أو العمل باستخدام كود الواجهة الأمامية. المصدر: mrgoonie/claudekit-skills.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/mrgoonie/claudekit-skills --skill frontend-dev-guidelines بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/mrgoonie/claudekit-skills