ui-component-patterns
بناء مكونات واجهة مستخدم قابلة لإعادة الاستخدام
إنشاء مكونات React قابلة للصيانة مع أنماط التصميم الحديثة. يوفر هذا النمط أنماطًا لتصميم واجهة برمجة التطبيقات Props، والمكونات المركبة، وRender Props، والخطافات المخصصة، وتحسين الأداء.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“ui-component-patterns”。 إنشاء مكون Button مع خصائص variant وsize وdisabled
预期结果:
- interface ButtonProps {
- children: React.ReactNode;
- variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
- size?: 'sm' | 'md' | 'lg';
- disabled?: boolean;
- onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
- }
正在使用“ui-component-patterns”。 بناء Modal مع خطاف useModal
预期结果:
- function useModal(initialOpen = false) {
- const [isOpen, setIsOpen] = useState(initialOpen);
- const open = useCallback(() => setIsOpen(true), []);
- const close = useCallback(() => setIsOpen(false), []);
- const toggle = useCallback(() => setIsOpen(prev => !prev), []);
- return { isOpen, open, close, toggle };
- }
安全审计
安全All 56 static findings are false positives. The skill contains only documentation and educational code examples for UI component patterns. Template literals in code examples were misidentified as shell commands. Reference URLs are documentation links. No malicious patterns detected.
低风险问题 (3)
质量评分
你能构建什么
إنشاء مكتبة المكونات
بناء مجموعة من مكونات واجهة المستخدم القابلة لإعادة الاستخدام مع واجهات برمجة تطبيقات وأنماط متسقة لمؤسستك.
تطبيق أنظمة التصميم
تطبيق أنماط واجهة المستخدم المتسقة عبر تطبيقك باستخدام مكونات منظمة جيدًا.
إعادة هيكلة المكونات القديمة
تحسين كود React الموجود عن طريق تطبيق أنماط المكونات الحديثة وأفضل الممارسات.
试试这些提示
إنشاء مكون Button مع هذه الخصائص: variant (primary/secondary/outline/ghost)، size (sm/md/lg)، disabled، isLoading. استخدم TypeScript واتبع النمط من مهارة ui-component-patterns.
إنشاء مكون Card مركب مع Card.Header وCard.Body وCard.Footer باستخدام نمط التكوين.
إنشاء خطاف useModal مخصص يُرجع وظائف isOpen وopen وclose وtoggle. ثم إنشاء مكون Modal يستخدم هذا الخطاف.
إعادة هيكلة مكون ProductList الذي يعرض عناصر ProductCard. تطبيق React.memo وuseMemo للتصفية وuseCallback لمعالجات النقر لمنع إعادة العرض غير الضرورية.
最佳实践
- حدد Props باستخدام واجهات TypeScript للأمان من الأنواع والإكمال التلقائي في IDE
- استخدم التكوين بدلاً من الخصائص - استغل children لبناء واجهة مستخدم مرنة
- افصل منطق الأعمال عن واجهة المستخدم باستخدام الخطافات المخصصة
- استخدم memoize للحسابات المكلفة مع useCallback والوظائف مع useCallback
避免
- تجنب تمرير الخصائص بشكل مفرط أكثر من 5 مستويات عمقًا - استخدم Context أو التكوين بدلاً من ذلك
- لا تضع استدعاءات API أو منطق الأعمال المعقد مباشرة في مكونات واجهة المستخدم
- تجنب الكائنات أو الوظائف المضمونة في JSX - فهي تسبب إعادة عرض غير ضرورية