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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
module-scaffolder.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
module-scaffolderフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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/ を参照してください
トラブルシューティング
モジュール名: 小文字とハイフンを使用します(analytics、user-profile)
コンポーネント名: PascalCase を使用します(AnalyticsChart、UserCard)
パスエラー: プロジェクトルートから実行しているか、絶対パスを使用していることを確認してください
テンプレート
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
anytypes - Import patterns
Integration
Before scaffolding: Use brainstorming skill to plan module design
After scaffolding:
- Use
trpc-scaffolderto create API endpoints - Use
quality-reviewerto review code quality
Documentation
Detailed references available in references/:
6-folder-architecture.md- Where modules fit, structure rulesnaming-conventions.md- I prefix, PascalCase, camelCase rulespath-aliases.md- Import patterns, @shared, @lib usagequality-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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (3,440 bytes)
- 📎 references/6-folder-architecture.md (6,298 bytes)
- 📎 references/naming-conventions.md (7,146 bytes)
- 📎 references/path-aliases.md (7,093 bytes)
- 📎 references/quality-checklist.md (8,890 bytes)
- 📎 scripts/add-component.sh (2,519 bytes)
- 📎 scripts/create-module.sh (3,472 bytes)
- 📎 scripts/validate-module.sh (4,266 bytes)