
chongdashu/cc-skills-nanobananapro 是从 https://github.com/chongdashu/cc-skills-nanobananapro. 导入的特工技能候选人。
概览
chongdashu/cc-skills-nanobananapro 是从 https://github.com/chongdashu/cc-skills-nanobananapro. 导入的特工技能候选人。
概述(AI 翻译)
如所示:构建Nano Banana Pro应用速度提升10倍(Claude代码技能)
想要技能创建加技能? 可以从 BuilderPack.ai 获取,或者直接买Claude代码包
这是两项针对Claude Code的专业技能,使用技能创建器加(skill-creator-plus)——展示如何为特定领域创建高质量、可重复使用的技能。
里面有什么
本仓库包含两个自定义技能及其用于构建完整演示应用的提示词。这些技能是通过 skill-creator-plus 创建的,展示了使用 Claude 构建生产应用的领域特定模式。
技能 (.claude/skills/)
| 技能 | 描述 |
|---|---|
| nano-banana-builder | 构建由Google Gemini图像生成API(gemini-2.5-flash-image和gemini-3-pro-image-preview)驱动的全栈网页应用。涵盖服务器操作、API路由、存储、速率限制和对话式图像编辑模式。 |
| threejs-构建器 | 使用现代ES模块模式创建简单、性能Three.js的网页应用。包括场景设置、光照、几何体、材质、动画和响应式渲染。 |
本页由 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