From 1afe8fd4ce92da34df4ccd26fdbe74d27a3fdbbd Mon Sep 17 00:00:00 2001 From: happybell80 Date: Sun, 22 Mar 2026 22:57:31 +0900 Subject: [PATCH] =?UTF-8?q?add:=20agent=20skills=20=EC=83=9D=ED=83=9C?= =?UTF-8?q?=EA=B3=84=20&=20OpenAI=20=ED=94=84=EB=A1=A0=ED=8A=B8=EC=97=94?= =?UTF-8?q?=EB=93=9C=20=EA=B0=80=EC=9D=B4=EB=93=9C=20=EB=A6=AC=EC=84=9C?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- ...osystem_openai_frontend_guide_리서치.md | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 journey/research/260322_agent_skills_ecosystem_openai_frontend_guide_리서치.md diff --git a/journey/research/260322_agent_skills_ecosystem_openai_frontend_guide_리서치.md b/journey/research/260322_agent_skills_ecosystem_openai_frontend_guide_리서치.md new file mode 100644 index 0000000..1c6a575 --- /dev/null +++ b/journey/research/260322_agent_skills_ecosystem_openai_frontend_guide_리서치.md @@ -0,0 +1,144 @@ +# Agent Skills 생태계 & OpenAI 프론트엔드 디자인 가이드 리서치 + +- 날짜: 2026-03-22 +- 출처: + - https://skills.sh/ (Vercel Labs — The Open Agent Skills Ecosystem) + - https://github.com/vercel-labs/agent-skills (Vercel 공식 스킬 컬렉션) + - https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4 + +--- + +## 1. Agent Skills 생태계 (skills.sh) + +### 개요 +AI 코딩 에이전트(Claude Code, Cursor, Copilot, Codex 등 20+)를 위한 **재사용 가능한 스킬 디렉토리**. 스킬은 "패키징된 지침과 스크립트"로, 에이전트에 절차적 지식을 추가한다. + +### 설치 +```bash +npx skills add +``` + +### 스킬 구성 요소 +각 스킬은 다음을 포함: +- `SKILL.md` — 에이전트 지침서 (핵심) +- `scripts/` — 자동화 헬퍼 (선택) +- `references/` — 지원 문서 (선택) + +### 주요 스킬 (설치 수 기준 상위) + +| 스킬 | 출처 | 설치 수 | 용도 | +|------|------|---------|------| +| find-skills | vercel-labs | 660K | 스킬 검색 | +| vercel-react-best-practices | vercel-labs | 235K | React/Next.js 성능 최적화 (40+ 규칙) | +| web-design-guidelines | vercel-labs | 188K | UI 코드 컴플라이언스 (100+ 규칙, 접근성 포함) | +| frontend-design | anthropics | 186K | 프론트엔드 디자인 가이드라인 | +| remotion-best-practices | remotion-dev | 165K | 비디오 생성 | + +### Vercel 공식 스킬 5종 (vercel-labs/agent-skills) +- **react-best-practices**: 워터폴 제거, 번들 최적화, 서버/클라이언트 성능 (40+ 규칙, 8개 카테고리) +- **web-design-guidelines**: 접근성, 포커스, 폼, 애니메이션, 이미지, i18n (100+ 규칙, 11개 카테고리) +- **react-native-guidelines**: FlashList, Reanimated, 모바일 아키텍처 (16 규칙) +- **composition-patterns**: 합성 컴포넌트, prop drilling 회피, boolean props 관리 +- **vercel-deploy-claimable**: 40+ 프레임워크 자동 감지 → 즉시 배포 + 프리뷰 URL + +--- + +## 2. OpenAI 프론트엔드 디자인 가이드 (GPT-5.4 블로그) + +2026-03-20 발표. GPT-5.4 + Codex 환경 대상이나, **디자인 원칙 자체는 범용**. + +### 핵심 설계 원칙 + +#### 랜딩 페이지 시퀀스 +1. **히어로** — 브랜드/제품, 약속, CTA, 지배적 시각 +2. **지원** — 구체적 기능, 제안 또는 증명 +3. **상세** — 워크플로우, 제품 깊이, 스토리 +4. **최종 CTA** — 변환, 시작, 연락 + +#### 히어로 규칙 +- 한 가지 구성만 (대시보드가 아닌 포스터) +- 풀블리드 이미지 또는 지배적 시각적 평면 +- 브랜드명이 가장 큰 텍스트 +- 기본값으로 히어로 카드/통계 스트립/로고 클라우드 금지 +- 데스크톱 제목 2-3줄, 모바일에서 한 눈에 읽기 가능 +- 고정 헤더 포함 시 `calc(100svh - header-height)` 사용 + +#### 디자인 시스템 제약 +- 타이포그래피 최대 2종 (기본 스택 Inter/Roboto/Arial 회피) +- 악센트 색상 1개 +- 카드 없는 레이아웃 기본값 (섹션, 열, 구분선, 목록 사용) +- 색상 토큰: background, surface, primary text, muted text, accent +- 타이포 역할: display, headline, body, caption + +#### 앱 UI (대시보드) +- **Linear 스타일 절제**: 차분한 표면, 강한 타이포/간격, 적은 색상, 밀도 높지만 읽을 수 있는 정보 +- 카드는 상호작용이 카드일 때만 사용 +- 회피: 대시보드 카드 모자이크, 두꺼운 경계선, 장식 그래디언트, 장식 아이콘 + +#### 카피 규칙 +- 제품 언어로 작성 (설계 해설 아님) +- 제목이 의미 전달, 지원 카피는 보통 한 문장 +- **테스트: 카피의 30%를 삭제해도 개선되면 계속 삭제** +- 대시보드용: 방향/상태/작업 우선 (브랜드 목소리 아님) + +#### 모션 (최소 2-3가지) +1. 히어로 입장 시퀀스 +2. 스크롤 연결/고정/깊이 효과 +3. 호버/공개/레이아웃 전환 +- Framer Motion 선호 +- 빠르고 절제, 모바일에서 부드러움, 장식만이면 제거 + +#### Litmus 테스트 (자가 검증) +- 첫 화면에서 브랜드/제품이 뚜렷한가? +- 강한 시각적 앵커가 1개 있는가? +- 제목만 스캔하면 페이지를 이해할 수 있는가? +- 각 섹션이 한 가지 일을 하는가? +- 카드가 실제로 필요한가? +- 모션이 계층/분위기를 개선하는가? +- 장식 그림자 제거 시에도 프리미엄으로 느껴지는가? + +--- + +## 3. 우리 프로젝트 적용 가능성 평가 + +### 직접 적용 가능 + +| 항목 | 대상 프로젝트 | 이유 | +|------|-------------|------| +| react-best-practices 스킬 | frontend-ir-valuation | React 18 + Tailwind + Radix 사용 중, 성능 규칙 바로 적용 가능 | +| web-design-guidelines 스킬 | frontend-ir-valuation, frontend-customer | 접근성/폼/애니메이션 컴플라이언스 검증 | +| composition-patterns 스킬 | frontend-ir-valuation | Radix 기반 합성 컴포넌트 패턴과 직접 연관 | +| 디자인 원칙 (카피/레이아웃) | 전체 프론트엔드 | 랜딩 페이지, 대시보드 모두 해당 | +| Litmus 테스트 체크리스트 | 전체 프론트엔드 | UI 리뷰 시 자가 검증 기준 | + +### 간접 참고 + +| 항목 | 비고 | +|------|------| +| 스킬 포맷 (SKILL.md + scripts/) | robeing 기존 스킬(skill-calendar 등)과 구조 비교 검토 가능 | +| 스킬 생태계 자체 | Claude Code에서 `npx skills add` 가능 — 필요 시 외부 스킬 설치 | + +### 적용 불가/불필요 + +| 항목 | 이유 | +|------|------| +| GPT-5.4 Playwright 자동 검증 | OpenAI 플랫폼 종속 | +| vercel-deploy-claimable | Vercel 배포 미사용 (nginx 직접 운영) | +| react-native-guidelines | 모바일 앱 없음 | +| 이미지 생성 도구 연동 | 워크플로우 해당 없음 | + +--- + +## 4. 미확정 사항 + +- `npx skills add`로 Claude Code에 스킬 설치 시 우리 `.claude/` 설정과 충돌 여부 미검증 +- robeing 기존 스킬 구조(skill-*/README.md)와 Agent Skills 표준(SKILL.md) 통합 방안 미정 +- frontend-customer는 dist만 존재 — 소스 코드 구조 확인 필요 + +--- + +## 5. 다음 단계 (제안) + +1. `npx skills add vercel-labs/agent-skills`로 react-best-practices, web-design-guidelines 설치 테스트 +2. frontend-ir-valuation에 디자인 원칙 적용 검토 (특히 Litmus 테스트 기준) +3. robeing 스킬 구조를 Agent Skills 표준(SKILL.md)과 비교하여 통합 검토