frontend-dev-guidelines
React/TypeScript フロントエンドガイドラインの適用
متاح أيضًا من: sickn33,DojoCodingLabs,0Chan-smc,diet103,BrianDai22,BOM-98,0Chan-smc
一貫したパターンなしにReact/TypeScriptのフロントエンドコードを記述すると、メンテナンスの問題やバグが発生します。このスキルは、コンポーネント、データ取得、ルーティング、スタイリング、パフォーマンス最適化に関するコード例を含む包括的な開発ガイドラインを、最新のReactパターンで提供します。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "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/ディレクトリでタイプを定義する
التدقيق الأمني
آمن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.
عوامل الخطر
⚙️ الأوامر الخارجية (520)
⚡ يحتوي على سكربتات (22)
📁 الوصول إلى نظام الملفات (36)
درجة الجودة
ماذا يمكنك بناءه
フロントエンドコードレビュー
一貫性のために確立されたパターンとベストプラクティスに基づいてフロントエンドコードをレビューする
新機能の実装
適切なデータ取得と状態管理を備えた最新の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を使用する