frontend-dev-guidelines
套用 React/TypeScript 前端開發規範
Également disponible depuis: sickn33,DojoCodingLabs,0Chan-smc,diet103,BrianDai22,BOM-98,0Chan-smc
撰寫 React/TypeScript 前端程式碼時缺乏一致的規範會導致維護困難和錯誤。此技能提供全面的開發規範,包含元件、資料獲取、路由、樣式化和效能優化的程式碼範例,採用現代 React 模式。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-dev-guidelines". Create a user profile component following the frontend-dev-guidelines skill
Résultat attendu:
- React.FC 元件搭配型別化的 props 介面
- 使用 useSuspenseQuery 獲取資料並以 SuspenseLoader 包裝
- 使用 MUI v7 sx 屬性和 SxProps<Theme> 型別進行樣式設計
- 對事件處理常式使用 useCallback
- 使用 useMuiSnackbar 處理錯誤/成功通知
Utilisation de "frontend-dev-guidelines". How should I organize files for a new feature
Résultat attendu:
- 建立 features/{feature-name}/ 目錄
- 設定子目錄:api/、components/、hooks/、helpers/、types/
- 在 api/{feature}Api.ts 建立 API 服務檔案
- 從功能索引檔案匯出公開 API
- 使用 Suspense 邊界延遲載入功能元件
Utilisation de "frontend-dev-guidelines". What are the TypeScript standards for this project
Résultat attendu:
- 啟用 strict 模式,搭配 noImplicitAny 和 strictNullChecks
- 使用 React.FC<Props> 模式搭配明確的 TypeScript 介面
- 對僅型別匯入使用 import type
- 絕不使用 any 型別 - 使用特定型別或 unknown
- 在功能層級的 types/ 目錄定義型別
Audit de sécurité
SûrPure documentation skill containing markdown files with TypeScript code examples. No executable code, network operations, file system access, or external dependencies. All content is descriptive guidelines for React/TypeScript development patterns. The static scanner incorrectly flagged code examples within documentation as security threats.
Facteurs de risque
⚙️ Commandes externes (520)
⚡ Contient des scripts (22)
📁 Accès au système de fichiers (36)
Score de qualité
Ce que vous pouvez construire
前端程式碼審查
根據既定的規範和最佳實踐審查前端程式碼,確保一致性
新功能實作
遵循現代 React 模式實作新功能,包含正確的資料獲取和狀態管理
學習現代 React
學習 React 模式,包括 Suspense、TypeScript 和 MUI 元件開發
Essayez ces prompts
遵循前端-dev-guidelines 技能建立新的 React 元件。需包含 React.FC 模式搭配 TypeScript、使用 useSuspenseQuery 獲取資料,以及 MUI v7 樣式設計。
遵循前端-dev-guidelines 技能使用 TanStack Router 建立新路由。需包含資料夾式路由結構、延遲載入和 SuspenseLoader 包裝器。
遵循前端-dev-guidelines 技能使用 useSuspenseQuery 實作資料獲取。需包含快取優先策略、正確的查詢鍵和錯誤處理。
遵循前端-dev-guidelines 技能優化此 React 元件的效能。需包含 useMemo、useCallback、React.memo 和防止記憶體洩漏。
Bonnes pratiques
- 對所有元件使用 React.FC<Props> 模式搭配明確的 TypeScript 介面
- 將延遲載入的元件包裝在 SuspenseLoader 中以防止版面位移
- 在使用 API 呼叫前,使用 useSuspenseQuery 實作快取優先的資料獲取策略
Éviter
- 絕不對載入中的旋轉圖示使用提前返回 - 會導致版面位移
- 絕不使用 react-toastify - 使用 useMuiSnackbar 進行通知
- 絕不在 TypeScript 中使用 any 型別 - 使用特定型別或 unknown