brand-assets-setup
Next.js 프로젝트용 전체 브랜드 에셋 설정
Next.js 프로젝트의 브랜드 에셋 구축은 반복적이고 오류가 발생하기 쉽습니다. 이 스킬은 프로젝트를 스캔하고, 정확한 사양이 포함된 완전한 체크리스트를 생성하며, 올바른 메타데이터 구성과 함께 모든 에셋을 가져옵니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"brand-assets-setup" 사용 중입니다. 내 Next.js 프로젝트의 브랜드 에셋을 설정해줘
예상 결과:
프로젝트 스캔 완료. 기존 에셋 3개 발견. 브랜드 색상 감지: 배경 #f7f9fb, 기본 #2563eb. 누락된 파일 1개: apple-icon.png. 복사할 준비가 된 생성 프롬프트와 함께 전체 12개 파일 체크리스트가 표시됩니다.
"brand-assets-setup" 사용 중입니다. ~/Downloads/myapp_brand_assets에 생성한 에셋이 있어요
예상 결과:
12개 파일 확인됨. favicon.ico, icon.png, apple-icon.png, opengraph-image.png, twitter-image.png를 app/에 복사했습니다. PWA 아이콘을 public/에 복사했습니다. 브랜드 색상으로 manifest.json을 생성했습니다. layout.tsx 메타데이터를 업데이트했습니다. 확인 단계가 제공되었습니다.
보안 감사
낮은 위험All 228 static findings are false positives. The scanner misidentified Markdown backtick code formatting as Ruby shell execution (181 locations) and treated documentation URLs and placeholder domain examples as network threats. The 'weak cryptographic algorithm' flags refer to natural language descriptions, not actual code. The skill's intended functionality of scanning a Next.js project for brand colors and copying asset files is legitimate. A minor promotional reference to casely.digital on SKILL.md line 290 is noted but does not pose a security risk.
낮은 위험 문제 (1)
위험 요인
⚙️ 외부 명령어 (3)
감지된 패턴
품질 점수
만들 수 있는 것
새 프로젝트에 브랜딩하는 개인 개발자
새 Next.js 프로젝트를 시작하는 개발자가 수동 파일 생성 없이 몇 분 만에 모든 파비콘, PWA 아이콘 및 OG 이미지를 설정할 수 있습니다.
프로덕션 애플리케이션을 출시하는 팀
프로덕트 팀이 출시 전에 완전한 PWA 지원, 소셜 미디어 카드, 모든 플랫폼에서 일관된 브랜딩을 필요로 합니다.
기존 프로젝트에 PWA 지원을 추가하는 개발자
기존 Next.js 프로젝트에 설치 가능한 웹 앱 지원을 위해 manifest.json, 적절한 아이콘 크기 및 메타데이터 구성이 필요합니다.
이 프롬프트를 사용해 보세요
내 Next.js 프로젝트의 브랜드 에셋을 설정해줘.
내 앱의 파비콘, OG 이미지 및 PWA 아이콘을 생성해줘. 내 프로젝트의 브랜드 색상을 사용해줘.
내 Next.js 프로젝트를 스캔하고 전체 브랜딩을 설정해줘. Tailwind 설정에서 색상을 감지하고 OG 이미지와 함께 메타데이터를 생성해줘.
내 다운로드 폴더에 로고 파일이 있어. 모든 브랜드 에셋을 생성하고, 가져오고, 내 메타데이터를 업데이트하는 것을 도와줘.
모범 사례
- 커스텀 아이콘을 추가하기 전에 먼저 이 스킬을 실행하면 기존 에셋을 정확하게 감지할 수 있습니다.
- 모든 에셋 크기에서 최상의 결과를 얻으려면 고해상도 벡터 로고를 제공하세요.
- 스테이징 또는 프로덕션 환경에 배포한 후 opengraph.xyz를 사용하여 OG 이미지를 확인하세요.
피하기
- Next.js가 app/ 디렉토리에서 자동 감지하는 아이콘 참조를 메타데이터에 수동으로 추가하는 행위
- 운영체제가 적응형 스타일링을 위해 투명 처리를 기대하는 아이콘에 단색 배경을 사용하는 행위
- 색상 감지 단계를 건너뛰고 브랜드와 일치하지 않는 일반 색상을 사용하는 행위