المهارات frontend-dev-guidelines
⚛️

frontend-dev-guidelines

آمن ⚙️ الأوامر الخارجية⚡ يحتوي على سكربتات📁 الوصول إلى نظام الملفات🌐 الوصول إلى الشبكة

React/TypeScript フロントエンドガイドラインの適用

متاح أيضًا من: sickn33,DojoCodingLabs,0Chan-smc,diet103,BrianDai22,BOM-98,0Chan-smc

一貫したパターンなしにReact/TypeScriptのフロントエンドコードを記述すると、メンテナンスの問題やバグが発生します。このスキルは、コンポーネント、データ取得、ルーティング、スタイリング、パフォーマンス最適化に関するコード例を含む包括的な開発ガイドラインを、最新のReactパターンで提供します。

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "frontend-dev-guidelines". frontend-dev-guidelinesスキルに従ってユーザーコンポーネントを作成する

النتيجة المتوقعة:

  • TypeScriptインターフェースを持つReact.FCコンポーネント
  • SuspenseLoaderでラップされたuseSuspenseQueryによるデータ取得
  • SxProps<Theme>を使用したMUI v7のsxプロップによるスタイリング
  • イベントハンドラ用のuseCallback
  • エラー/成功通知用のuseMuiSnackbar

استخدام "frontend-dev-guidelines". 新機能のファイルをどのように整理すればよいですか

النتيجة المتوقعة:

  • features/{feature-name}/ディレクトリを作成する
  • サブディレクトリをセットアップ: api/、components/、hooks/、helpers/、types/
  • api/{feature}Api.tsにAPIサービスファイルを作成する
  • フィーチャーのindex.tsから公開APIをエクスポートする
  • Suspense境界でフィーチャーコンポーネントをレイジーロードする

استخدام "frontend-dev-guidelines". このプロジェクトのTypeScript標準は何ですか

النتيجة المتوقعة:

  • noImplicitAnyとstrictNullChecksでstrictモードを有効にする
  • 明示的なTypeScriptインターフェースでReact.FC<Props>パターンを使用する
  • タイプ専用のインポートにimport typeを使用する
  • any型を決して使用しない - 特定の型またはunknownを使用する
  • フィーチャーレベルのtypes/ディレクトリでタイプを定義する

التدقيق الأمني

آمن
v5 • 1/17/2026

Pure 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.

12
الملفات التي تم فحصها
5,725
الأسطر التي تم تحليلها
4
النتائج
5
إجمالي عمليات التدقيق

عوامل الخطر

⚙️ الأوامر الخارجية (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
⚡ يحتوي على سكربتات (22)
📁 الوصول إلى نظام الملفات (36)
🌐 الوصول إلى الشبكة (6)
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
22
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

フロントエンドコードレビュー

一貫性のために確立されたパターンとベストプラクティスに基づいてフロントエンドコードをレビューする

新機能の実装

適切なデータ取得と状態管理を備えた最新のReactパターンに従って新機能を実装する

最新のReactを学習する

Suspense、TypeScript、MUIコンポーネント開発を含むReactパターンを学習する

جرّب هذه الموجهات

コンポーネントの作成
frontend-dev-guidelinesスキルに従って新しいReactコンポーネントを作成してください。React.FCパターンとTypeScript、useSuspenseQueryによるデータ取得、MUI v7のスタイリングを含めること。
ルーティングのセットアップ
TanStack Routerを使用してfrontend-dev-guidelinesスキルに従って新しいルートを作成してください。フォルダベースのルーティング構造、レイジーローディング、SuspenseLoaderラッパーを含めること。
データ取得の実装
useSuspenseQueryを使用してfrontend-dev-guidelinesスキルに従ってデータ取得を実装してください。キャッシュファースト戦略、適切なクエリキー、エラー処理を含めること。
パフォーマンスの最適化
frontend-dev-guidelinesスキルに従ってこのReactコンポーネントのパフォーマンスを最適化してください。useMemo、useCallback、React.memo、メモリリーク防止を含めること。

أفضل الممارسات

  • すべてのコンポーネントで明示的なTypeScriptインターフェースを持つReact.FC<Props>パターンを使用する
  • レイジーロードされたコンポーネントをSuspenseLoaderでラップしてレイアウトシフトを防止する
  • API呼び出しの前にuseSuspenseQueryを使用したキャッシュファーストデータ取得戦略を実装する

تجنب

  • ローディングスピナー付きの早期リターンを決して使用しない - レイアウトシフトが発生します
  • react-toastifyを決して使用しない - 通知にはuseMuiSnackbarを使用する
  • TypeScriptでany型を決して使用しない - 特定の型またはunknownを使用する

الأسئلة المتكررة

どのTypeScriptバージョンと設定がサポートされていますか?
noImplicitAnyとstrictNullChecksでstrictモードが有効です。タイプ専用のインポートにはimport typeを使用してください。
コンポーネントの複雑さに関するパフォーマンス制限はありますか?
300行を超える場合はコンポーネントを分割してください。100行未満はインラインスタイルを使用し、それ以上は別のファイルを作成してください。
既存のMUIコンポーネントとどのように統合しますか?
исключительно sxプロップをSxProps<Theme>タイプで使用してください。MUI v7のGridはxs/mdプロップではなくsizeプロップを使用します。
これらのパターンを使用时にデータは安全ですか?
パターンはドキュメントのみです。外部データアクセス、ネットワーク呼び出し、またはコード実行は行われません。
なぜコンポーネントがローディング中にちらついていますか?
ローディングスピナー付きの早期リターンを使用しています。代わりにコンポーネントをSuspenseLoaderでラップしてください。
create-react-appやViteテンプレートと比較するとどうですか?
これらは任意のReactビルドツールで動作するコーディングパターンガイドラインです。パターンはコード品質をカバーします。