📦 その他コミュニティ

nebula-project-structure

Nebulaプロジェクトのコード構造を理解し、npm、yarn、pnpm、bunといったパッケージ管理ツールを適切に選択・実行するために、プロジェクトのフォルダ構成や関連情報を参照するSkill。

📜 元の英語説明(参考)

Project folder structure and package manager detection for Nebula. Reference when navigating the codebase, running commands, or determining which package manager to use (npm/yarn/pnpm/bun).

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

一言でいうと

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

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

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

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nebula-project-structure.zip https://jpskill.com/download/9240.zip && unzip -o nebula-project-structure.zip && rm nebula-project-structure.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9240.zip -OutFile "$d\nebula-project-structure.zip"; Expand-Archive "$d\nebula-project-structure.zip" -DestinationPath $d -Force; ri "$d\nebula-project-structure.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)

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

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

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

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

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

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

プロジェクト構造

このプロジェクトでは、サンプルコードと実際のコードを分離するために、2つのフォルダ構造を使用しています。

src/
├── components/     # 実際のコンポーネント (Storybook はここから読み込みます)
│   └── global.css  # Storybook によってインポートされるベーススタイル
├── stories/        # 実際のストーリー (Storybook はここから読み込みます)

examples/
├── components/     # コンポーネントの実装例 (参考用)
└── stories/        # ストーリーの例 (参考用)

パッケージマネージャー

プロジェクトルートにあるロックファイルをチェックして、パッケージマネージャーを検出します。

package-lock.json → npm (npm run, npx)
yarn.lock → yarn (yarn, yarn dlx)
pnpm-lock.yaml → pnpm (pnpm, pnpm dlx)
bun.lockb → bun (bun run, bunx)

これらの手順のすべてのコマンドで、検出されたパッケージマネージャーを使用してください。

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

Project structure

This project uses a two-folder structure to separate example code from working code:

src/
├── components/     # Working components (Storybook reads from here)
│   └── global.css  # Base styles imported by Storybook
├── stories/        # Working stories (Storybook reads from here)

examples/
├── components/     # Example component implementations (for reference)
└── stories/        # Example stories (for reference)

Package manager

Detect the package manager by checking for lock files in the project root:

package-lock.json → npm (npm run, npx)
yarn.lock → yarn (yarn, yarn dlx)
pnpm-lock.yaml → pnpm (pnpm, pnpm dlx)
bun.lockb → bun (bun run, bunx)

Use the detected package manager for all commands in these instructions.