jpskill.com
🛠️ 開発・MCP コミュニティ

typescript-clean-code

TypeScript/JavaScript開発者が、Clean Code原則やプロのプラクティス、ワークフローに基づき、コード作成、レビュー、リファクタリング、テスト駆動開発、バグ修正などを効果的に行い、チームと協調して納期を守れるように支援するSkill。

📜 元の英語説明(参考)

Clean Code principles, professional practices, and workflows for TypeScript developers. Based on Robert C. Martin's "Clean Code" and "The Clean Coder" books. IMPORTANT: When this skill is active, always load and consult the reference files (rules.md, examples.md) before giving advice or writing code. Reference content takes precedence over general knowledge. Use this skill when: - Writing TypeScript/JavaScript code - Reviewing code or pull requests - Refactoring existing code - Following test-driven development (TDD) - Fixing bugs with proper test coverage - Planning test strategy for features - Estimating tasks accurately - Handling deadlines and commitments professionally - Working effectively with teams

🇯🇵 日本人クリエイター向け解説

一言でいうと

TypeScript/JavaScript開発者が、Clean Code原則やプロのプラクティス、ワークフローに基づき、コード作成、レビュー、リファクタリング、テスト駆動開発、バグ修正などを効果的に行い、チームと協調して納期を守れるように支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o typescript-clean-code.zip https://jpskill.com/download/23727.zip && unzip -o typescript-clean-code.zip && rm typescript-clean-code.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/23727.zip -OutFile "$d\typescript-clean-code.zip"; Expand-Archive "$d\typescript-clean-code.zip" -DestinationPath $d -Force; ri "$d\typescript-clean-code.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して typescript-clean-code.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → typescript-clean-code フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
63

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] typescript-clean-code

クリーンコード

TypeScript開発者のための原則、実践、およびワークフローです。

重要: 参照優先アプローチ

いかなる原則を適用したり、推奨事項を作成したりする前に、必ず参照ファイルを読み込み、参照してください。 このスキルに含まれる参照資料は、Robert C. Martinの書籍から厳選された信頼性の高い知識をTypeScript向けに調整したものです。このスキルがアクティブな場合:

  1. 応答する前に参照資料を読む - コード品質や専門的な実践に関するあらゆるトピックについて、アドバイスを与えたりコードを書いたりする前に、references/から関連するrules.mdおよびexamples.mdファイルを読み込んでください。一般的な知識だけに頼らないでください。
  2. 参照コンテンツは内部知識に優先する - あなたの一般的な知識が参照ファイルに記載されている内容と矛盾する場合、参照ファイルに従ってください。それらには、このスキルが強制する具体的なルール、しきい値、およびパターンが含まれています。
  3. 具体的なルールを引用する - 推奨事項を作成する際は、具体的なルールを引用してください(例:「references/functions/rules.mdルール1:関数を小さく保つ、2〜5行が理想」)。これにより、ユーザーはガイダンスの出所をたどることができます。
  4. 参照ファイルの例を使用する - 独自のコード例を生成するよりも、references/[topic]/examples.mdにある悪い/良いコード例を優先してください。これらの例はTypeScript向けに厳選されており、意図された正確なパターンを示しています。
  5. ワークフローに段階的に従う - タスク(レビュー、リファクタリング、TDDなど)を実行する際は、対応するワークフローファイルを読み込み、各ステップが指す参照ファイルを読み込みながら、各ステップに従ってください。

参照ファイルの読み込みをスキップしないでください。 たとえクリーンコードの原則を「知っている」としても、参照ファイルには、あなたの一般的な知識と完全に一致しない可能性のある、具体的なTypeScriptへの適応、しきい値、チェックリスト、およびコードの匂いのカタログが含まれています。

クイックスタート

  1. タスクの場合: guidelines.mdを確認 → 適切なワークフローを見つける → 読み込む → 各ステップに従う(参照ファイルを読み込む)
  2. 参照の場合: 作業に関連する特定のrules.mdおよびexamples.mdファイルを読み込む → それらを適用する
  3. ワークフローに従う: 一貫した結果を得るための段階的なプロセス — 各ステップが参照するファイルを常に読み込む

ワークフロー

一般的なタスクの段階的なプロセスです。

ワークフロー 使用する状況
workflows/code-review/workflow.md コードの品質レビュー
workflows/pr-review/workflow.md プルリクエストのレビュー
workflows/tdd.md テスト駆動開発サイクル
workflows/refactoring/workflow.md テストを伴う安全なリファクタリング
workflows/new-feature.md 新機能の構築
workflows/bug-fix.md バグの適切な修正
workflows/test-strategy.md テストカバレッジの計画
workflows/estimation.md タスクの見積もり (PERT)
workflows/deadline-negotiation.md 非現実的な締め切りへの対応

ステップファイルアーキテクチャ (コードレビュー、PRレビュー、リファクタリング)

コードレビュー、PRレビュー、およびリファクタリングのワークフローは、コンテキストセーフな実行のためにステップファイルアーキテクチャを使用しています。

  • 各ワークフローには、ステップを記述し、steps/step-01-init.mdを読み込むworkflow.mdエントリポイントがあります。
  • 各ステップはsteps/内の個別のファイルであり、順次読み込まれます。
  • 進行状況は、出力ドキュメントのYAMLフロントマターにあるstepsCompleted配列によって追跡されます。
  • ワークフローの途中でコンテキストが圧縮された場合、step-01-init.mdは既存の出力を検出し、step-01b-continue.mdは最後に完了したステップから再開します。
  • 各ステップは、分析の前に特定の参照ファイルを読み込み、発見事項でルールを引用します。
  • リファクタリングワークフローには、反復的な変更-テスト-コミットサイクル(ステップ4-7)のためのループが含まれています。

参照カテゴリ

パート1: コード品質 (クリーンコードの書籍)

カテゴリ ファイル数 目的
naming 3 変数、関数、クラスの命名
functions 4 関数の設計とレビュー
classes 3 クラス/モジュールの設計
comments 3 コメントのベストプラクティス
error-handling 3 例外処理
unit-tests 3 クリーンなテストの原則
formatting 3 コードのレイアウト
smells 3 コードの匂いのカタログ (50以上)

パート2: プロフェッショナルな実践 (クリーンコーダーの書籍)

カテゴリ ファイル数 目的
professionalism 3 プロフェッショナル倫理
saying-no 3 要求の拒否
commitment 3 約束をすること
coding-practices 3 日常の習慣、フロー、デバッグ
tdd 3 TDDワークフローと利点
practicing 3 意図的な練習
acceptance-testing 3 テストとしての要件
testing-strategies 3 テストピラミッド
time-management 3 会議、集中
estimation 3 PERT見積もり
pressure 3 プレッシャー下での作業
collaboration 3 チームとの協業

主要原則 (概要のみ — 必ず完全な参照資料を読み込んでください)

これらは簡略化されたリマインダーです。適用する前に、必ず対応する参照ファイルを読み込み、完全なルール、しきい値、および例を確認してください。

コード品質

  1. 可読性references/formatting/rules.mdreferences/naming/rules.md
  2. 単一責任references/classes/rules.mdreferences/functions/rules.md
  3. 小さな単位references/functions/rules.md (ルール1: 2-5行が理想)
  4. 意味のある名前references/naming/rules.md
  5. DRYreferences/smells/rules.md (G5)
  6. クリーンなテストreferences/unit-tests/rules.md

プロフェッショナルな実践

  1. 責任を持つreferences/professionalism/rules.md
  2. ノーと言うreferences/saying-no/rules.md
  3. 明確にコミットするreferences/commitment/rules.md
  4. 見積もり ≠ コミットメントreferences/estimation/rules.md
  5. プレッシャー下でもクリーンを保つreferences/pressure/rules.md

ガイドライン

guidelines.mdを参照してください。

  • タスク → ワークフローのマッピング
  • 状況 → 参照ファイルのマッピング
  • 一般的なシナリオの意思決定ツリー

参照読み込みチェックリスト

コードに関するアドバイスを与えたり、コードを書いたりする前に、以下を確認してください。

  • [ ] 現在のタスクにどの参照カテゴリが適用されるかを特定しました。
  • [ ] 適用可能な各カテゴリのrules.mdを読み込みました。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Clean Code

Principles, practices, and workflows for TypeScript developers.

Critical: Reference-First Approach

Always load and consult the reference files before applying any principle or making any recommendation. The references in this skill contain curated, authoritative knowledge from Robert C. Martin's books, adapted for TypeScript. When this skill is active:

  1. Read references before responding - For any code quality or professional practice topic, load the relevant rules.md and examples.md files from references/ before giving advice or writing code. Do not rely on general knowledge alone.
  2. Reference content overrides internal knowledge - If your general knowledge conflicts with what the reference files state, follow the reference files. They contain the specific rules, thresholds, and patterns this skill enforces.
  3. Cite specific rules - When making recommendations, reference the specific rule (e.g., "per references/functions/rules.md Rule 1: Keep Functions Small, 2-5 lines ideal") so the user can trace the guidance back to its source.
  4. Use examples from reference files - Prefer the bad/good code examples in references/[topic]/examples.md over generating your own. These examples are curated for TypeScript and demonstrate the exact patterns intended.
  5. Follow workflows step-by-step - When executing a task (review, refactoring, TDD, etc.), load the corresponding workflow file and follow each step, loading the reference files each step points to.

Do not skip loading references. Even if you "know" Clean Code principles, the reference files contain specific TypeScript adaptations, thresholds, checklists, and smell catalogs that your general knowledge may not match exactly.

Quick Start

  1. For a task: Check guidelines.md → find the right workflow → load it → follow each step (loading referenced files)
  2. For reference: Load the specific rules.md and examples.md files relevant to your work → apply them
  3. Follow the workflow: Step-by-step process for consistent results — always load the files each step references

Workflows

Step-by-step processes for common tasks:

Workflow When to Use
workflows/code-review/workflow.md Reviewing code for quality
workflows/pr-review/workflow.md Reviewing pull requests
workflows/tdd.md Test-driven development cycle
workflows/refactoring/workflow.md Safe refactoring with tests
workflows/new-feature.md Building new functionality
workflows/bug-fix.md Fixing bugs properly
workflows/test-strategy.md Planning test coverage
workflows/estimation.md Estimating tasks (PERT)
workflows/deadline-negotiation.md Handling unrealistic deadlines

Step-File Architecture (Code Review, PR Review, Refactoring)

The code review, PR review, and refactoring workflows use a step-file architecture for context-safe execution:

  • Each workflow has a workflow.md entry point that describes steps and loads steps/step-01-init.md
  • Each step is a separate file in steps/, loaded sequentially
  • Progress is tracked via stepsCompleted array in the output document's YAML frontmatter
  • If context is compacted mid-workflow, step-01-init.md detects the existing output and step-01b-continue.md resumes from the last completed step
  • Each step loads specific reference files before analysis and cites rules in findings
  • The refactoring workflow includes a loop (steps 4-7) for iterative change-test-commit cycles

Reference Categories

Part 1: Code Quality (Clean Code book)

Category Files Purpose
naming 3 Variable, function, class naming
functions 4 Function design and review
classes 3 Class/module design
comments 3 Comment best practices
error-handling 3 Exception handling
unit-tests 3 Clean test principles
formatting 3 Code layout
smells 3 Code smell catalog (50+)

Part 2: Professional Practices (Clean Coder book)

Category Files Purpose
professionalism 3 Professional ethics
saying-no 3 Declining requests
commitment 3 Making promises
coding-practices 3 Daily habits, flow, debugging
tdd 3 TDD workflow and benefits
practicing 3 Deliberate practice
acceptance-testing 3 Requirements as tests
testing-strategies 3 Test pyramid
time-management 3 Meetings, focus
estimation 3 PERT estimation
pressure 3 Working under pressure
collaboration 3 Working with teams

Key Principles (Summary Only — Always Load Full References)

These are abbreviated reminders. Always load the corresponding reference files for the full rules, thresholds, and examples before applying.

Code Quality

  1. Readabilityreferences/formatting/rules.md, references/naming/rules.md
  2. Single Responsibilityreferences/classes/rules.md, references/functions/rules.md
  3. Small Unitsreferences/functions/rules.md (Rule 1: 2-5 lines ideal)
  4. Meaningful Namesreferences/naming/rules.md
  5. DRYreferences/smells/rules.md (G5)
  6. Clean Testsreferences/unit-tests/rules.md

Professional Practices

  1. Take Responsibilityreferences/professionalism/rules.md
  2. Say Noreferences/saying-no/rules.md
  3. Commit Clearlyreferences/commitment/rules.md
  4. Estimates != Commitmentsreferences/estimation/rules.md
  5. Stay Clean Under Pressurereferences/pressure/rules.md

Guidelines

See guidelines.md for:

  • Task → workflow mapping
  • Situation → reference file mapping
  • Decision tree for common scenarios

Reference Loading Checklist

Before giving any code advice or writing code, verify:

  • [ ] Identified which reference categories apply to the current task
  • [ ] Loaded the rules.md for each applicable category
  • [ ] Loaded examples.md if demonstrating patterns or reviewing code
  • [ ] Loaded the relevant workflow/*.md if executing a multi-step task
  • [ ] Will cite specific rules/files in recommendations

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。