Coding Standards - Portfolio Buddy 2
Применить стандарты кодирования React 19 TypeScript
Разработчикам Portfolio Buddy 2 нужны единые шаблоны кодирования для поддержания качества кода. Этот навык предоставляет задокументированные стандарты для компонентов React 19, типов TypeScript и организации проекта.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Coding Standards - Portfolio Buddy 2". Create a MetricsTable component following coding standards
النتيجة المتوقعة:
- ✓ Используйте функциональный компонент с интерфейсом TypeScript
- ✓ Размещайте хуки на верхнем уровне (useState, useMemo, useCallback)
- ✓ Добавляйте корректный массив зависимостей для хуков
- ✓ Без библиотек глобального состояния (Redux, Zustand, и т. д.)
- ✓ Экспортируйте компонент как именованный экспорт
- ✓ Ограничьте компонент до 200 строк
التدقيق الأمني
آمنThis skill contains only documentation in markdown format. No executable code, scripts, network calls, filesystem access, or environment variable access. Pure reference documentation for coding standards.
درجة الجودة
ماذا يمكنك بناءه
Создание нового компонента
Следуйте шаблонам хуков и стандартам TypeScript при создании новых компонентов React для портфельного приложения.
Проверка кодовых изменений
Проверяйте, что pull request соответствует задокументированным стандартам по размеру компонентов, типам и организации импортов.
Снижение технического долга
Используйте задокументированные шаблоны, чтобы рефакторить громоздкие компоненты вроде PortfolioSection.tsx на более мелкие части.
جرّب هذه الموجهات
Create a new React 19 component following the coding-standards skill. Use functional component with TypeScript, hooks at top level, useMemo for derived state, and useCallback for handlers.
Define TypeScript interfaces for my data using the coding-standards skill. No any types, use strict null checks, and add JSDoc comments for complex functions.
Help me refactor this oversized component using patterns from coding-standards. Extract sub-components and move logic to custom hooks to stay under 200 lines.
Organize my imports following the coding-standards skill: React libraries first, then internal hooks, then utils, then types.
أفضل الممارسات
- Всегда определяйте интерфейсы TypeScript для структур данных вместо использования `any`
- Держите компоненты меньше 200 строк, выделяя подкомпоненты и пользовательские хуки
- Используйте хуки React только на верхнем уровне с полными массивами зависимостей
تجنب
- Использование типа `any` вместо корректных интерфейсов TypeScript
- Размещение хуков внутри условий или циклов
- Смешивание библиотек глобального состояния, когда предпочтительны обычные хуки React