CC

chongdashu/cc-skills-nanobananapro

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

137 stars 质量 48 趋势 16

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:

在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add chongdashu/cc-skills-nanobananapro
新手?先看 mcpskill.org 教程 →