Garden Skills: Claude Code, Cursor, Codex를 위한 4가지 프로덕션 에이전트 스킬 모음

9bow · 5월 22, 2026, 3:30오전

Garden Skills 소개

Garden Skills 는 Claude Code, Cursor, Codex, OpenCode 같은 AI 코딩 에이전트에 그대로 꽂아 쓸 수 있는 "프로덕션 준비된 에이전트 스킬(Production-ready Agent Skills)" 4종을 모아 둔 큐레이션 모음입니다. ConardLi 가 만든 이 저장소는 기존의 ConardLi/web-design-skill 이 확장·리브랜딩된 형태로, 현재는 단일 스킬이 아니라 디자인·발표·이미지 생성·로컬 지식 검색이라는 네 가지 도메인을 다루는 통합 패키지입니다. 모든 스킬은 Agent Skills 표준 의 SKILL.md 규격을 따르며, npx 한 줄, Claude Code 플러그인 마켓플레이스, 핀(pin) 된 .zip, git submodule 등 5가지 설치 경로를 모두 지원합니다.

저자의 설계 의도는 "에이전트가 막연히 잘 만들도록 두는 것" 이 아니라, "에이전트가 어느 단계를 거쳐, 어떤 산출물을, 어떤 품질 기준으로 만들지" 를 SKILL.md 안에서 강하게 명세하는 것에 있습니다. 예를 들어 web-design-engineer 는 단순한 "UI 잘 만들기" 스킬이 아니라, 요구사항 → 컨텍스트 → 디자인 시스템 → v0 → 풀 빌드 → 검증의 6단계 워크플로우와 "AI 가 흔히 만드는 일반적인 UI 패턴" 을 막는 anti-cliché blocklist 를 포함합니다. 다른 스킬도 같은 방식으로 단계와 체크포인트를 명세합니다.

본 게시물에서는 Garden Skills 의 4가지 스킬이 각각 어떤 작업을 어떤 방식으로 해결하는지, 그리고 다섯 가지 설치 옵션 중 어떤 것을 골라야 하는지를 정리합니다. 모든 스킬은 MIT 라이선스로 공개되어 있고, 각 스킬마다 README, SKILL.md, 다운로드 가능한 .zip 릴리스, 일부는 데모 웹사이트까지 별도 제공합니다.

Garden Skills 의 4가지 스킬

저장소가 묶고 있는 네 가지 스킬을 README 의 기준 그대로 정리하면 다음과 같습니다.

web-design-engineer: 디자인/프론트엔드 카테고리의 스킬로, 랜딩 페이지, 대시보드, HTML 슬라이드 덱, 데이터 시각화 등을 "기능적인 결과물" 이 아니라 "의도가 분명하고 시각적으로 기억에 남는 프런트엔드 작업" 으로 끌어올리는 것을 목표로 합니다. 에이전트를 디자인 엔지니어 로 다루면서, 6단계 워크플로우(requirements → context → design system → v0 → full build → verification) 와 anti-cliché blocklist 로 일반적인 AI UI 패턴을 차단합니다. HTML/CSS/JS/React 프로토타입을 모두 다루며, 인라인 React + Babel, CSS 토큰, oklch() 색 처리, 컨테이너 쿼리, prefers-reduced-motion 처리 같은 구현 규칙이 들어 있습니다.

web-video-presentation: 웹 영상/프레젠테이션 엔지니어링 카테고리로, 글이나 강의·제품 데모를 클릭 기반 16:9 웹 프레젠테이션 으로 만들어 화면 녹화로 영상화할 수 있게 합니다. 1920×1080 고정 스테이지가 뷰포트에 따라 안정적으로 스케일되며, (chapter, step) 커서로 클릭·키보드 진행을 제어합니다. 스크립트, 테마, 아웃라인, 구현 모드, 선택적 오디오 합성 단계마다 협업 체크포인트(hard collaboration checkpoint) 가 들어 있어 "어디서 멈춰서 사람의 승인을 받아야 하는지" 가 명세되어 있습니다. Vite + React + TypeScript 프로젝트 스캐폴딩과 녹화 가이드까지 함께 제공합니다.

gpt-image-2: 이미지 생성/프롬프트 엔지니어링 카테고리로, GPT Image 2 및 OpenAI 호환 이미지 API 를 대상으로 합니다. 같은 스킬이 환경에 따라 세 가지 런타임 모드로 동작하는 점이 특징입니다: 로컬에서 직접 생성하는 Mode A Garden local , 호스트 측 네이티브 이미지 도구로 위임하는 Mode B host-native delegation , 이미지 도구가 없을 때 프롬프트만 작성해 주는 Mode C advisor-only 입니다. 매 작업을 모드 감지부터 시작하므로, 스킬이 조용히 잘못된 실행 경로를 고르는 사고가 줄어듭니다. references/ 디렉토리에는 18개 비주얼 카테고리와 80개 이상 구조화된 프롬프트 템플릿이 들어 있습니다.

kb-retriever: 로컬 지식 베이스 검색 카테고리로, 로컬 knowledge/ 디렉토리에서 답을 찾는 진보적 검색(progressive search) 패턴을 구현합니다. 파일 전체를 통째로 컨텍스트에 올리지 않고, 계층적 data_structure.md 인덱스 파일을 따라 후보를 좁힌 다음, 정확한 키워드 검색, 로컬 윈도우 읽기, 동의어 확장, 반복 정제(iterative refinement) 를 조합합니다. PDF 와 Excel 은 처리 전에 별도 참고 문서를 먼저 읽도록 강제 하는 learn-before-process 규칙이 있어 복잡한 파일 타입에 대한 환각 추출을 줄입니다. 검색은 최대 5라운드로 상한이 정해져 있어 탐색이 과도하게 길어지는 것을 막습니다.

Garden Skills 의 5가지 설치 옵션

저자는 "한 가지 방법만 옳다" 고 주장하지 않고, 상황에 따라 어울리는 다섯 가지 설치 경로를 명세합니다. README 의 표를 옮기면 다음과 같습니다.

#	방법	적합한 사용처	버전 고정 가능
A	`skills` CLI (`npx skills add`)	어떤 에이전트든, 한 줄 설치, 골라서 설치	태그 URL 로 가능
B	Claude Code 플러그인 마켓플레이스	Claude Code 사용자, 플러그인 팩 구독	마켓플레이스 버전으로 가능
C	GitHub Releases 의 핀(pin) 된 .zip	CI / 에어갭 환경 / 재현 가능한 설치	불변(immutable)
D	git clone 후 수동 복사	스킬 자체를 수정하며 작업	`main` 추적
E	git submodule	큰 프로젝트에 벤더링, 업스트림 갱신	서브모듈 SHA 로 가능

가장 빠른 경로는 npx 입니다. CLI 가 설치된 에이전트(Claude Code, Cursor, Codex 등) 를 자동 감지해 적절한 디렉토리에 스킬을 떨어뜨립니다.

# 4개 스킬 모두 (latest)
npx skills add ConardLi/garden-skills

# 단일 스킬만 (latest)
npx skills add ConardLi/garden-skills -s web-design-engineer

# 전역(~/.skills) 으로 설치
npx skills add ConardLi/garden-skills -s gpt-image-2 --global

# 특정 에이전트 타겟팅
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code

CI 나 프로덕션에서 완전히 같은 바이트 가 필요하면, GitHub Releases 의 핀된 .zip 을 사용합니다. 모든 정식 릴리스에는 SHA-256 체크섬이 함께 발행됩니다.

SKILL=web-design-engineer
VERSION=1.0.0
curl -fsSL -o "${SKILL}.zip" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"
curl -fsSL -o "${SKILL}.zip.sha256" \
  "https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"
unzip -q "${SKILL}.zip" -d .claude/skills/

Claude Code 사용자라면 플러그인 마켓플레이스로 묶어서 받을 수도 있습니다. 4개 스킬은 각각 별도의 플러그인 팩으로 묶여 있습니다.

/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills

라이선스

Garden Skills는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 각 스킬의 SKILL.md, 참고 문서, 데모 웹사이트 모두 동일한 라이선스 아래 배포됩니다.

Garden Skills 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~