chongdashu/cc-skills-nanobananapro
Developer toolsこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
chongdashu/cc-skills-nanobananaproは[https://github.com/chongdashu/cc-skills-nanobananapro.から輸入されるエージェントスキルの候補者です
概要
chongdashu/cc-skills-nanobananaproは[https://github.com/chongdashu/cc-skills-nanobananapro.から輸入されるエージェントスキルの候補者です
概要（AI 翻訳）
A Seen On:Nano Banana Pro Apps 10x Faster(クロードコードスキル)のビルド ツイート スキル・クレエーター・プラスのスキルを身につける? BuilderPack.aiまたはClaudeコードパックから入手
クロード・コードの専門技術は、スキル・クリエーター・プラスで構築された2つの専門技術で、特定のドメインの高品質、再利用可能なスキルを作成する方法を示します。
お問い合わせ
インサイドとは
このリポジトリには、2つのカスタムスキルと、*promptsを使用して、完全なデモアプリ**をビルドします。 スキル・クリエーター・プラスを使用して作成され、Claude で制作アプリを構築するためのドメイン固有のパターンを実証しました。
##スキル([[T0])
| スキル | 説明 |
お問い合わせ
|nano-banana-builder | Google Geminiの画像生成API([gemini-2.5-flash-image])と[[[T2]によって機能するフルスタックWebアプリの構築 サーバのアクション、API ルート、ストレージ、レート制限、会話画像編集パターンをカバーします。 お問い合わせ
|threejs-builder | 現代のESモジュールパターンを使用して、シンプルで実行可能な3.js Webアプリケーションを作成します。 シーンのセットアップ、照明、幾何学、素材、アニメーション、およびレスポンシブレンダリングを含みます。 お問い合わせ
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Claude Code Skills Collection
As Seen On: Build Nano Banana Pro Apps 10x Faster (Claude Code Skill)
Want the skill-creator-plus skill? Get it from BuilderPack.ai or just the Claude Code Pack
Two specialized skills for Claude Code built with the skill-creator-plus—demonstrating how to create high-quality, reusable skills for specific domains.
What’s Inside
This repository contains two custom skills and the prompts used to build a complete demo app with them. The skills were created using the skill-creator-plus and demonstrate domain-specific patterns for building production apps with Claude.
Skills (.claude/skills/)
| Skill | Description |
|---|---|
| nano-banana-builder | Build full-stack web apps powered by Google Gemini’s image generation APIs (gemini-2.5-flash-image and gemini-3-pro-image-preview). Covers server actions, API routes, storage, rate limiting, and conversational image editing patterns. |
| threejs-builder | Create simple, performant Three.js web applications using modern ES module patterns. Includes scene setup, lighting, geometries, materials, animations, and responsive rendering. |
| frontend-design | (from Anthropic) Create distinctive frontend interfaces with high design quality and distinctive aesthetics. |
Prompts (/prompts/)
These prompts were used sequentially to build the demo app (a Chinese New Year card generator):
| Prompt | What It Does |
|---|---|
01-nanobanana.txt |
Creates the MVP: upload selfie → generate festive card using Gemini |
02-threejs.txt |
Adds 3D preview: card folds out with Three.js and OrbitControls |
03-frontend-design.txt |
Polishes the UI: transforms basic app into visually striking design |
How These Skills Were Built
Both nano-banana-builder and threejs-builder were created using the skill-creator-plus — a Claude Code skill for building other skills. They demonstrate how to author domain-specific skills that provide:
- Exact model/library references (no guessing or hallucinating)
- Anti-patterns section to prevent common mistakes
- Real working examples with production patterns
- Philosophy & mental models for the domain
Using the Skills
Installation
Copy the .claude/skills/ directory into your project:
cp -r .claude/skills/ your-project/.claude/skills/
Or clone and copy specific skills:
git clone https://github.com/user/repo.git
cp -r repo/.claude/skills/frontend-design your-project/.claude/skills/
Invoking Skills
Once installed, invoke skills in Claude Code:
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add chongdashu/cc-skills-nanobananapro