frontend-dev-guidelines
React TypeScript フロントエンドガイドラインを適用
متاح أيضًا من: Dimon94,sickn33,DojoCodingLabs,0Chan-smc,BrianDai22,BOM-98,0Chan-smc
フロントエンドプロジェクトでは一貫性のあるパターンが不足し、メンテナンスの問題やバグにつながることがよくあります。このスキルは、最新のパターン、ファイル構成、ベストプラクティスを含む、ReactとTypeScriptアプリケーションの包括的なガイドラインを提供します。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-dev-guidelines". ユーザープロフィールコンポーネントを作成
النتيجة المتوقعة:
フロントエンドガイドラインに従ってユーザープロフィールコンポーネントを作成します:
1. ファイル構造: features/user/profile/
2. TypeScriptインターフェースを使用したコンポーネント
3. SuspenseとError Boundariesを使用したローディングとエラー状態
4. useSuspenseQueryを使用したデータフェッチング
5. スタイリングのためのMUIコンポーネント
استخدام "frontend-dev-guidelines". Reactプロジェクトのファイルをどのように整理すべきですか?
النتيجة المتوقعة:
フロントエンドガイドラインに従って、featuresディレクトリパターンでReactプロジェクトを整理してください:
- src/
- features/
- feature-name/
- components/
- hooks/
- types/
- utils/
- shared/
- components/
- hooks/
- types/
- routes/
- app/
これにより関連するコードをまとめ、再利用性を促進します。
التدقيق الأمني
آمنThis is a documentation skill containing frontend development guidelines for React and TypeScript applications. Static analysis detected code patterns within markdown documentation files. All findings are false positives as the patterns are code examples in documentation, not executable code. No security concerns identified.
درجة الجودة
ماذا يمكنك بناءه
新規Reactプロジェクトのセットアップ
チーム全体のガイドラインを用いて、新しいReact TypeScriptプロジェクトを開始する際に一貫したパターンと構造を確立します
コードレビューと品質保証
確立されたガイドラインに対して既存のフロントエンドコードをレビューし、改善と一貫性のための領域を特定します
最新のReactパターンの学習
Suspense、データフェッチング、コンポーネント構成を含む、React開発の最新ベストプラクティスを学びます
جرّب هذه الموجهات
フロントエンドガイドラインに従って新しいReactコンポーネントを作成してください。コンポーネントはTypeScriptを使用し、適切な型を含み、ローディングとエラー状態を処理し、ファイル構成パターンに従う必要があります。
ガイドラインに従って、適切なエラーハンドリング、ローディング状態、キャッシュ管理を含むTanStack Queryを使用した機能のデータフェッチングを実装してください。
ガイドラインに従って、ネストされたルート、パラメータ、適切なファイル構造を含むTanStack Routerを使用した新機能のルートを設定してください。
以下のReact TypeScriptコードをフロントエンドガイドラインに対してレビューしてください。改善が必要な領域を特定し、ベストプラクティスに沿うための具体的な変更を提案してください。
أفضل الممارسات
- アプリケーション全体で型安全性を確保するために、すべてのコンポーネントpropsとデータ型にTypeScriptインターフェースを使用してください
- ファイルタイプでグループ化するのではなく、featuresディレクトリパターンを使用して機能ごとにコードを整理してください
- 一貫したユーザー体験のために、React SuspenseとError Boundariesを使用してローディングとエラー状態を実装してください
تجنب
- 機能間の密結合を引き起こすため、無関係な機能コードをsharedディレクトリに混在させることは避けてください
- ランタイムエラーにつながるため、コンポーネントpropsのTypeScript型定義を省略しないでください
- ビジネスロジックをコンポーネントに直接配置することは避け、再利用性のためにhooksとutilitiesに抽出してください