chongdashu/cc-skills-nanobananapro
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
chongdashu/cc-skills-nanobananapro는 [T0]]에서 수입된 대리인 기술 후보입니다
개요
chongdashu/cc-skills-nanobananapro는 [T0]]에서 수입된 대리인 기술 후보입니다
개요(AI 번역)
As Seen On: Nano Banana Pro 앱 구축 10x 패스너 (Claude Code Skill) · 기술 플러스 기술이 필요하십니까? BuilderPack.ai 또는 Claude Code Pack에서 가져 오기
Claude Code에 대한 두 가지 전문 기술은 스킬 커레이터 플러스와 함께 구축되어 특정 도메인에 대한 고품질, 재사용 가능한 기술을 만드는 방법을 분석합니다.
내부는 무엇입니까?
이 저장소는 ** 두 개의 사용자 정의 기술 ** 및 ** 완전한 데모 앱을 구축하는 데 사용 ** 그들과 함께. 기술에 대한 기술이 생성되고 Claude와 함께 생산 응용 프로그램을 구축하기위한 도메인 별 패턴을 보여줍니다.
스킬 (.claude/skills/)
| 기술 | 기술 |
|---|---|
| nano-banana-builder | Google Gemini의 이미지 생성 API(gemini-2.5-flash-image 및 gemini-3-pro-image-preview)에 의해 구동되는 풀스택 웹 앱 구축 서버 작업, API 경로, 스토리지, 속도 제한 및 대화형 이미지 편집 패턴 커버. · |
| threejs-builder | 현대 ES 모듈 패턴을 사용하여 간단한 3.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