juniors-best-practice

Name: juniors-best-practice
Author: siberiacancode

github.com/siberiacancode開発23121 回インストール3 週間前に更新

リポジトリ

juniors-best-practice について

初級開発者やチーム向けの、React と TypeScript の実践的な規約ガイドです。領域と優先度別のルールに誤例・正例があり、レビューやリファクタリング、新機能開発に活用できます。

主な機能

01優先度と領域別のルール
02React と TypeScript の指針
03フォーマット、インポート、Git の規約
04誤例と修正例
05個別ルールと統合ガイド

活用シーン

01React/TypeScript コードのレビュー
02初級開発者の指導
03保守しやすい形へのリファクタリング
04プロジェクト規約の統一

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/siberiacancode/agent-skills --skill juniors-best-practice

インストール後、Claude Code で/juniors-best-practiceを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md

metadata.json

README.md

rules/

_sections.md

_template.md

assets-svg-files.md

beginner-const-vs-let.md

beginner-double-negation.md

beginner-early-return.md

beginner-nullish-vs-or.md

beginner-unnecessary-destructuring.md

beginner-uppercase-constants.md

beginner-useless-return-arrow.md

devtools-formatter-linter.md

devtools-package-manager-lock.md

devtools-sorting-imports.md

git-commit-convention.md

react-children-prop.md

react-extends-component.md

react-props-typing.md

react-string-props.md

rest-naming-openapi.md

rest-scalability-abstractions.md

styling-classnames-function.md

styling-css-states.md

typescript-alias-naming.md

typescript-flat-translations.md

詳細

ジュニア向けのベストプラクティス

React と TypeScript のプロジェクトにおける、ジュニア向けのベストプラクティスです。ルールは簡潔で実践的であり、コードレビューやリファクタリング、新機能の開発で一貫性を保てるよう、適用範囲ごとに整理されています。

適用するタイミング

次のような場合に、これらのガイドラインを参照してください。

明確さと一貫性を重視して React／TypeScript のコードを記述またはレビューするとき
ジュニア開発者を指導するとき、またはチームの基本的な規約を定めるとき
シンプルで保守しやすいパターンに沿うよう、コードをリファクタリングするとき
プロジェクト全体の慣習（インポート、ツール、命名、コミット）を統一するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響	プレフィックス
1	初心者向けの基礎	HIGH	`beginner-`
2	TypeScript	MEDIUM	`typescript-`
3	React	MEDIUM	`react-`
4	スタイリング	MEDIUM	`styling-`
5	開発ツール	MEDIUM	`devtools-`
6	アセット	LOW-MEDIUM	`assets-`
7	Git	LOW	`git-`
8	REST	MEDIUM	`rest-`

クイックリファレンス

1. 初心者向けの基礎（HIGH）

beginner-early-return - ネストを減らすため、早期リターンを優先する
beginner-double-negation - !isNotX パターンを避ける
beginner-unnecessary-destructuring - 明確さを保つため、オブジェクトをそのまま扱う
beginner-const-vs-let - 原則として const を使う
beginner-nullish-vs-or - デフォルト値には ?? を使う
beginner-useless-return-arrow - 不要な return を削除する
beginner-uppercase-constants - 変化しない定数にのみ UPPER_CASE を使う

2. TypeScript（MEDIUM）

typescript-alias-naming - 安全なパスエイリアスのプレフィックスを使う
typescript-flat-translations - 重複を減らすため、フラットな翻訳キーを優先する

3. React（MEDIUM）

react-string-props - 可能な場合は文字列リテラルを使う
react-children-prop - コンポジションには children を使う
react-extends-component - ネイティブ要素の props を拡張する
react-props-typing - props の型定義を読みやすく保つ

4. スタイリング（MEDIUM）

styling-classnames-function - 条件付きクラスには clsx を使う
styling-css-states - コンポーネントの状態には CSS セレクターを優先する

5. 開発ツール（MEDIUM）

devtools-formatter-linter - フォーマッターとリンターを使う
devtools-sorting-imports - インポートの順序とグループ分けを保つ
devtools-package-manager-lock - パッケージマネージャーは 1 つに統一する

6. アセット（LOW-MEDIUM）

assets-svg-files - SVG はコンポーネントとして使う

7. Git（LOW）

git-commit-convention - 一貫したコミット規約を使う

8. REST（MEDIUM）

rest-scalability-abstractions - 再利用可能なトランスポート抽象化を基盤に REST レイヤーを構築する
rest-naming-openapi - REST の命名を OpenAPI の契約に合わせる

使い方

詳しい説明と例については、各ルールのファイルを読んでください。

rules/beginner-early-return.md
rules/react-props-typing.md

各ルールのファイルには、次の内容が含まれています。

重要な理由についての簡単な説明
誤ったコード例とその説明
正しいコード例とその説明
補足情報と参考資料

ルールをすべてまとめたドキュメント

すべてのルールを展開した完全なガイドについては、AGENTS.md を参照してください。

Markdown 対応

ログインしてコメント

基本情報

作者: siberiacancode
リポジトリ: siberiacancode/agent-skills
カテゴリ: 開発
インストール数: 121
GitHub スター: 23

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

848.6k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。