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

**URL:** https://discuss.pytorch.kr/t/garden-skills-claude-code-cursor-codex-4/10309
**Category:** 읽을거리&정보공유
**Tags:** claude-code, web-design, garden-skills, kb-retriever, production-agent, agent-skills, gpt-image-2
**Created:** [5월 22, 2026, 3:30오전 UTC](https://discuss.pytorch.kr/t/garden-skills-claude-code-cursor-codex-4/10309 "2026-05-22T03:30:39Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![9bow](https://discuss.pytorch.kr/user_avatar/discuss.pytorch.kr/9bow/32/16301_2.png) [@9bow](https://discuss.pytorch.kr/u/9bow)
#### Post date: [5월 22, 2026, 3:30오전 UTC](https://discuss.pytorch.kr/t/garden-skills-claude-code-cursor-codex-4/10309/1 "2026-05-22T03:30:39Z")

</div>

![Garden Skills: Claude Code, Cursor, Codex를 위한 4가지 프로덕션 에이전트 스킬 모음](https://discuss.pytorch.kr/uploads/default/original/3X/6/5/65c47cb10587602086c784152ab774e8af7c983d.jpeg)

## Garden Skills 소개

Garden Skills 는 Claude Code, Cursor, Codex, OpenCode 같은 AI 코딩 에이전트에 그대로 꽂아 쓸 수 있는 _"프로덕션 준비된 에이전트 스킬(Production-ready Agent Skills)"_ 4종을 모아 둔 큐레이션 모음입니다. ConardLi 가 만든 이 저장소는 기존의 `ConardLi/web-design-skill` 이 확장·리브랜딩된 형태로, 현재는 단일 스킬이 아니라 디자인·발표·이미지 생성·로컬 지식 검색이라는 네 가지 도메인을 다루는 통합 패키지입니다. 모든 스킬은 [Agent Skills 표준](https://support.claude.com/en/articles/12512176-what-are-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 의 기준 그대로 정리하면 다음과 같습니다.

 ![Garden Skills의 web-design-engineer 스킬 카드](https://discuss.pytorch.kr/uploads/default/original/3X/9/3/935584a21555e42b0232b2ed3af32213a3819a8d.jpeg)

**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 처리 같은 구현 규칙이 들어 있습니다.

 ![Garden Skills의 web-video-presentation 스킬 카드](https://discuss.pytorch.kr/uploads/default/original/3X/b/9/b91630420ea6d9fdd0ba5c6965cfd96e87b447a4.jpeg)

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

 ![Garden Skills의 gpt-image-2 스킬 카드](https://discuss.pytorch.kr/uploads/default/original/3X/7/e/7e9fc92840fd54aba48bf4f3f6e6b60676a4fdb2.jpeg)

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

 ![Garden Skills의 kb-retriever 스킬 카드](https://discuss.pytorch.kr/uploads/default/original/3X/e/b/eb7d15321fdf4b9c9a22bb3988e70a824b1b03b7.jpeg)

**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 등) 를 자동 감지해 적절한 디렉토리에 스킬을 떨어뜨립니다.

```bash
# 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 체크섬이 함께 발행됩니다.

```bash
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개 스킬은 각각 별도의 플러그인 팩으로 묶여 있습니다.

```bash
/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 라이선스](https://github.com/ConardLi/garden-skills/blob/main/LICENSE)로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 각 스킬의 SKILL.md, 참고 문서, 데모 웹사이트 모두 동일한 라이선스 아래 배포됩니다.

## :github: Garden Skills 프로젝트 GitHub 저장소

> **[GitHub - ConardLi/garden-skills: ConardLi's open-source Skills collection,...](https://github.com/ConardLi/garden-skills)**
>
> ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

## 더 읽어보기

- [Agent Skills: 소프트웨어 개발 생명주기 전체를 커버하는 AI 코딩 에이전트용 프로덕션급 20개 엔지니어링 스킬 모음](https://discuss.pytorch.kr/t/agent-skills-ai-20/9763)

- [Book-to-SKILL: 기술 서적 PDF나 EPUB을 Claude Code 스킬로 변환해 작업 중에 바로 활용하는 도구](https://discuss.pytorch.kr/t/book-to-skill-pdf-epub-claude-code/10094)

- [paper2code: arXiv 논문 URL 하나로 인용 근거가 달린 실제 PyTorch 구현 코드를 자동 생성하는 Claude Code 스킬](https://discuss.pytorch.kr/t/paper2code-arxiv-url-pytorch-claude-code/9580)

- [Skill Seekers: 문서 및 GitHub 저장소 등을 Claude 및 코딩 에이전트용 스킬(Skill) 패키지로 변환하는 도구](https://discuss.pytorch.kr/t/skill-seekers-github-claude-skill/8585)

- [Awesome AI Coding Tools: 개발자를 위한 100여가지 AI 코딩 도구 소개 목록 (feat. AI for Developers)](https://discuss.pytorch.kr/t/awesome-ai-coding-tools-100-ai-feat-ai-for-developers/8939)

* * *

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

[:pytorch:파이토치 한국 사용자 모임🇰🇷](https://pytorch.kr/)이 정리한 이 글이 유용하셨나요? [회원으로 가입](https://discuss.pytorch.kr/signup)하시면 주요 글들을 이메일💌로 보내드립니다! (기본은 Weekly지만 [Daily로 변경도 가능](https://discuss.pytorch.kr/my/preferences/emails)합니다.)

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