jpskill.com
💼 ビジネス コミュニティ

module-scaffolder

DevPrep AI内で、TypeScriptインターフェースやパスエイリアスなどの品質基準に沿って、新しい機能モジュール(analyticsやnotificationsなど)を6つのフォルダ構成で自動生成し、開発を効率化するSkill。

📜 元の英語説明(参考)

Scaffolds new feature modules in DevPrep AI following the 6-folder architecture with proper TypeScript interfaces, path aliases, and quality standards. Use when creating new domains like 'analytics', 'notifications', or any new feature module.

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

一言でいうと

DevPrep AI内で、TypeScriptインターフェースやパスエイリアスなどの品質基準に沿って、新しい機能モジュール(analyticsやnotificationsなど)を6つのフォルダ構成で自動生成し、開発を効率化するSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して module-scaffolder.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → module-scaffolder フォルダができる
  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
同梱ファイル
8

📖 Skill本文(日本語訳)

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

Module Scaffolder

適切な構造、ボイラープレートファイル、および強制された品質基準を備えたフィーチャーモジュールの作成を自動化します。


自動トリガー

キーワードによって自動的にトリガーされます。

  • "new module", "create module", "scaffold module"
  • "new feature module", "add module"

クイックコマンド

# Create new module
./.claude/skills/module-scaffolder/scripts/create-module.sh <module-name>

# Add component to module
./.claude/skills/module-scaffolder/scripts/add-component.sh <module-name> <ComponentName>

# Validate module
./.claude/skills/module-scaffolder/scripts/validate-module.sh <module-name>

生成される構造

modules/<module-name>/
├── components/
│   ├── ExampleCard.tsx  # Starter component (rename/delete)
│   └── index.ts         # Barrel exports
├── hooks/
│   └── index.ts
├── utils/
│   └── index.ts
└── types.ts             # Module-specific types

生成されるすべてのファイルは、自動的に DevPrep AI の品質基準に従います。


使用ワークフロー

1. 新しいモジュールの作成

例: analytics モジュールを作成する

# 1. Scaffold
./scripts/create-module.sh analytics

# 2. Add components as needed
./scripts/add-component.sh analytics AnalyticsChart
./scripts/add-component.sh analytics AnalyticsSummary

# 3. Validate
./scripts/validate-module.sh analytics

何が起こるか:

  • 適切な構造でモジュールディレクトリが作成されます
  • テンプレートからボイラープレートファイルが生成されます
  • I プレフィックス付きの TypeScript インターフェース
  • パスエイリアスが構成されます
  • 品質基準が適用されます

2. コンポーネントの追加

./scripts/add-component.sh <module-name> <ComponentName>

結果:

  • 適切な TypeScript パターンでコンポーネントファイルが生成されます
  • Barrel export (index.ts) が自動的に更新されます
  • I プレフィックスインターフェースが含まれます
  • ロジックを実装する準備ができています

3. モジュールの検証

./scripts/validate-module.sh <module-name>

チェック:

  • ディレクトリ構造(6-folder architecture)
  • ファイルサイズ制限(≤180 行)
  • インターフェースの命名(I プレフィックス)
  • any 型がないこと
  • インポートパターン

統合

スキャフォールディングの前に: brainstorming スキルを使用してモジュールの設計を計画します

スキャフォールディングの後:

  • trpc-scaffolder を使用して API エンドポイントを作成します
  • quality-reviewer を使用してコード品質をレビューします

ドキュメント

詳細なリファレンスは references/ で入手できます。

  • 6-folder-architecture.md - モジュールがどこに適合するか、構造ルール
  • naming-conventions.md - I プレフィックス、PascalCase、camelCase ルール
  • path-aliases.md - インポートパターン、@shared、@lib の使用法
  • quality-checklist.md - 完全な品質基準

例: 完全に構造化されたリファレンスモジュールについては、examples/complete-module/ を参照してください


トラブルシューティング

モジュール名: 小文字とハイフンを使用します(analyticsuser-profile

コンポーネント名: PascalCase を使用します(AnalyticsChartUserCard

パスエラー: プロジェクトルートから実行しているか、絶対パスを使用していることを確認してください


テンプレート

templates/ ディレクトリ内のすべてのテンプレートは、スクリプトによって自動的に使用されます。テンプレートを変更して、生成されるコードパターンをカスタマイズします。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Module Scaffolder

Automate creation of feature modules with proper structure, boilerplate files, and enforced quality standards.


Auto-Triggers

Auto-triggered by keywords:

  • "new module", "create module", "scaffold module"
  • "new feature module", "add module"

Quick Commands

# Create new module
./.claude/skills/module-scaffolder/scripts/create-module.sh <module-name>

# Add component to module
./.claude/skills/module-scaffolder/scripts/add-component.sh <module-name> <ComponentName>

# Validate module
./.claude/skills/module-scaffolder/scripts/validate-module.sh <module-name>

Generated Structure

modules/<module-name>/
├── components/
│   ├── ExampleCard.tsx  # Starter component (rename/delete)
│   └── index.ts         # Barrel exports
├── hooks/
│   └── index.ts
├── utils/
│   └── index.ts
└── types.ts             # Module-specific types

All generated files automatically follow DevPrep AI quality standards.


Usage Workflow

1. Creating a New Module

Example: Create analytics module

# 1. Scaffold
./scripts/create-module.sh analytics

# 2. Add components as needed
./scripts/add-component.sh analytics AnalyticsChart
./scripts/add-component.sh analytics AnalyticsSummary

# 3. Validate
./scripts/validate-module.sh analytics

What happens:

  • Module directory created with proper structure
  • Boilerplate files generated from templates
  • TypeScript interfaces with I prefix
  • Path aliases configured
  • Quality standards enforced

2. Adding Components

./scripts/add-component.sh <module-name> <ComponentName>

Result:

  • Component file generated with proper TypeScript patterns
  • Barrel export (index.ts) automatically updated
  • I prefix interface included
  • Ready to implement logic

3. Validating Modules

./scripts/validate-module.sh <module-name>

Checks:

  • Directory structure (6-folder architecture)
  • File size limits (≤180 lines)
  • Interface naming (I prefix)
  • No any types
  • Import patterns

Integration

Before scaffolding: Use brainstorming skill to plan module design

After scaffolding:

  • Use trpc-scaffolder to create API endpoints
  • Use quality-reviewer to review code quality

Documentation

Detailed references available in references/:

  • 6-folder-architecture.md - Where modules fit, structure rules
  • naming-conventions.md - I prefix, PascalCase, camelCase rules
  • path-aliases.md - Import patterns, @shared, @lib usage
  • quality-checklist.md - Complete quality standards

Examples: See examples/complete-module/ for fully structured reference module


Troubleshooting

Module name: Use lowercase-with-hyphens (analytics, user-profile)

Component name: Use PascalCase (AnalyticsChart, UserCard)

Path errors: Ensure running from project root or use absolute paths


Templates

All templates in templates/ directory are automatically used by scripts. Modify templates to customize generated code patterns.

同梱ファイル

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