Skills Repository

Claude Code와 다른 AI 에이전트에서 사용하는 커스텀/외부 스킬만 관리하는 레포지토리입니다.

전역 지침, 설정, extension, agent 정의의 정본은 각 로컬 전역 경로(~/.pi, ~/.claude, ~/.agents, ~/.codex)에 둡니다. 해당 파일들은 Obsidian Areas/AgentOps의 generated mirror로만 추적합니다.

구조

skills-and-agents/
├── README.md
├── install.sh              # skill symlink 동기화 스크립트
├── install-skill.sh        # 외부 스킬 설치 래퍼 (skills CLI + 자동 정리)
├── custom/
│   └── skills/            # 직접 작성한 커스텀 스킬
├── external/
│   └── skills/            # 외부에서 가져온 스킬
└── backup/                # 로컬 백업 (gitignore)

Custom vs External

Custom

• 직접 작성하고 유지보수하는 스킬
• 프로젝트 특화 로직, 개인 워크플로우 등
• Git으로 버전 관리 및 공유

External

• 커뮤니티나 외부 소스에서 가져온 스킬
• awesome-claude-skills, openskills 등에서 설치
• 원본 유지하며 필요시 커스터마이징

설치

git clone https://github.com/doyoonear/skills-and-agents.git ~/skills-and-agents
cd ~/skills-and-agents
./install.sh

install.sh는 다음 위치에 skill symlink를 생성합니다:

• ~/.claude/skills/ - Claude Code용 스킬
• ~/.agents/skills/ - 범용 에이전트 스킬 (Cursor, Windsurf 등)
• ~/.codex/skills/ - Codex용 스킬
• ~/.pi/agent/skills/ - Pi 전용/중복 skill 정리 대상

~/.claude/agents/와 전역 설정/extension은 이 repo에서 관리하지 않습니다.

스킬 추가/변경

Custom 스킬 추가

1. custom/skills/ 폴더에 스킬 추가 (폴더 또는 .md 파일)
2. ./install.sh 실행하여 symlink 동기화
3. Git commit & push

폴더 형식 (권장):

custom/skills/my-skill/
├── SKILL.md        # 메인 스킬 파일
├── scripts/        # 스크립트 (선택)
├── references/     # 참고 문서 (선택)
└── assets/         # 리소스 파일 (선택)

단일 파일 형식:

custom/skills/my-guide.md

SKILL.md 예시

---
name: my-skill
description: 스킬 설명 및 트리거 키워드
---

# My Skill

스킬 지시사항...

External 스킬 추가 (skills CLI 래퍼)

install-skill.sh를 사용하면 skills CLI로 설치한 스킬을 자동으로 external/skills/에 정리하고 symlink까지 생성합니다.

cd ~/Desktop/dev_else/_my-projects/skills-and-agents

# 레포의 전체 스킬 목록 확인 후 선택 설치
./install-skill.sh coreyhaines31/marketingskills

# 특정 스킬만 지정 설치
./install-skill.sh coreyhaines31/marketingskills -s ab-test-setup

# 레포의 모든 스킬 일괄 설치
./install-skill.sh coreyhaines31/marketingskills --all

패키지 이름 형식 — 아래 세 가지 모두 동일하게 동작합니다:

# GitHub 축약형 (owner/repo) — 권장
./install-skill.sh coreyhaines31/marketingskills

# GitHub 전체 URL
./install-skill.sh https://github.com/coreyhaines31/marketingskills

# .git 확장자 포함 URL
./install-skill.sh https://github.com/coreyhaines31/marketingskills.git

동작 흐름:

1. npx skills add <package> -g 실행 (글로벌 설치)
2. ~/.agents/skills/에 생긴 새 스킬을 external/skills/로 자동 이동
3. install.sh 실행하여 symlink 재생성 (~/.agents/skills/, ~/.claude/skills/, ~/.codex/skills/)

External 스킬 수동 추가

래퍼 없이 직접 추가할 때:

# 1. external/skills/에 복사
cp -r /path/to/external-skill external/skills/

# 2. symlink 동기화
./install.sh

에이전트/전역 설정 관리

이 repo는 더 이상 agent 정의, 전역 지침, 설정, extension을 관리하지 않습니다.

• agent 정의 정본: 각 도구의 로컬 전역 경로
• 전역 지침/설정/extension 정본: ~/.pi, ~/.claude, ~/.agents, ~/.codex
• 참고 미러: /Users/doyoonlee/ObsidianVault/Areas/AgentOps/

전역 지침/설정/extension 원본 파일을 수정한 직후에만 아래 명령으로 Obsidian generated mirror를 갱신합니다. 일반 작업 완료 후마다 실행하는 절차가 아닙니다.

/Users/doyoonlee/ObsidianVault/Areas/AgentOps/sync_agentops_mirrors.py

다른 AI 에이전트 지원

현재 지원하는 플랫폼:

• Claude Code: ~/.claude/skills/, ~/.claude/agents/
• 범용 에이전트 (Cursor, Windsurf 등): ~/.agents/skills/
• Codex CLI: ~/.codex/skills/

다른 플랫폼 symlink가 필요하면 install.sh를 수정하세요.

Agentation & Agent-Browser 사용 가이드

UI 시각적 피드백 + AI 자율 디자인 리뷰를 위한 도구 세트입니다.

구성 요소

항목	종류	역할
agentation	스킬	프로젝트에 <Agentation /> 툴바 세팅
agentation-self-driving	스킬	AI가 자율적으로 브라우저를 순회하며 디자인 비평
agentation-mcp	MCP 서버	에이전트 ↔ 브라우저 주석 실시간 양방향 통신
agent-browser	CLI 도구 + 스킬	AI 에이전트 전용 브라우저 자동화

사전 요구사항

# agent-browser CLI (전역 설치)
npm install -g agent-browser
agent-browser install  # Chromium 다운로드

# MCP 서버 설정 — Claude Code (~/.claude/settings.json)
# mcpServers에 아래 추가:
# "agentation": { "command": "npx", "args": ["-y", "agentation-mcp", "server"] }

# MCP 서버 설정 — Codex CLI (~/.codex/config.toml)
# [mcp_servers.agentation]
# command = "npx"
# args = ["-y", "agentation-mcp", "server"]

사용법 1: 프로젝트 세팅 (1회)

프로젝트에 Agentation 툴바를 추가합니다. 한 번만 실행하면 됩니다.

# Claude Code
/agentation

# Codex CLI
$agentation

스킬이 자동으로:

1. pnpm add agentation -D (또는 프로젝트의 패키지 매니저)
2. app/layout.tsx에 <Agentation /> 컴포넌트 추가 (dev 환경 only)

사용법 2: 수동 피드백 (사람이 직접)

세팅 후 브라우저에서 개발 서버를 열면 Agentation 툴바가 나타납니다.

1. UI 요소 위에 마우스 올리고 클릭
2. "이 버튼 색상 바꿔줘" 같은 피드백 작성
3. "Copy" 버튼 → 마크다운 복사 → AI 에이전트에 붙여넣기

복사된 내용에는 CSS 선택자, React 컴포넌트명, 계산된 스타일이 포함되어 에이전트가 정확한 위치를 바로 파악합니다.

MCP 연결 시 복사-붙여넣기 없이 에이전트에게 직접 요청:

주석 확인해서 수정해줘

사용법 3: AI 자율 디자인 리뷰

AI가 headed 브라우저를 열고, 마우스를 직접 움직이며 페이지를 순회하고 디자인 비평을 남깁니다. 사용자는 실시간으로 구경할 수 있습니다.

# 기본 사용
/agentation-self-driving
localhost:3000 페이지 디자인 리뷰해줘

# 특정 페이지 + 관점 지정
/agentation-self-driving
localhost:3000/blog/my-post 타이포그래피랑 간격 위주로 비평해줘

# 특정 영역 집중
/agentation-self-driving
홈페이지 히어로 섹션이랑 CTA 배치 검토해줘

AI가 남기는 비평 예시:

대상	주석 내용
히어로 헤드라인	"h1과 서브헤딩 사이 간격이 8px로 너무 좁다. 16-24px로 늘리면 시각적 계층이 명확해진다."
블로그 카드	"카드 간 간격이 불규칙하다. gap: 24px로 통일하고, 호버 시 subtle shadow 추가 권장."
CTA 버튼	"버튼이 주변 텍스트와 시각적 가중치가 비슷하다. 배경색 대비를 높이고 padding 확대."

사용법 4: 풀 자율 모드 (2세션)

터미널 2개를 열어 리뷰 + 코드 수정을 동시에 실행합니다.

세션 1 — 디자인 비평:

/agentation-self-driving
localhost:3000 전체 페이지 디자인 리뷰해줘

세션 2 — 코드 자동 수정:

agentation 주석 감시하면서 들어오는 피드백 자동으로 코드에 반영해줘

세션1이 브라우저에서 주석을 남기면, 세션2가 MCP를 통해 실시간으로 받아서 코드를 수정합니다.

호환 플랫폼

기능	Claude Code	Codex CLI	Cursor	기타
/agentation 스킬	/agentation	$agentation	자동 감지	Agent Skills 표준 지원 도구
MCP 연동	settings.json	config.toml	설정 필요	MCP 지원 도구
agent-browser	지원	지원	지원	대부분 지원

참고 링크

• Agentation 공식 사이트
• Agentation 설치 가이드
• agent-browser GitHub
• Agent Skills Standard

백업

backup/ 폴더는 .gitignore에 포함되어 있으며, 로컬 백업 용도로 사용됩니다.

License

MIT