DanialDaeHyunNam
DanialDaeHyunNam/claude-starter
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/DanialDaeHyunNam/claude-starter --skill growth-setup命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | growth-setup |
| description | SEO 메타태그, Google Analytics, Vercel Analytics를 함께 세팅하는 워크플로우. |
SEO, Google Analytics, Vercel Analytics를 프로젝트에 세팅합니다. 비개발자도 이해할 수 있도록 각 설정이 왜 필요한지 설명하고, 사용자와 함께 필요한 설정값(GA ID 등)을 입력합니다.
/growth-setup을 입력했을 때/6-implement-by-claude-teams 완료 후 자동 호출아래 내용을 출력하세요:
사용자가 검색으로 들어오고 어떻게 쓰는지 데이터로 확인
┌─────────────────────┐ ┌──────────────────────────┐
│ 🔍 Google 검색 │ │ 📊 방문자 수 │
│ "간호사 커리어 전환" │ ──→ │ 📊 어디서 왔는지 │
│ → 내 사이트 노출! │ │ 📊 어떤 페이지를 많이 보는지│
└─────────────────────┘ └──────────────────────────┘
SEO Google Analytics
+ Vercel Analytics
쉽게 말하면:
이 3가지를 지금 한꺼번에 세팅할 거예요.
AskUserQuestion 도구를 사용하여 질문하세요:
AskUserQuestion으로 사용자에게 SEO에 필요한 정보를 하나씩 받습니다.
수집한 정보로 SEO를 구현합니다.
src/app/layout.tsx의 metadata 설정:import type { Metadata } from "next";
export const metadata: Metadata = {
title: {
default: "{사이트 제목}",
template: "%s | {사이트 짧은 이름}",
},
description: "{사이트 설명}",
keywords: ["{키워드1}", "{키워드2}", ...],
openGraph: {
title: "{사이트 제목}",
description: "{사이트 설명}",
url: "{배포 URL 또는 placeholder}",
siteName: "{사이트 이름}",
locale: "ko_KR",
type: "website",
// images: [{ url: "/og-image.png", width: 1200, height: 630 }],
},
twitter: {
card: "summary_large_image",
title: "{사이트 제목}",
description: "{사이트 설명}",
},
robots: {
index: true,
follow: true,
},
};
public/robots.txt 생성:User-agent: *
Allow: /
Sitemap: {배포URL}/sitemap.xml
src/app/sitemap.ts 생성:import type { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://example.com";
return [
{ url: baseUrl, lastModified: new Date(), changeFrequency: "weekly", priority: 1 },
// 주요 페이지 추가
];
}
사용자에게 안내:
📊 Google Analytics를 연결하려면 측정 ID가 필요해요.
아직 없다면 지금 만들 수 있어요:
1. https://analytics.google.com 접속
2. "측정 시작" 클릭
3. 계정 이름 입력 (예: "내 프로젝트")
4. 속성 이름 입력 (예: "커리어 나침반")
5. 웹 스트림 추가 → URL 입력
6. "G-XXXXXXXXXX" 형태의 측정 ID 복사
⏳ 시간이 걸릴 수 있으니, 나중에 하고 싶으면 "나중에"를 선택해주세요.
AskUserQuestion:
GA ID를 받으면:
.env.local에:NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
src/app/layout.tsx에 GA 스크립트 추가:import Script from "next/script";
// layout의 <head> 또는 <body> 안에:
{process.env.NEXT_PUBLIC_GA_ID && (
<>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
`}
</Script>
</>
)}
"나중에"를 선택하면 코드는 넣되 환경변수를 비워두고 안내:
GA 코드는 미리 넣어뒀어요.
나중에 .env.local에 NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX 를 추가하면 바로 동작합니다.
bun add @vercel/analytics @vercel/speed-insights
src/app/layout.tsx에 추가:import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
// layout return 안에:
<Analytics />
<SpeedInsights />
사용자에게 안내:
✅ Vercel Analytics는 Vercel에 배포하면 자동으로 동작해요.
로컬에서는 데이터가 수집되지 않으니 걱정 마세요.
배포 후 Vercel 대시보드 → Analytics 탭에서 확인할 수 있어요.
bun run build
빌드 성공 확인 후:
✅ Growth Setup 완료!
🔍 SEO
- 메타 태그 설정 완료 (제목, 설명, 키워드, OG)
- robots.txt 생성 완료
- sitemap.ts 생성 완료
📊 Google Analytics
- {설정 완료 / 코드 준비 완료 (ID 미입력)}
📈 Vercel Analytics
- @vercel/analytics 설치 완료
- @vercel/speed-insights 설치 완료
- 배포 후 자동 활성화
.env.local에만 저장 (.env에 직접 쓰지 않음)