Compétences frontend-dev-guidelines
🎨
frontend-dev-guidelines
Sûr ⚙️
Commandes externes⚡
Contient des scripts📁
Accès au système de fichiers🌐
Accès réseau
應用 React 前端開發模式
Également disponible depuis: Dimon94,sickn33,DojoCodingLabs,0Chan-smc,diet103,BOM-98,0Chan-smc
前端開發人員需要一致的 React 元件、資料獲取和路由模式。此技能提供使用 TypeScript、TanStack Query、TanStack Router 和 MUI v7 建構現代 React 應用程式的全面指南。
Prend en charge: Claude Codex Code(CC)
1
Télécharger le ZIP du skill
2
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
3
Activez et commencez à utiliser
Tester
Utilisation de "frontend-dev-guidelines". Create a user profile component with data fetching and edit functionality
Résultat attendu:
- • React.FC 搭配類型化的屬性介面
- • 使用快取優先策略的 useSuspenseQuery 進行資料獲取
- • 搭配快取失效的 useMutation 進行更新
- • 使用 useCallback 處理事件處理常式
- • 使用 useMemo 計算值
- • SuspenseLoader 包裝載入狀態
- • 使用 useMuiSnackbar 顯示成功/錯誤通知
- • 使用 sx 屬性的 MUI v7 樣式
Audit de sécurité
Sûrv5 • 1/16/2026
This is a documentation-only skill containing markdown files with frontend development guidelines. No executable code, no network calls, no filesystem access, no environment variable access, and no external command execution. All 676 static findings are FALSE POSITIVES - the patterns detected are from code examples in documentation, not actual security vulnerabilities.
12
Fichiers analysés
5,727
Lignes analysées
4
résultats
5
Total des audits
Facteurs de risque
⚙️ Commandes externes (520)
resources/common-patterns.md:11-31 resources/common-patterns.md:31-33 resources/common-patterns.md:33-41 resources/common-patterns.md:41-109 resources/common-patterns.md:109-122 resources/common-patterns.md:122-160 resources/common-patterns.md:160-171 resources/common-patterns.md:171-172 resources/common-patterns.md:172-180 resources/common-patterns.md:180-215 resources/common-patterns.md:215-223 resources/common-patterns.md:223-255 resources/common-patterns.md:255-269 resources/common-patterns.md:269-275 resources/common-patterns.md:275-279 resources/common-patterns.md:279-285 resources/common-patterns.md:285-289 resources/common-patterns.md:289-298 resources/common-patterns.md:298-310 resources/complete-examples.md:11-85 resources/complete-examples.md:85-146 resources/complete-examples.md:146-149 resources/complete-examples.md:149-153 resources/complete-examples.md:153-159 resources/complete-examples.md:159-161 resources/complete-examples.md:161-182 resources/complete-examples.md:182-186 resources/complete-examples.md:186-192 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:215-219 resources/complete-examples.md:219-240 resources/complete-examples.md:240-244 resources/complete-examples.md:244-265 resources/complete-examples.md:265-269 resources/complete-examples.md:269-283 resources/complete-examples.md:283-289 resources/complete-examples.md:289-309 resources/complete-examples.md:309-327 resources/complete-examples.md:327-333 resources/complete-examples.md:333-379 resources/complete-examples.md:379-385 resources/complete-examples.md:385-492 resources/complete-examples.md:492-498 resources/complete-examples.md:498-533 resources/complete-examples.md:533-546 resources/complete-examples.md:546-590 resources/complete-examples.md:590-602 resources/complete-examples.md:602-641 resources/complete-examples.md:641-647 resources/complete-examples.md:647-743 resources/complete-examples.md:743-749 resources/complete-examples.md:749-808 resources/complete-examples.md:808-814 resources/complete-examples.md:814-855 resources/component-patterns.md:11 resources/component-patterns.md:19-38 resources/component-patterns.md:38-42 resources/component-patterns.md:42-60 resources/component-patterns.md:60-74 resources/component-patterns.md:74-78 resources/component-patterns.md:78-101 resources/component-patterns.md:101-110 resources/component-patterns.md:110-114 resources/component-patterns.md:114-117 resources/component-patterns.md:117-121 resources/component-patterns.md:121-132 resources/component-patterns.md:132-143 resources/component-patterns.md:143-146 resources/component-patterns.md:146-157 resources/component-patterns.md:157-160 resources/component-patterns.md:160-178 resources/component-patterns.md:178-188 resources/component-patterns.md:188-301 resources/component-patterns.md:301-317 resources/component-patterns.md:317-337 resources/component-patterns.md:337-353 resources/component-patterns.md:353-359 resources/component-patterns.md:359-368 resources/component-patterns.md:368-374 resources/component-patterns.md:374-382 resources/component-patterns.md:382-408 resources/component-patterns.md:408-413 resources/component-patterns.md:413-437 resources/component-patterns.md:437-445 resources/component-patterns.md:445-465 resources/component-patterns.md:465-469 resources/component-patterns.md:469-483 resources/component-patterns.md:483-490 resources/component-patterns.md:490-491 resources/component-patterns.md:491-492 resources/component-patterns.md:492-493 resources/component-patterns.md:493-495 resources/data-fetching.md:11 resources/data-fetching.md:11 resources/data-fetching.md:14 resources/data-fetching.md:22-41 resources/data-fetching.md:41-47 resources/data-fetching.md:47-48 resources/data-fetching.md:48-68 resources/data-fetching.md:68-102 resources/data-fetching.md:102-107 resources/data-fetching.md:107-108 resources/data-fetching.md:108-109 resources/data-fetching.md:109-119 resources/data-fetching.md:119-147 resources/data-fetching.md:147-160 resources/data-fetching.md:160-176 resources/data-fetching.md:176-186 resources/data-fetching.md:186-194 resources/data-fetching.md:194-204 resources/data-fetching.md:204-209 resources/data-fetching.md:209-213 resources/data-fetching.md:213-227 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:265-269 resources/data-fetching.md:269 resources/data-fetching.md:269-280 resources/data-fetching.md:280-290 resources/data-fetching.md:290-293 resources/data-fetching.md:293-294 resources/data-fetching.md:294-295 resources/data-fetching.md:295-296 resources/data-fetching.md:296-298 resources/data-fetching.md:298-306 resources/data-fetching.md:306-346 resources/data-fetching.md:346-350 resources/data-fetching.md:350-383 resources/data-fetching.md:383-391 resources/data-fetching.md:391-406 resources/data-fetching.md:406-408 resources/data-fetching.md:408-412 resources/data-fetching.md:412-426 resources/data-fetching.md:426-430 resources/data-fetching.md:430-442 resources/data-fetching.md:442-450 resources/data-fetching.md:450-459 resources/data-fetching.md:459-469 resources/data-fetching.md:469-484 resources/data-fetching.md:484-490 resources/data-fetching.md:490-501 resources/data-fetching.md:501-509 resources/data-fetching.md:509-538 resources/data-fetching.md:538-542 resources/data-fetching.md:542-583 resources/data-fetching.md:583-592 resources/data-fetching.md:592-621 resources/data-fetching.md:621-629 resources/data-fetching.md:629-673 resources/data-fetching.md:673-677 resources/data-fetching.md:677-708 resources/data-fetching.md:708-716 resources/data-fetching.md:716-729 resources/data-fetching.md:729-733 resources/data-fetching.md:733-747 resources/data-fetching.md:747-755 resources/data-fetching.md:755-759 resources/data-fetching.md:759 resources/file-organization.md:20 resources/file-organization.md:21 resources/file-organization.md:22 resources/file-organization.md:25-41 resources/file-organization.md:41-53 resources/file-organization.md:53-54 resources/file-organization.md:54-55 resources/file-organization.md:55-56 resources/file-organization.md:56-59 resources/file-organization.md:59-67 resources/file-organization.md:67-75 resources/file-organization.md:75-77 resources/file-organization.md:77-119 resources/file-organization.md:119-128 resources/file-organization.md:128-131 resources/file-organization.md:131-137 resources/file-organization.md:137-145 resources/file-organization.md:145-156 resources/file-organization.md:156-169 resources/file-organization.md:169-176 resources/file-organization.md:176-180 resources/file-organization.md:180-186 resources/file-organization.md:186-193 resources/file-organization.md:193-199 resources/file-organization.md:199-206 resources/file-organization.md:206-210 resources/file-organization.md:210-218 resources/file-organization.md:218-222 resources/file-organization.md:222 resources/file-organization.md:222-223 resources/file-organization.md:223 resources/file-organization.md:223-224 resources/file-organization.md:224 resources/file-organization.md:224-225 resources/file-organization.md:225 resources/file-organization.md:225-229 resources/file-organization.md:229-239 resources/file-organization.md:239-244 resources/file-organization.md:244-245 resources/file-organization.md:245-246 resources/file-organization.md:246-247 resources/file-organization.md:247-250 resources/file-organization.md:250-253 resources/file-organization.md:253-256 resources/file-organization.md:256-260 resources/file-organization.md:260-263 resources/file-organization.md:263-266 resources/file-organization.md:266-274 resources/file-organization.md:274-276 resources/file-organization.md:276-280 resources/file-organization.md:280-283 resources/file-organization.md:283-284 resources/file-organization.md:284-285 resources/file-organization.md:285-289 resources/file-organization.md:289 resources/file-organization.md:289-291 resources/file-organization.md:291-296 resources/file-organization.md:296-300 resources/file-organization.md:300 resources/file-organization.md:300-302 resources/file-organization.md:302-306 resources/file-organization.md:306-310 resources/file-organization.md:310-312 resources/file-organization.md:312-317 resources/file-organization.md:317-321 resources/file-organization.md:321-323 resources/file-organization.md:323-327 resources/file-organization.md:327-341 resources/file-organization.md:341-363 resources/file-organization.md:363-371 resources/file-organization.md:371-397 resources/file-organization.md:397-409 resources/file-organization.md:409-425 resources/file-organization.md:425-428 resources/file-organization.md:428-434 resources/file-organization.md:434-440 resources/file-organization.md:440-485 resources/loading-and-error-states.md:11-23 resources/loading-and-error-states.md:23-35 resources/loading-and-error-states.md:35-47 resources/loading-and-error-states.md:47-51 resources/loading-and-error-states.md:51-63 resources/loading-and-error-states.md:63-78 resources/loading-and-error-states.md:78-82 resources/loading-and-error-states.md:82-86 resources/loading-and-error-states.md:86-90 resources/loading-and-error-states.md:90-94 resources/loading-and-error-states.md:94-116 resources/loading-and-error-states.md:116-122 resources/loading-and-error-states.md:122-140 resources/loading-and-error-states.md:140-149 resources/loading-and-error-states.md:149-163 resources/loading-and-error-states.md:163-171 resources/loading-and-error-states.md:171-177 resources/loading-and-error-states.md:177-194 resources/loading-and-error-states.md:194-209 resources/loading-and-error-states.md:209-226 resources/loading-and-error-states.md:226-229 resources/loading-and-error-states.md:229-230 resources/loading-and-error-states.md:230-231 resources/loading-and-error-states.md:231-232 resources/loading-and-error-states.md:232-236 resources/loading-and-error-states.md:236-256 resources/loading-and-error-states.md:256-260 resources/loading-and-error-states.md:260-287 resources/loading-and-error-states.md:287-295 resources/loading-and-error-states.md:295-330 resources/loading-and-error-states.md:330-334 resources/loading-and-error-states.md:334-356 resources/loading-and-error-states.md:356-360 resources/loading-and-error-states.md:360-398 resources/loading-and-error-states.md:398-406 resources/loading-and-error-states.md:406-428 resources/loading-and-error-states.md:428-432 resources/loading-and-error-states.md:432-447 resources/loading-and-error-states.md:447-455 resources/loading-and-error-states.md:455-479 resources/performance.md:11-32 resources/performance.md:32-51 resources/performance.md:51-62 resources/performance.md:62-66 resources/performance.md:66-78 resources/performance.md:78-88 resources/performance.md:88-96 resources/performance.md:96-111 resources/performance.md:111-131 resources/performance.md:131-157 resources/performance.md:157-170 resources/performance.md:170-200 resources/performance.md:200-204 resources/performance.md:204-216 resources/performance.md:216-220 resources/performance.md:220-237 resources/performance.md:237-247 resources/performance.md:247-274 resources/performance.md:274-282 resources/performance.md:282-296 resources/performance.md:296-300 resources/performance.md:300-326 resources/performance.md:326-334 resources/performance.md:334-342 resources/performance.md:342-346 resources/performance.md:346-362 resources/performance.md:362-370 resources/performance.md:370-386 resources/performance.md:386-393 resources/performance.md:393-394 resources/performance.md:394-395 resources/routing-guide.md:21-32 resources/routing-guide.md:32-35 resources/routing-guide.md:35-36 resources/routing-guide.md:36-45 resources/routing-guide.md:45-79 resources/routing-guide.md:79-83 resources/routing-guide.md:83-84 resources/routing-guide.md:84-94 resources/routing-guide.md:94-103 resources/routing-guide.md:103-107 resources/routing-guide.md:107-112 resources/routing-guide.md:112-127 resources/routing-guide.md:127-135 resources/routing-guide.md:135-139 resources/routing-guide.md:139-146 resources/routing-guide.md:146-152 resources/routing-guide.md:152-161 resources/routing-guide.md:161-165 resources/routing-guide.md:165-180 resources/routing-guide.md:180-188 resources/routing-guide.md:188-200 resources/routing-guide.md:200-204 resources/routing-guide.md:204-216 resources/routing-guide.md:216-224 resources/routing-guide.md:224-236 resources/routing-guide.md:236-240 resources/routing-guide.md:240-247 resources/routing-guide.md:247-251 resources/routing-guide.md:251-258 resources/routing-guide.md:258-266 resources/routing-guide.md:266-285 resources/routing-guide.md:285-289 resources/routing-guide.md:289-305 resources/routing-guide.md:305-311 resources/routing-guide.md:311-346 resources/routing-guide.md:346-353 resources/routing-guide.md:353-354 resources/routing-guide.md:354-355 resources/routing-guide.md:355-356 resources/routing-guide.md:356-357 resources/routing-guide.md:357-358 resources/routing-guide.md:358-359 resources/styling-guide.md:13-39 resources/styling-guide.md:39-41 resources/styling-guide.md:41-43 resources/styling-guide.md:43-59 resources/styling-guide.md:59-65 resources/styling-guide.md:65-79 resources/styling-guide.md:79-89 resources/styling-guide.md:89-93 resources/styling-guide.md:93-97 resources/styling-guide.md:97-108 resources/styling-guide.md:108-112 resources/styling-guide.md:112-122 resources/styling-guide.md:122-126 resources/styling-guide.md:126-143 resources/styling-guide.md:143-151 resources/styling-guide.md:151-170 resources/styling-guide.md:170-172 resources/styling-guide.md:172 resources/styling-guide.md:172-176 resources/styling-guide.md:176-182 resources/styling-guide.md:182-186 resources/styling-guide.md:186-203 resources/styling-guide.md:203-211 resources/styling-guide.md:211-227 resources/styling-guide.md:227-231 resources/styling-guide.md:231-245 resources/styling-guide.md:245-253 resources/styling-guide.md:253-262 resources/styling-guide.md:262-268 resources/styling-guide.md:268-275 resources/styling-guide.md:275-281 resources/styling-guide.md:281-291 resources/styling-guide.md:291-301 resources/styling-guide.md:301-309 resources/styling-guide.md:309-315 resources/styling-guide.md:315-323 resources/styling-guide.md:323-329 resources/styling-guide.md:329-346 resources/styling-guide.md:346-354 resources/styling-guide.md:354-373 resources/styling-guide.md:373-377 resources/styling-guide.md:377-390 resources/styling-guide.md:390-394 resources/styling-guide.md:394-410 resources/styling-guide.md:410-417 resources/styling-guide.md:417-418 resources/styling-guide.md:418-420 resources/typescript-standards.md:13-22 resources/typescript-standards.md:22-25 resources/typescript-standards.md:25-31 resources/typescript-standards.md:31-35 resources/typescript-standards.md:35-56 resources/typescript-standards.md:56-59 resources/typescript-standards.md:59-69 resources/typescript-standards.md:69-72 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 resources/typescript-standards.md:83-87 resources/typescript-standards.md:87-100 resources/typescript-standards.md:100-108 resources/typescript-standards.md:108-116 resources/typescript-standards.md:116-130 resources/typescript-standards.md:130-156 resources/typescript-standards.md:156-161 resources/typescript-standards.md:161-166 resources/typescript-standards.md:166-181 resources/typescript-standards.md:181-189 resources/typescript-standards.md:189-196 resources/typescript-standards.md:196-200 resources/typescript-standards.md:200-210 resources/typescript-standards.md:210-214 resources/typescript-standards.md:214-224 resources/typescript-standards.md:224-228 resources/typescript-standards.md:228-231 resources/typescript-standards.md:231-235 resources/typescript-standards.md:235-249 resources/typescript-standards.md:249-257 resources/typescript-standards.md:257-271 resources/typescript-standards.md:271-275 resources/typescript-standards.md:275-294 resources/typescript-standards.md:294-302 resources/typescript-standards.md:302-310 resources/typescript-standards.md:310-314 resources/typescript-standards.md:314-335 resources/typescript-standards.md:335-343 resources/typescript-standards.md:343-351 resources/typescript-standards.md:351-355 resources/typescript-standards.md:355-361 resources/typescript-standards.md:361-369 resources/typescript-standards.md:369-375 resources/typescript-standards.md:375-379 resources/typescript-standards.md:379-385 resources/typescript-standards.md:385-389 resources/typescript-standards.md:389-399 resources/typescript-standards.md:399-407 resources/typescript-standards.md:407 resources/typescript-standards.md:407-409 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:35 SKILL.md:35 SKILL.md:35 SKILL.md:37 SKILL.md:40 SKILL.md:46 SKILL.md:47 SKILL.md:47 SKILL.md:47 SKILL.md:47 SKILL.md:47 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:61 SKILL.md:61 SKILL.md:62 SKILL.md:62 SKILL.md:62 SKILL.md:63 SKILL.md:63 SKILL.md:63 SKILL.md:64 SKILL.md:64 SKILL.md:64 SKILL.md:72-96 SKILL.md:96-105 SKILL.md:105-106 SKILL.md:106-107 SKILL.md:107-125 SKILL.md:125-129 SKILL.md:129-130 SKILL.md:130-132 SKILL.md:132 SKILL.md:132-141 SKILL.md:141-142 SKILL.md:142-145 SKILL.md:145-153 SKILL.md:153-162 SKILL.md:162-163 SKILL.md:163-166 SKILL.md:166-167 SKILL.md:167-168 SKILL.md:168-171 SKILL.md:171-174 SKILL.md:174-183 SKILL.md:183-185 SKILL.md:185-189 SKILL.md:189-199 SKILL.md:199-209 SKILL.md:209-219 SKILL.md:219-224 SKILL.md:224-225 SKILL.md:225-226 SKILL.md:226-235 SKILL.md:235-236 SKILL.md:236-237 SKILL.md:237-248 SKILL.md:248-250 SKILL.md:250-263 SKILL.md:263-316 SKILL.md:316-345 SKILL.md:345-351 SKILL.md:351-386
⚡ Contient des scripts (22)
resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354 SKILL.md:32 SKILL.md:75 SKILL.md:193
📁 Accès au système de fichiers (36)
resources/complete-examples.md:20 resources/complete-examples.md:188 resources/complete-examples.md:221 resources/complete-examples.md:222 resources/complete-examples.md:338 resources/complete-examples.md:392 resources/complete-examples.md:548 resources/complete-examples.md:549 resources/complete-examples.md:753 resources/complete-examples.md:754 resources/complete-examples.md:755 resources/complete-examples.md:816 resources/component-patterns.md:199 resources/data-fetching.md:24 resources/data-fetching.md:70 resources/data-fetching.md:219 resources/data-fetching.md:308 resources/data-fetching.md:513 resources/data-fetching.md:544 resources/data-fetching.md:545 resources/data-fetching.md:631 resources/file-organization.md:237 resources/file-organization.md:237 resources/file-organization.md:237 resources/file-organization.md:238 resources/file-organization.md:238 resources/file-organization.md:238 resources/file-organization.md:395 resources/file-organization.md:396 resources/loading-and-error-states.md:300 resources/loading-and-error-states.md:339 resources/loading-and-error-states.md:365 skill-report.json:6 SKILL.md:66 SKILL.md:66 SKILL.md:355
Audité par: claude Voir l’historique des audits →
Score de qualité
38
Architecture
100
Maintenabilité
83
Contenu
22
Communauté
100
Sécurité
91
Conformité aux spécifications
Ce que vous pouvez construire
元件架構
學習使用 TypeScript、Suspense 邊界和延遲載入的現代 React 元件模式
資料獲取模式
使用快取優先策略實作 TanStack Query 以實現高效的 API 資料管理
MUI 樣式指南
使用類型安全的 sx 屬性和響應式佈局應用 MUI v7 樣式模式
Essayez ces prompts
新元件
Create a React.FC component that fetches data using useSuspenseQuery, uses useCallback for event handlers, and wraps content in SuspenseLoader
API 服務
Create an API service file for a feature with centralized methods using apiClient, proper TypeScript types, and JSDoc comments
路由設定
Create a folder-based route with createFileRoute, lazy loaded component, SuspenseLoader wrapper, and breadcrumb loader
效能優化
Optimize this component by adding useMemo for expensive computations, useCallback for handlers passed to children, and React.memo for the component itself
Bonnes pratiques
- 對所有元件使用 React.FC<Props> 模式搭配明確的 TypeScript 介面
- 將延遲載入的元件包裝在 SuspenseLoader 中以防止版面位移
- 對資料獲取使用 useSuspenseQuery，對更新使用 useMutation 並搭配適當的快取失效
Éviter
- 永遠不要使用會導致版面位移的載入旋轉圖示提前返回
- 避免使用 any 類型 - 使用特定類型或 unknown 搭配類型守衛
- 不要直接進行身份驗證的 API 呼叫 - 應使用 useAuth 掛鉤
Foire aux questions
支援哪個 React 版本？
React 19 搭配 hooks 模式。使用 React.FC 進行元件類型標註，使用 React.lazy 進行程式碼分割。
內聯樣式的最大元件大小是多少？
如果樣式少於 100 行則保持內���。當樣式超過 100 行時移至獨立的 .styles.ts 檔案。
這如何與現有程式碼整合？
已設定匯入別名：@/ 代表 src/、~types 代表 types/、~components 代表 components/、~features 代表 features/。
使用這些模式時使用者資料安全嗎？
可以。這些模式專注於 UI/狀態管理。身份驗證使用安全的掛鉤，API 呼叫透過 apiClient 使用 HTTP-only cookie。
為什麼我的元件頻繁重新渲染？
對傳遞給子元件的函式新增 useCallback，對計算值使用 useMemo，對昂貴的元件使用 React.memo。
這與 create-react-app 模式相比如何？
現代模式取代 CRA 模式。使用 TanStack Router 而非 react-router，使用 TanStack Query 而非 useEffect 獲取，使用 MUI v7 sx 屬性而非 makeStyles。
Détails du développeur
Auteur
BrianDai22Licence
MIT
Dépôt
https://github.com/BrianDai22/concetrateaiquiz/tree/main/.claude/skills/frontend-dev-guidelinesRéf
main
Structure de fichiers